✨(component): 调整 tag 样式, 简化文档 demo
This commit is contained in:
就眠儀式
parent
1b094d3a04
commit
8b6f727950
@ -7,7 +7,7 @@
|
||||
|
||||
@tagSizes: lg, md, sm, xs;
|
||||
|
||||
@tag-size-default: 28px;
|
||||
@tag-size-default: 26px;
|
||||
@tag-size-default-font-size: 14px;
|
||||
@tag-size-lg: @tag-size-default + 4px;
|
||||
@tag-size-md: @tag-size-default;
|
||||
@ -20,8 +20,8 @@
|
||||
@tag-border-width: 1px;
|
||||
|
||||
.layui-tag {
|
||||
--layui-tag-bg-color: #FFF;
|
||||
--layui-tag-border-color: var(--global-neutral-color-5);
|
||||
--layui-tag-bg-color: #fafafa;
|
||||
--layui-tag-border-color: #f0f0f0;
|
||||
--layui-tag-hover-color: #FFF;
|
||||
--layui-tag-text-color: currentColor;
|
||||
display: inline-flex;
|
||||
@ -81,7 +81,6 @@
|
||||
text-overflow: ellipsis
|
||||
}
|
||||
|
||||
|
||||
& &-close-icon {
|
||||
margin-left: 4px;
|
||||
font-size: @tag-size-default-font-size;
|
||||
|
||||
@ -4,72 +4,58 @@
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 标签组件
|
||||
::: describe 进行标记和分类的小标签, 用于标记事物的属性与纬度。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 标签的基本用法
|
||||
::: demo 使用 `lay-tag` 标签, 创建标签组件。
|
||||
|
||||
<template>
|
||||
<lay-space size="md">
|
||||
<lay-space size="md">
|
||||
<lay-tag>标签</lay-tag>
|
||||
<lay-tag closable>标签</lay-tag>
|
||||
<lay-tag closable disabled>标签</lay-tag>
|
||||
<lay-tag closable max-width="120px" title="超过设置长度省略文本">超过设置长度省略文本</lay-tag>
|
||||
</lay-space>
|
||||
<lay-tag v-for="type in TAG_TYPES" :type="type">标签</lay-tag>
|
||||
</lay-space>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
const TAG_TYPES = [
|
||||
"primary",
|
||||
"normal",
|
||||
"warm",
|
||||
"danger",
|
||||
];
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 标签尺寸
|
||||
::: title 图标插槽
|
||||
:::
|
||||
|
||||
::: demo 通过 size 属性控制标签尺寸
|
||||
::: demo 通过 icon 插槽自定义 tag 前置图标。
|
||||
|
||||
<template>
|
||||
<lay-space direction="vertical" size="md">
|
||||
<lay-space size="md">
|
||||
lg:
|
||||
<lay-tag size="lg">标签</lay-tag>
|
||||
<lay-tag size="lg"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
|
||||
<lay-tag size="lg" closable>
|
||||
<template #icon><lay-icon type="layui-icon-addition" /></template>
|
||||
标签
|
||||
<lay-tag>
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-vercode" />
|
||||
</template>
|
||||
tag
|
||||
</lay-tag>
|
||||
</lay-space>
|
||||
<lay-space size="md">
|
||||
md:
|
||||
<lay-tag size="md">标签</lay-tag>
|
||||
<lay-tag size="md"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
|
||||
<lay-tag size="md" closable>
|
||||
<template #icon><lay-icon type="layui-icon-addition" /></template>
|
||||
标签
|
||||
<lay-tag>
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-login-qq" />
|
||||
</template>
|
||||
tag
|
||||
</lay-tag>
|
||||
</lay-space>
|
||||
<lay-space size="md">
|
||||
sm:
|
||||
<lay-tag size="sm">标签</lay-tag>
|
||||
<lay-tag size="sm"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
|
||||
<lay-tag size="sm" closable>
|
||||
<template #icon><lay-icon type="layui-icon-addition" /></template>
|
||||
标签
|
||||
<lay-tag>
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-star-fill" />
|
||||
</template>
|
||||
tag
|
||||
</lay-tag>
|
||||
</lay-space>
|
||||
<lay-space size="md">
|
||||
xs:
|
||||
<lay-tag size="xs">标签</lay-tag>
|
||||
<lay-tag size="xs"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
|
||||
<lay-tag size="xs" closable>
|
||||
<template #icon><lay-icon type="layui-icon-addition" /></template>
|
||||
标签
|
||||
</lay-tag>
|
||||
</lay-space>
|
||||
</lay-space>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -87,21 +73,19 @@
|
||||
|
||||
:::
|
||||
|
||||
::: title 可关闭
|
||||
::: title 允许关闭
|
||||
:::
|
||||
|
||||
::: demo 通过 closable 属性控制标签是否可关闭
|
||||
::: demo 通过 closable 属性开启关闭按钮, 使用 close-icon 插槽定义关闭图标。
|
||||
|
||||
<template>
|
||||
<lay-space size="md">
|
||||
<lay-tag closable>Tag</lay-tag>
|
||||
<lay-tag closable>
|
||||
<template #icon><lay-icon type="layui-icon-addition" /></template>
|
||||
Tag 2
|
||||
</lay-tag>
|
||||
<lay-tag closable>
|
||||
<template #icon><lay-icon type="layui-icon-addition" /></template>
|
||||
自定义关闭图标
|
||||
custom close icon
|
||||
<template #close-icon><lay-icon type="layui-icon-close-fill" /></template>
|
||||
</lay-tag>
|
||||
</lay-space>
|
||||
@ -122,40 +106,15 @@
|
||||
|
||||
:::
|
||||
|
||||
::: title 标签颜色
|
||||
::: title 指定颜色
|
||||
:::
|
||||
|
||||
::: demo 标签颜色, 通过 color 属性自定义颜色
|
||||
|
||||
<template>
|
||||
<lay-space direction="vertical" size="md">
|
||||
dark:
|
||||
<lay-space size="md">
|
||||
<lay-tag v-for="type in TAG_TYPES" :type="type">标签</lay-tag>
|
||||
<lay-tag v-for="type in TAG_TYPES" :type="type" :bordered="false" closable>标签</lay-tag>
|
||||
</lay-space>
|
||||
light:
|
||||
<lay-space size="md">
|
||||
<lay-tag v-for="type in TAG_TYPES" :type="type" variant="light">标签</lay-tag>
|
||||
<lay-tag v-for="type in TAG_TYPES" :type="type" variant="light" :bordered="false" closable>标签</lay-tag>
|
||||
</lay-space>
|
||||
plain:
|
||||
<lay-space size="md">
|
||||
<lay-tag v-for="type in TAG_TYPES" :type="type" variant="plain">标签</lay-tag>
|
||||
<lay-tag v-for="type in TAG_TYPES" :type="type" variant="plain" :bordered="false" closable>标签</lay-tag>
|
||||
</lay-space>
|
||||
custom:
|
||||
<lay-space size="md">
|
||||
<lay-tag v-for="color in COLORS" :color="color" variant="dark">标签</lay-tag>
|
||||
<lay-tag v-for="color in COLORS" :color="color" variant="dark" :bordered="false" closable>标签</lay-tag>
|
||||
</lay-space>
|
||||
<lay-space size="md">
|
||||
<lay-tag v-for="color in COLORS" :color="color" variant="light">标签</lay-tag>
|
||||
<lay-tag v-for="color in COLORS" :color="color" variant="light" :bordered="false" closable>标签</lay-tag>
|
||||
</lay-space>
|
||||
<lay-space size="md">
|
||||
<lay-tag v-for="color in COLORS" :color="color" variant="plain">标签</lay-tag>
|
||||
<lay-tag v-for="color in COLORS" :color="color" variant="plain" :bordered="false" closable>标签</lay-tag>
|
||||
</lay-space>
|
||||
</lay-space>
|
||||
</template>
|
||||
@ -166,22 +125,12 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const TAG_TYPES = [
|
||||
"primary",
|
||||
"normal",
|
||||
"warm",
|
||||
"danger",
|
||||
];
|
||||
|
||||
const COLORS = [
|
||||
"#86909c",
|
||||
"#9FDB1D",
|
||||
"#14C9C9",
|
||||
const COLORS = [
|
||||
"#165DFF",
|
||||
"#722ED1",
|
||||
"#D91AD9",
|
||||
"#F5319D",
|
||||
];
|
||||
];
|
||||
|
||||
return {
|
||||
TAG_COLORS,
|
||||
@ -206,62 +155,16 @@ const COLORS = [
|
||||
|
||||
:::
|
||||
|
||||
::: title 图标插槽
|
||||
:::
|
||||
|
||||
::: demo 通过插槽自定义图标
|
||||
|
||||
<template>
|
||||
<lay-space size="md">
|
||||
<lay-tag size="lg">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-vercode" />
|
||||
</template>
|
||||
tag
|
||||
</lay-tag>
|
||||
<lay-tag size="lg">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-login-qq" />
|
||||
</template>
|
||||
tag
|
||||
</lay-tag>
|
||||
<lay-tag size="lg">
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-star-fill" />
|
||||
</template>
|
||||
tag
|
||||
</lay-tag>
|
||||
</lay-space>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
<style>
|
||||
.tag-demo {
|
||||
width: 500px;
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.tag-demo .layui-tag{
|
||||
margin-right: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: title 动态编辑
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 配合自定义逻辑, 实现标签的动态编辑
|
||||
|
||||
<template>
|
||||
{{ tagData }}
|
||||
<br><br>
|
||||
<template v-for="(tag, index) of tagData" :key="`tag-${index}`">
|
||||
<lay-tag
|
||||
closable
|
||||
@close="handleClose(index)"
|
||||
color="#EEE"
|
||||
style="margin-right: 5px;"
|
||||
>
|
||||
{{tag}}
|
||||
@ -278,7 +181,6 @@ const COLORS = [
|
||||
@blur="handleAdd" />
|
||||
<lay-tag
|
||||
v-else
|
||||
color="#EEE"
|
||||
>
|
||||
<template #icon>
|
||||
<lay-icon type="layui-icon-addition"/>
|
||||
@ -293,7 +195,7 @@ import { ref, nextTick } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const tagData = ref(['Tag']);
|
||||
const tagData = ref(['Tag', 'Selected', 'Tags']);
|
||||
const inputRef = ref(null);
|
||||
const showInput = ref(false);
|
||||
const inputVal = ref('');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user