theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(badge): 添加动画

Browse Source
This commit is contained in:
sight 2022-04-10 21:00:49 +08:00
parent 6c7434f354
commit f1abd1725b
3 changed files with 53 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
package/component/src/component/badge/index.less
View File

@ -33,3 +33,27 @@
background-color: #fff; background-color: #fff;
color: #666; color: #666;
} }
.layui-badge-dot-ripple > span{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
box-sizing: border-box;
animation: layui-badge-dot-anim-ripple 1.2s ease-in-out infinite;
}
@keyframes layui-badge-dot-anim-ripple {
from {
transform: scale(0.8);
opacity: 0.6;
}
to {
transform: scale(2.4);
opacity: 0;
}
}

8
package/component/src/component/badge/index.vue
View File

@ -12,6 +12,7 @@ export interface LayBadgeProps {
type?: "dot" | "rim"; type?: "dot" | "rim";
theme?: string; theme?: string;
color?: string; color?: string;
ripple?: boolean;
} }
const props = defineProps<LayBadgeProps>(); const props = defineProps<LayBadgeProps>();
@ -22,8 +23,10 @@ const classes = computed(() => {
"layui-badge": !props.type, "layui-badge": !props.type,
"layui-badge-dot": props.type == "dot", "layui-badge-dot": props.type == "dot",
"layui-badge-rim": props.type == "rim", "layui-badge-rim": props.type == "rim",
"layui-badge-dot-ripple": props.ripple,
}, },
`layui-bg-${props.theme}`, `layui-bg-${props.theme}`,
]; ];
}); });
@ -34,6 +37,11 @@ const styles = computed(() => {
<template> <template>
<span :class="classes" :style="styles"> <span :class="classes" :style="styles">
<span v-if="type === 'dot'"
:class="props.theme ? `layui-bg-${props.theme}` : ``"
:style="styles ?? `background-color: #ff5722;`">
</span>
<slot v-if="type != 'dot'"></slot> <slot v-if="type != 'dot'"></slot>
</span> </span>
</template> </template>

19
package/document/src/document/zh-CN/components/badge.md
View File

@ -45,6 +45,25 @@ export default {
::: :::
::: title 动画
:::
::: demo 使用 `ripple` 属性, 添加水波纹动画, 仅支持 `dot` 类型
<template>
<lay-badge type="dot" ripple></lay-badge>&nbsp;
<lay-badge type="dot" theme="orange" ripple></lay-badge>&nbsp;
<lay-badge type="dot" theme="green" ripple></lay-badge>&nbsp;
<lay-badge type="dot" theme="cyan" ripple></lay-badge>&nbsp;
<lay-badge type="dot" theme="blue" ripple></lay-badge>&nbsp;
<lay-badge type="dot" theme="black" ripple></lay-badge>&nbsp;
<lay-badge type="dot" theme="gray" ripple></lay-badge>&nbsp;
</template>
<script>
</script>
:::
::: title Badge 属性 ::: title Badge 属性
::: :::