✨(component): [tag]新增 variant 属性, 优化颜色表现
This commit is contained in:
sight
parent
1086547b54
commit
3d885067eb
@ -1,125 +1,188 @@
|
||||
@tag-size-default: 24px;
|
||||
@tag-size-default-font-size: 12px;
|
||||
@tag-size-lg: @tag-size-default + 2px;
|
||||
@tag-size-md: @tag-size-default;
|
||||
@tag-size-sm: @tag-size-default - 2px;
|
||||
@tag-size-xs: @tag-size-default - 2px * 2;
|
||||
@tag-size-lg-font-size: @tag-size-default-font-size + 2px;
|
||||
@tag-size-md-font-size: @tag-size-default-font-size;
|
||||
@tag-size-sm-font-size: @tag-size-default-font-size - 2px;
|
||||
@tag-size-xs-font-size: @tag-size-default-font-size - 2px * 2;
|
||||
@tag-border-width: 1px;
|
||||
@tagColors: {
|
||||
default: #EEE;
|
||||
red: #ff5722;
|
||||
orange: #ffb800;
|
||||
green: #009688;
|
||||
cyan: #2f4056;
|
||||
blue: #1e9fff;
|
||||
black: #000000;
|
||||
gray: #808080;
|
||||
}
|
||||
|
||||
.layui-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
height: @tag-size-md;
|
||||
line-height: @tag-size-md - @tag-border-width * 2;
|
||||
padding: 0 6px;
|
||||
font-size: @tag-size-md-font-size;
|
||||
font-weight: 500;
|
||||
color: currentColor;
|
||||
border-width: @tag-border-width;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-radius: var(--global-border-radius);
|
||||
@tag-size-default: 24px;
|
||||
@tag-size-default-font-size: 12px;
|
||||
@tag-size-lg: @tag-size-default + 2px;
|
||||
@tag-size-md: @tag-size-default;
|
||||
@tag-size-sm: @tag-size-default - 2px;
|
||||
@tag-size-xs: @tag-size-default - 2px * 2;
|
||||
@tag-size-lg-font-size: @tag-size-default-font-size + 2px;
|
||||
@tag-size-md-font-size: @tag-size-default-font-size;
|
||||
@tag-size-sm-font-size: @tag-size-default-font-size - 2px;
|
||||
@tag-size-xs-font-size: @tag-size-default-font-size - 2px * 2;
|
||||
@tag-border-width: 1px;
|
||||
|
||||
&-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.layui-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
height: @tag-size-md;
|
||||
line-height: @tag-size-md - @tag-border-width * 2;
|
||||
padding: 0 6px;
|
||||
font-size: @tag-size-md-font-size;
|
||||
font-weight: 500;
|
||||
color: currentColor;
|
||||
border-width: @tag-border-width;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-radius: var(--global-border-radius);
|
||||
|
||||
&-bordered {
|
||||
border-color: var(--global-neutral-color-5);
|
||||
}
|
||||
&-checkable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
&-checkable:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
& .layui-tag-close-icon {
|
||||
.layui-icon {
|
||||
&-checked {
|
||||
background-color: darken(red, 10%) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: not-allowed !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
&-shap {
|
||||
&-square {
|
||||
border-radius: var(--global-border-radius);
|
||||
}
|
||||
&-bordered {
|
||||
border-color: var(--global-neutral-color-5);
|
||||
}
|
||||
|
||||
&-round {
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
&-disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&-ellipsis {
|
||||
.layui-tag-text {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis
|
||||
}
|
||||
&-disabled &-close-icon {
|
||||
.layui-icon {
|
||||
|
||||
}
|
||||
&:hover {
|
||||
cursor: not-allowed !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-size-lg {
|
||||
height: @tag-size-lg;
|
||||
font-size: @tag-size-lg-font-size;
|
||||
line-height: @tag-size-lg - @tag-border-width * 2;
|
||||
&-shap {
|
||||
&-square {
|
||||
border-radius: var(--global-border-radius);
|
||||
}
|
||||
|
||||
.layui-icon {
|
||||
font-size: @tag-size-lg-font-size - 2px;
|
||||
}
|
||||
}
|
||||
&-round {
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-size-md {
|
||||
height: @tag-size-md;
|
||||
font-size: @tag-size-md-font-size;
|
||||
line-height: @tag-size-md - @tag-border-width * 2;
|
||||
&-ellipsis &-text {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis
|
||||
}
|
||||
|
||||
.layui-icon {
|
||||
font-size: @tag-size-md-font-size - 2px;
|
||||
}
|
||||
}
|
||||
&-size-lg {
|
||||
height: @tag-size-lg;
|
||||
font-size: @tag-size-lg-font-size;
|
||||
line-height: @tag-size-lg - @tag-border-width * 2;
|
||||
|
||||
&-size-sm {
|
||||
height: @tag-size-sm;
|
||||
font-size: @tag-size-sm-font-size;
|
||||
line-height: @tag-size-sm - @tag-border-width * 2;
|
||||
.layui-icon {
|
||||
font-size: @tag-size-lg-font-size - 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-icon {
|
||||
font-size: @tag-size-sm-font-size - 2px;
|
||||
}
|
||||
}
|
||||
&-size-md {
|
||||
height: @tag-size-md;
|
||||
font-size: @tag-size-md-font-size;
|
||||
line-height: @tag-size-md - @tag-border-width * 2;
|
||||
|
||||
&-size-xs {
|
||||
height: @tag-size-xs;
|
||||
font-size: @tag-size-xs-font-size;
|
||||
line-height: @tag-size-xs - @tag-border-width * 2;
|
||||
.layui-icon {
|
||||
font-size: @tag-size-md-font-size - 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-icon {
|
||||
font-size: @tag-size-xs-font-size - 2px;
|
||||
}
|
||||
}
|
||||
&-size-sm {
|
||||
height: @tag-size-sm;
|
||||
font-size: @tag-size-sm-font-size;
|
||||
line-height: @tag-size-sm - @tag-border-width * 2;
|
||||
|
||||
& &-close-icon {
|
||||
margin-left: 4px;
|
||||
font-size: @tag-size-default-font-size - 2px;
|
||||
.layui-icon {
|
||||
font-size: @tag-size-sm-font-size - 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-icon {
|
||||
&-size-xs {
|
||||
height: @tag-size-xs;
|
||||
font-size: @tag-size-xs-font-size;
|
||||
line-height: @tag-size-xs - @tag-border-width * 2;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.layui-icon {
|
||||
font-size: @tag-size-xs-font-size - 2px;
|
||||
}
|
||||
}
|
||||
|
||||
& &-close-icon {
|
||||
margin-left: 4px;
|
||||
font-size: @tag-size-default-font-size - 2px;
|
||||
|
||||
.layui-icon {
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
  
|
||||
</span>
|
||||
<br><br>
|
||||
    
|
||||
<span v-for="color in TAG_COLORS">
|
||||
<lay-tag :color="color" bordered>Tag</lay-tag>
|
||||
<lay-tag :color="color" bordered closable>Tag</lay-tag>
|
||||
  
|
||||
</span>
|
||||
<br><br>
|
||||
<p>light:</p>
|
||||
<span v-for="color in TAG_COLORS">
|
||||
<lay-tag :color="color" variant="light">Tag</lay-tag>
|
||||
  
|
||||
</span>
|
||||
    
|
||||
<span v-for="color in TAG_COLORS">
|
||||
<lay-tag :color="color" variant="light" bordered closable>Tag</lay-tag>
|
||||
  
|
||||
</span>
|
||||
<br><br>
|
||||
<p>plain:</p>
|
||||
<span v-for="color in TAG_COLORS">
|
||||
<lay-tag :color="color" variant="plain">Tag</lay-tag>
|
||||
  
|
||||
</span>
|
||||
    
|
||||
<span v-for="color in TAG_COLORS">
|
||||
<lay-tag :color="color" variant="plain" bordered closable>Tag</lay-tag>
|
||||
  
|
||||
</span>
|
||||
<br><br>
|
||||
<p>custom:</p>
|
||||
<span v-for="color in COLORS">
|
||||
<lay-tag :color="color" variant="plain">Tag</lay-tag>
|
||||
  
|
||||
</span>
|
||||
    
|
||||
<span v-for="color in COLORS">
|
||||
<lay-tag :color="color" variant="plain" bordered closable>Tag</lay-tag>
|
||||
  
|
||||
</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
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -286,7 +326,11 @@ export default {
|
||||
| size | 标签大小 | string | md | `lg` `md` `sm` `xs`|
|
||||
| color | 标签颜色 | string | `green`| `red` `orange` `green` `cyan` `blue` `black` `gray` `string` |
|
||||
| bordered | 是否显示边框 | boolean | false | `true` `false`|
|
||||
| closable | 是否可关闭 | 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| -- | --|
|
||||
|
||||
:::
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user