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

feat: 完成 badge 的按需样式

Browse Source
This commit is contained in:
就眠儀式 2022-04-12 08:36:54 +08:00
parent 7ec26120be
commit 32b7cbb7ab
4 changed files with 59 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,29 +31,54 @@
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
background-color: #fff; background-color: #fff;
border-color: @global-neutral-color-3;
color: #666; color: #666;
} }
.layui-badge-dot-ripple > span{ .layui-badge-dot-ripple > span {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
animation: layui-badge-dot-anim-ripple 1.2s ease-in-out infinite; 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;
} }
@keyframes layui-badge-dot-anim-ripple { to {
from { transform: scale(2.4);
transform: scale(0.8); opacity: 0;
opacity: 0.6;
}
to {
transform: scale(2.4);
opacity: 0;
}
} }
}
/** Badge 在与其他组件配合使用时的辅助样式 */
.layui-btn .layui-badge,
.layui-btn .layui-badge-dot {
margin-left: 5px;
}
.layui-nav .layui-badge,
.layui-nav .layui-badge-dot {
position: absolute;
top: 50%;
margin: -5px 6px 0;
}
.layui-nav .layui-badge {
margin-top: -10px;
}
.layui-tab-title .layui-badge,
.layui-tab-title .layui-badge-dot {
left: 5px;
top: -2px;
}

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

@ -26,7 +26,6 @@ const classes = computed(() => {
"layui-badge-dot-ripple": props.ripple, "layui-badge-dot-ripple": props.ripple,
}, },
`layui-bg-${props.theme}`, `layui-bg-${props.theme}`,
]; ];
}); });
@ -37,11 +36,13 @@ const styles = computed(() => {
<template> <template>
<span :class="classes" :style="styles"> <span :class="classes" :style="styles">
<span v-if="type === 'dot'" <span
:class="props.theme ? `layui-bg-${props.theme}` : ``" v-if="type === 'dot'"
:style="styles ?? `background-color: #ff5722;`"> :class="props.theme ? `layui-bg-${props.theme}` : ``"
</span> :style="styles ?? `background-color: #ff5722;`"
>
</span>
<slot v-if="type != 'dot'"></slot> <slot v-if="type != 'dot'"></slot>
</span> </span>
</template> </template>

4
package/component/src/resolver/index.ts
View File

@ -43,6 +43,10 @@ const matchComponents = [
pattern: /^LayEmpty$/, pattern: /^LayEmpty$/,
styleDir: "empty", styleDir: "empty",
}, },
{
pattern: /^LayBadge$/,
styleDir: "badge",
},
// .... // ....
{ {
pattern: /^LayAvatarList$/, pattern: /^LayAvatarList$/,

23
package/component/src/theme/index.less
View File

@ -376,7 +376,6 @@ a cite {
color: #666 !important; color: #666 !important;
} }
.layui-badge-rim,
.layui-border, .layui-border,
.layui-colla-content, .layui-colla-content,
.layui-colla-item, .layui-colla-item,
@ -1229,28 +1228,6 @@ a cite {
margin: 0 15px; margin: 0 15px;
} }
.layui-btn .layui-badge,
.layui-btn .layui-badge-dot {
margin-left: 5px;
}
.layui-nav .layui-badge,
.layui-nav .layui-badge-dot {
position: absolute;
top: 50%;
margin: -5px 6px 0;
}
.layui-nav .layui-badge {
margin-top: -10px;
}
.layui-tab-title .layui-badge,
.layui-tab-title .layui-badge-dot {
left: 5px;
top: -2px;
}
.layui-fixbar { .layui-fixbar {
position: fixed; position: fixed;
right: 15px; right: 15px;