Tag 标签

介绍

用于标记关键词和概括主要内容。

标签类型

通过 type 属性设置标签类型，支持 default、info、primary、success、warning、danger 六种类型，默认类型为 default。

<vd-tag text="默认标签" type="default" />
<vd-tag text="信息标签" type="info" />
<vd-tag text="主要标签" type="primary" />
<vd-tag text="成功标签" type="success" />
<vd-tag text="警告标签" type="warning" />
<vd-tag text="危险标签" type="danger" />

朴素标签

通过 plain 属性将标签设置为朴素标签。

<vd-tag text="标签" type="primary" plain />

圆角标签

通过 round 属性将标签设置为圆角标签。

<vd-tag text="标签" type="primary" plain round />

可关闭标签

通过 closeable 属性将标签设置为可关闭标签。

<vd-tag
  :show="show"
  text="标签"
  type="primary"
  closeable
  @click-close="handleCloseTag"
/>

const show = ref(true);

function handleCloseTag() {
  show.value = false;
}

标签列表

通过 tag-list 组件配置展示多个标签，通过 max 属性配置最大展示个数，超过后展示折叠数 +n 个。

<vd-tag-list
  v-model="tags"
  :closeable="true"
  :max="4"
/>

const tags = ref([
  { label: '标签1', value: '1' },
  { label: '标签2', value: '2' },
  { label: '标签3', value: '3' },
  { label: '标签4', value: '4' },
  { label: '标签5', value: '5' },
]);

搭配单元格使用

展示搭配单元格 Cell 组件时的展示示例。

<vd-cell-group :center="true">
  <vd-cell title="标题1" is-link><vd-tag text="标签" type="primary" /></vd-cell>
  <vd-cell title="标题2" is-link><vd-tag text="标签" type="success" /></vd-cell>
</vd-cell-group>

API

Tag Props

参数	说明	类型	默认值
show	标签是否展示	boolean	-
text	文本内容	string	-
type	标签类型	TagType	'default'
plain	是否朴素标签	boolean	false
round	是否圆角样式	boolean	false
closeable	是否允许关闭	boolean	false
transition	动画名称，同 transition 组件动画名	string	'zoom-in'
transition-duration	动画时长	number	300
transition-immediate	初始化时如为展示状态，是否触发动画	boolean	true

TagList Props

参数	说明	类型	默认值
v-model	标签组	TagListOption[]	-
max	最大展示个数	number	-
type	标签类型	TagType	'primary'
plain	是否朴素标签	boolean	false
round	是否圆角样式	boolean	false
closeable	是否允许关闭	boolean	false
collapse-type	折叠标签展示类型	TagType	'primary'

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Tag Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
open	标签显示时触发	-
opened	标签显示动画结束时触发	-
close	标签关闭时触发	-
closed	标签关闭动画结束时触发	-

TagList Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
click-close	点击关闭时触发	TagListOnClickCloseEvent

Tag Slots

名称	说明
default	自定义内容
close	关闭按钮

TagList Slots

名称	说明
item	自定义标签内容