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

✨(component): [tag]新增 variant 属性, 优化颜色表现

Browse Source
This commit is contained in:
sight 2022-08-06 19:23:35 +08:00
parent 1086547b54
commit 3d885067eb
3 changed files with 232 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
package/component/src/component/tag/index.less
View File

@ -1,3 +1,14 @@
@tagColors: {
default: #EEE;
red: #ff5722;
orange: #ffb800;
green: #009688;
cyan: #2f4056;
blue: #1e9fff;
black: #000000;
gray: #808080;
}
@tag-size-default: 24px;
@tag-size-default-font-size: 12px;
@tag-size-lg: @tag-size-default + 2px;
@ -26,6 +37,18 @@
border-color: transparent;
border-radius: var(--global-border-radius);
&-checkable {
cursor: pointer;
}
&-checkable:hover {
opacity: 0.7;
}
&-checked {
background-color: darken(red, 10%) !important;
}
&-icon {
margin-right: 4px;
}
@ -37,8 +60,9 @@
&-disabled {
opacity: 0.4;
cursor: not-allowed;
}
& .layui-tag-close-icon {
&-disabled &-close-icon {
.layui-icon {
&:hover {
@ -47,7 +71,6 @@
}
}
}
}
&-shap {
&-square {
@ -59,8 +82,7 @@
}
}
&-ellipsis {
.layui-tag-text {
&-ellipsis &-text {
display: inline-block;
white-space: nowrap;
word-wrap: normal;
@ -68,8 +90,6 @@
text-overflow: ellipsis
}
}
&-size-lg {
height: @tag-size-lg;
font-size: @tag-size-lg-font-size;
@ -122,4 +142,47 @@
}
}
}
each(@tagColors, {
&-default {
&-color-@{key} {
color: #FFF;
background-color: @value;
border-color: transparent;
}
&-bordered-@{key} {
border-color: saturate(@value, 10%);
}
&-checked-color-@{key} {
background-color: darken(@value, 10%);
}
}
&-light {
&-color-@{key} {
color: @value;
background-color: fadeout(saturate(lighten(@value, 13%),5%),85%);
border-color: transparent;
}
&-bordered-@{key} {
border-color: fadeout(saturate(lighten(@value, 13%), 5%), 50%);
}
}
&-plain {
&-color-@{key} {
color: @value;
background-color: transparent;
border-color: @value;
}
&-bordered-@{key} {
border-color: @value;
}
}
})
}

24
package/component/src/component/tag/index.vue
View File

@ -16,16 +16,18 @@ export interface LayTagProps {
bordered?: boolean;
disabled?: boolean;
shape?: "square" | "round";
maxWidth?: number | string;
maxWidth?: string;
variant?: "default" | "light" | "plain";
}
const props = withDefaults(defineProps<LayTagProps>(), {
color: "#EEE",
size: "md",
shape: "square",
variant: "default",
});
const emit = defineEmits(["close"]);
const emit = defineEmits(["close", "check", "update:checked"]);
const isBuiltInColor = computed(
() => props.color && TAG_COLORS.includes(props.color as any)
@ -33,7 +35,6 @@ const isBuiltInColor = computed(
const isCustomColor = computed(
() => props.color && !TAG_COLORS.includes(props.color as any)
);
const visible = ref(true);
const handleClose = (e: MouseEvent) => {
@ -47,7 +48,9 @@ const classTag = computed(() => [
`layui-tag-size-${props.size}`,
`layui-tag-shap-${props.shape}`,
{
[`layui-bg-${props.color}`]: isBuiltInColor,
[`layui-tag-${props.variant}-color-${props.color}`]: isBuiltInColor.value,
[`layui-tag-${props.variant}-bordered-${props.color}`]:
isBuiltInColor.value && props.bordered,
"layui-tag-bordered": props.bordered,
"layui-tag-disabled": props.disabled,
"layui-tag-ellipsis": props.maxWidth,
@ -57,12 +60,9 @@ const classTag = computed(() => [
const styleTag = computed(() => [
isCustomColor.value ? { backgroundColor: props.color } : {},
{
"max-width": props.maxWidth ?? "unset"
"max-width": props.maxWidth ?? "unset",
},
]
);
]);
</script>
<template>
<span v-if="visible" :class="classTag" :style="styleTag">
@ -73,7 +73,11 @@ const styleTag = computed(() => [
<slot />
</span>
<slot v-else />
<span v-if="closable" class="layui-tag-close-icon" @click.stop="handleClose">
<span
v-if="closable"
class="layui-tag-close-icon"
@click.stop="handleClose"
>
<slot name="close-icon">
<lay-icon type="layui-icon-close"></lay-icon>
</slot>

56
package/document-component/src/document/zh-CN/components/tag.md
View File

@ -115,18 +115,53 @@
::: title 标签颜色
:::
::: demo 标签颜色,待优化。
::: demo 标签颜色, 非内置颜色只支持默认样式, plain 默认有边框。
<template>
<p>default:</p>
<span v-for="color in TAG_COLORS">
<lay-tag :color="color">Tag</lay-tag>
&nbsp&nbsp
</span>
<br><br>
&nbsp&nbsp&nbsp&nbsp
<span v-for="color in TAG_COLORS">
<lay-tag :color="color" bordered>Tag</lay-tag>
<lay-tag :color="color" bordered closable>Tag</lay-tag>
&nbsp&nbsp
</span>
<br><br>
<p>light:</p>
<span v-for="color in TAG_COLORS">
<lay-tag :color="color" variant="light">Tag</lay-tag>
&nbsp&nbsp
</span>
&nbsp&nbsp&nbsp&nbsp
<span v-for="color in TAG_COLORS">
<lay-tag :color="color" variant="light" bordered closable>Tag</lay-tag>
&nbsp&nbsp
</span>
<br><br>
<p>plain:</p>
<span v-for="color in TAG_COLORS">
<lay-tag :color="color" variant="plain">Tag</lay-tag>
&nbsp&nbsp
</span>
&nbsp&nbsp&nbsp&nbsp
<span v-for="color in TAG_COLORS">
<lay-tag :color="color" variant="plain" bordered closable>Tag</lay-tag>
&nbsp&nbsp
</span>
<br><br>
<p>custom:</p>
<span v-for="color in COLORS">
<lay-tag :color="color" variant="plain">Tag</lay-tag>
&nbsp&nbsp
</span>
&nbsp&nbsp&nbsp&nbsp
<span v-for="color in COLORS">
<lay-tag :color="color" variant="plain" bordered closable>Tag</lay-tag>
&nbsp&nbsp
</span>
<br><br>
</template>
<script>
@ -143,13 +178,18 @@ export default {
"blue",
"black",
"gray",
];
const COLORS = [
"#EEE",
"#5FB878",
"#FFB800",
"#67C23A",
"#0fc6c2",
"#165dff"
];
return {
TAG_COLORS
TAG_COLORS,
COLORS
}
}
}
@ -287,6 +327,10 @@ export default {
| color | 标签颜色 | string | `green`| `red` `orange` `green` `cyan` `blue` `black` `gray` `string` |
| bordered | 是否显示边框 | boolean | false | `true` `false`|
| closable | 是否可关闭 | boolean | false | `true` `false`|
| variant | 标签风格 | string | `default` | `default` `light` `plain`|
| disabled | 禁用标签 | boolean | false | `true` `false`|
| shape | 标签类型 | string | square | `square` `round`|
| maxWidth | 标签最大宽度 | string| -- | --|
:::