Tu View PlusTag 标签
用于标记和选择。
基础用法
输入框的基本用法。
标签 标签
<template>
<tu-tag>标签</tu-tag>
<tu-tag>
<template #icon><Search /></template>
标签
</tu-tag>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
</script><template>
<tu-tag>标签</tu-tag>
<tu-tag>
<template #icon><Search /></template>
标签
</tu-tag>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
</script>可移除标签
设置 closable 属性可以定义一个标签是否可移除。 接受一个 Boolean。 默认的标签移除时会附带渐变动画。 如果不想使用，可以设置 disable-transitions 属性，接受一个 Boolean，true 为关闭。 当 Tag 被移除时会触发 close 事件。
标签 标签
<template>
<tu-tag closable>标签</tu-tag>
<tu-tag closable>
<template #icon><Search /></template>
标签
</tu-tag>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
</script><template>
<tu-tag closable>标签</tu-tag>
<tu-tag closable>
<template #icon><Search /></template>
标签
</tu-tag>
</template>
<script lang="ts" setup>
import { Search } from '@tu-view-plus/icons-vue';
</script>动态编辑标签
动态编辑标签可以通过点击标签关闭按钮后触发的 close 事件来实现。
标签 1标签 2标签 3
<template>
<tu-tag
v-for="tag in dynamicTags"
closable
:key="tag"
@close="handleClose(tag)"
>
{{ tag }}
</tu-tag>
<tu-input
v-if="inputVisible"
ref="InputRef"
v-model="inputValue"
class="deme-tag-input"
size="mini"
@keyup.enter="handleInputConfirm"
@blur="handleInputConfirm"
/>
<tu-button v-else class="demo-tag-new" size="mini" @click="handleInputShow">
+ 新标签
</tu-button>
</template>
<script lang="ts" setup>
import { nextTick, ref } from 'vue';
import { TuInput } from 'tu-view-plus';
const inputValue = ref('');
const dynamicTags = ref(['标签 1', '标签 2', '标签 3']);
const inputVisible = ref(false);
const InputRef = ref<InstanceType<typeof TuInput>>();
const handleClose = (tag: string) => {
dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
};
const handleInputShow = () => {
inputVisible.value = true;
nextTick(() => {
InputRef.value!.input!.focus();
});
};
const handleInputConfirm = () => {
if (inputValue.value) {
dynamicTags.value.push(inputValue.value);
}
inputVisible.value = false;
inputValue.value = '';
};
</script>
<style scoped>
.deme-tag-input {
width: 74px;
margin-left: 8px;
}
.demo-tag-new {
margin-left: 8px;
}
</style><template>
<tu-tag
v-for="tag in dynamicTags"
closable
:key="tag"
@close="handleClose(tag)"
>
{{ tag }}
</tu-tag>
<tu-input
v-if="inputVisible"
ref="InputRef"
v-model="inputValue"
class="deme-tag-input"
size="mini"
@keyup.enter="handleInputConfirm"
@blur="handleInputConfirm"
/>
<tu-button v-else class="demo-tag-new" size="mini" @click="handleInputShow">
+ 新标签
</tu-button>
</template>
<script lang="ts" setup>
import { nextTick, ref } from 'vue';
import { TuInput } from 'tu-view-plus';
const inputValue = ref('');
const dynamicTags = ref(['标签 1', '标签 2', '标签 3']);
const inputVisible = ref(false);
const InputRef = ref<InstanceType<typeof TuInput>>();
const handleClose = (tag: string) => {
dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
};
const handleInputShow = () => {
inputVisible.value = true;
nextTick(() => {
InputRef.value!.input!.focus();
});
};
const handleInputConfirm = () => {
if (inputValue.value) {
dynamicTags.value.push(inputValue.value);
}
inputVisible.value = false;
inputValue.value = '';
};
</script>
<style scoped>
.deme-tag-input {
width: 74px;
margin-left: 8px;
}
.demo-tag-new {
margin-left: 8px;
}
</style>颜色
可以通过 color 属性来自定义标签颜色。
默认绿色蓝色红色橙色
<template>
<tu-tag>默认</tu-tag>
<tu-tag color="#50d4ab">绿色</tu-tag>
<tu-tag color="#5e7ce0">蓝色</tu-tag>
<tu-tag color="#f66f6a">红色</tu-tag>
<tu-tag color="#fa9841">橙色</tu-tag>
</template><template>
<tu-tag>默认</tu-tag>
<tu-tag color="#50d4ab">绿色</tu-tag>
<tu-tag color="#5e7ce0">蓝色</tu-tag>
<tu-tag color="#f66f6a">红色</tu-tag>
<tu-tag color="#fa9841">橙色</tu-tag>
</template>主题
Tag 组件提供了五个不同的主题：outset、inset、dark、light、plain。通过设置 effect 属性来改变主题，默认为 outset。
上方阴影
默认绿色蓝色红色橙色
下方阴影
默认绿色蓝色红色橙色
Light
默认绿色蓝色红色橙色
Dark
默认绿色蓝色红色橙色
Plain
默认绿色蓝色红色橙色
<template>
<p>上方阴影</p>
<tu-row>
<tu-tag>默认</tu-tag>
<tu-tag color="#50d4ab">绿色</tu-tag>
<tu-tag color="#5e7ce0">蓝色</tu-tag>
<tu-tag color="#f66f6a">红色</tu-tag>
<tu-tag color="#fa9841">橙色</tu-tag>
</tu-row>
<p>下方阴影</p>
<tu-row>
<tu-tag effect="inset">默认</tu-tag>
<tu-tag effect="inset" color="#50d4ab">绿色</tu-tag>
<tu-tag effect="inset" color="#5e7ce0">蓝色</tu-tag>
<tu-tag effect="inset" color="#f66f6a">红色</tu-tag>
<tu-tag effect="inset" color="#fa9841">橙色</tu-tag>
</tu-row>
<p>Light</p>
<tu-row>
<tu-tag effect="light">默认</tu-tag>
<tu-tag effect="light" color="#50d4ab">绿色</tu-tag>
<tu-tag effect="light" color="#5e7ce0">蓝色</tu-tag>
<tu-tag effect="light" color="#f66f6a">红色</tu-tag>
<tu-tag effect="light" color="#fa9841">橙色</tu-tag>
</tu-row>
<p>Dark</p>
<tu-row>
<tu-tag effect="dark">默认</tu-tag>
<tu-tag effect="dark" color="#50d4ab">绿色</tu-tag>
<tu-tag effect="dark" color="#5e7ce0">蓝色</tu-tag>
<tu-tag effect="dark" color="#f66f6a">红色</tu-tag>
<tu-tag effect="dark" color="#fa9841">橙色</tu-tag>
</tu-row>
<p>Plain</p>
<tu-row>
<tu-tag effect="plain">默认</tu-tag>
<tu-tag effect="plain" color="#50d4ab">绿色</tu-tag>
<tu-tag effect="plain" color="#5e7ce0">蓝色</tu-tag>
<tu-tag effect="plain" color="#f66f6a">红色</tu-tag>
<tu-tag effect="plain" color="#fa9841">橙色</tu-tag>
</tu-row>
</template><template>
<p>上方阴影</p>
<tu-row>
<tu-tag>默认</tu-tag>
<tu-tag color="#50d4ab">绿色</tu-tag>
<tu-tag color="#5e7ce0">蓝色</tu-tag>
<tu-tag color="#f66f6a">红色</tu-tag>
<tu-tag color="#fa9841">橙色</tu-tag>
</tu-row>
<p>下方阴影</p>
<tu-row>
<tu-tag effect="inset">默认</tu-tag>
<tu-tag effect="inset" color="#50d4ab">绿色</tu-tag>
<tu-tag effect="inset" color="#5e7ce0">蓝色</tu-tag>
<tu-tag effect="inset" color="#f66f6a">红色</tu-tag>
<tu-tag effect="inset" color="#fa9841">橙色</tu-tag>
</tu-row>
<p>Light</p>
<tu-row>
<tu-tag effect="light">默认</tu-tag>
<tu-tag effect="light" color="#50d4ab">绿色</tu-tag>
<tu-tag effect="light" color="#5e7ce0">蓝色</tu-tag>
<tu-tag effect="light" color="#f66f6a">红色</tu-tag>
<tu-tag effect="light" color="#fa9841">橙色</tu-tag>
</tu-row>
<p>Dark</p>
<tu-row>
<tu-tag effect="dark">默认</tu-tag>
<tu-tag effect="dark" color="#50d4ab">绿色</tu-tag>
<tu-tag effect="dark" color="#5e7ce0">蓝色</tu-tag>
<tu-tag effect="dark" color="#f66f6a">红色</tu-tag>
<tu-tag effect="dark" color="#fa9841">橙色</tu-tag>
</tu-row>
<p>Plain</p>
<tu-row>
<tu-tag effect="plain">默认</tu-tag>
<tu-tag effect="plain" color="#50d4ab">绿色</tu-tag>
<tu-tag effect="plain" color="#5e7ce0">蓝色</tu-tag>
<tu-tag effect="plain" color="#f66f6a">红色</tu-tag>
<tu-tag effect="plain" color="#fa9841">橙色</tu-tag>
</tu-row>
</template>圆形标签
Tag 可以像按钮组件一样变为完全圆形。
默认绿色蓝色红色橙色
默认绿色蓝色红色橙色
默认绿色蓝色红色橙色
默认绿色蓝色红色橙色
默认绿色蓝色红色橙色
<template>
<tu-row class="mb-2">
<tu-tag round>默认</tu-tag>
<tu-tag round color="#50d4ab">绿色</tu-tag>
<tu-tag round color="#5e7ce0">蓝色</tu-tag>
<tu-tag round color="#f66f6a">红色</tu-tag>
<tu-tag round color="#fa9841">橙色</tu-tag>
</tu-row>
<tu-row class="mb-2">
<tu-tag round effect="inset">默认</tu-tag>
<tu-tag round effect="inset" color="#50d4ab">绿色</tu-tag>
<tu-tag round effect="inset" color="#5e7ce0">蓝色</tu-tag>
<tu-tag round effect="inset" color="#f66f6a">红色</tu-tag>
<tu-tag round effect="inset" color="#fa9841">橙色</tu-tag>
</tu-row>
<tu-row class="mb-2">
<tu-tag round effect="light">默认</tu-tag>
<tu-tag round effect="light" color="#50d4ab">绿色</tu-tag>
<tu-tag round effect="light" color="#5e7ce0">蓝色</tu-tag>
<tu-tag round effect="light" color="#f66f6a">红色</tu-tag>
<tu-tag round effect="light" color="#fa9841">橙色</tu-tag>
</tu-row>
<tu-row class="mb-2">
<tu-tag round effect="dark">默认</tu-tag>
<tu-tag round effect="dark" color="#50d4ab">绿色</tu-tag>
<tu-tag round effect="dark" color="#5e7ce0">蓝色</tu-tag>
<tu-tag round effect="dark" color="#f66f6a">红色</tu-tag>
<tu-tag round effect="dark" color="#fa9841">橙色</tu-tag>
</tu-row>
<tu-row class="mb-2">
<tu-tag round effect="plain">默认</tu-tag>
<tu-tag round effect="plain" color="#50d4ab">绿色</tu-tag>
<tu-tag round effect="plain" color="#5e7ce0">蓝色</tu-tag>
<tu-tag round effect="plain" color="#f66f6a">红色</tu-tag>
<tu-tag round effect="plain" color="#fa9841">橙色</tu-tag>
</tu-row>
</template><template>
<tu-row class="mb-2">
<tu-tag round>默认</tu-tag>
<tu-tag round color="#50d4ab">绿色</tu-tag>
<tu-tag round color="#5e7ce0">蓝色</tu-tag>
<tu-tag round color="#f66f6a">红色</tu-tag>
<tu-tag round color="#fa9841">橙色</tu-tag>
</tu-row>
<tu-row class="mb-2">
<tu-tag round effect="inset">默认</tu-tag>
<tu-tag round effect="inset" color="#50d4ab">绿色</tu-tag>
<tu-tag round effect="inset" color="#5e7ce0">蓝色</tu-tag>
<tu-tag round effect="inset" color="#f66f6a">红色</tu-tag>
<tu-tag round effect="inset" color="#fa9841">橙色</tu-tag>
</tu-row>
<tu-row class="mb-2">
<tu-tag round effect="light">默认</tu-tag>
<tu-tag round effect="light" color="#50d4ab">绿色</tu-tag>
<tu-tag round effect="light" color="#5e7ce0">蓝色</tu-tag>
<tu-tag round effect="light" color="#f66f6a">红色</tu-tag>
<tu-tag round effect="light" color="#fa9841">橙色</tu-tag>
</tu-row>
<tu-row class="mb-2">
<tu-tag round effect="dark">默认</tu-tag>
<tu-tag round effect="dark" color="#50d4ab">绿色</tu-tag>
<tu-tag round effect="dark" color="#5e7ce0">蓝色</tu-tag>
<tu-tag round effect="dark" color="#f66f6a">红色</tu-tag>
<tu-tag round effect="dark" color="#fa9841">橙色</tu-tag>
</tu-row>
<tu-row class="mb-2">
<tu-tag round effect="plain">默认</tu-tag>
<tu-tag round effect="plain" color="#50d4ab">绿色</tu-tag>
<tu-tag round effect="plain" color="#5e7ce0">蓝色</tu-tag>
<tu-tag round effect="plain" color="#f66f6a">红色</tu-tag>
<tu-tag round effect="plain" color="#fa9841">橙色</tu-tag>
</tu-row>
</template>不同尺寸
tu-tag 组件提供除了默认值 medium 以外的三种尺寸。
超小标签小型标签默认标签大型标签
额外的尺寸：large、small、mini，通过设置 size 属性来配置它们。
<template>
<tu-row class="demo-tag-row">
<tu-tag size="mini">超小标签</tu-tag>
<tu-tag size="small">小型标签</tu-tag>
<tu-tag>默认标签</tu-tag>
<tu-tag size="large">大型标签</tu-tag>
</tu-row>
</template>
<style>
.demo-tag-row {
align-items: baseline;
}
</style><template>
<tu-row class="demo-tag-row">
<tu-tag size="mini">超小标签</tu-tag>
<tu-tag size="small">小型标签</tu-tag>
<tu-tag>默认标签</tu-tag>
<tu-tag size="large">大型标签</tu-tag>
</tu-row>
</template>
<style>
.demo-tag-row {
align-items: baseline;
}
</style>Tag API
Tag Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| closable | 是否可关闭 | Boolean | false |
| effect | 标签的主题 | String | outset |
| round | 标签是否为圆形 | Boolean | false |
| color | 标签的颜色 | String | - |
| disable-transitions | 是否禁用渐变动画 | Boolean | false |
| hit | 是否命中字体加粗 | Boolean | false |
| size | 标签的尺寸 | String | medium |
Tag Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| click | 点击 Tag 时触发的事件 | Function |
| close | 关闭 Tag 时触发的事件 | Function |
Tag Slots
| 参数名 | 描述 |
|---|---|
| - | 自定义默认内容 |