Tag

标签

Tag

基础用法

tag 内容可以通过默认插槽的方式或者 text 属性指定

vue

<template> <div> <span>默认插槽：</span> <ap-tag>default</ap-tag> <ap-tag success>success</ap-tag> <ap-tag primary>primary</ap-tag> <ap-tag danger>danger</ap-tag> <ap-tag warning>warning</ap-tag> </div> <div style="margin-top: 20px"> <span>text属性：</span> <ap-tag text="default" /> <ap-tag success text="success" /> <ap-tag primary text="primary" /> <ap-tag danger text="danger" /> <ap-tag warning text="warning" /> </div> </template>

显示代码

带边框的 tag

使用 hollow 属性加上边框

vue

<template> <ap-tag hollow>default</ap-tag> <ap-tag hollow success>success</ap-tag> <ap-tag hollow primary>primary</ap-tag> <ap-tag hollow danger>danger</ap-tag> <ap-tag hollow warning>warning</ap-tag> </template>

显示代码

Tags

基础用法

通过 v-model 可以绑定 tags 的值，可以添加或者删除，默认是不可删除，可以通过将 closable 设置为 true 开启

vue

<template> <ap-tags v-model="defaultTags" closable /> </template> <script lang="ts" setup> import { ref } from 'vue' const defaultTags = ref([ '蒸羊羔', '蒸熊掌', '蒸鹿尾儿', '烧花鸭', '烧雏鸡', '烧子鹅', '卤猪', '卤鸭', '酱鸡', '腊肉', '松花小肚儿', ]) </script>

显示代码

组件联动

可以通过外部控制 Tags 组件内的显示内容

vue

<template> <ap-button primary @click="add" small>添加</ap-button> <ap-button :pink="!tagsDisabled" :danger="tagsDisabled" @click="tagsDisabled = !tagsDisabled" small > {{ tagsDisabled ? '启用' : '禁用' }} </ap-button> <ap-form :disabled="tagsDisabled"> <ap-tags v-model="defaultTags" closable /> </ap-form> </template> <script lang="ts" setup> import { ref } from 'vue' const defaultTags = ref([ '蒸羊羔', '蒸熊掌', '蒸鹿尾儿', '烧花鸭', '烧雏鸡', '烧子鹅', '卤猪', '卤鸭', '酱鸡', '腊肉', '松花小肚儿', ]) const tagsDisabled = ref<boolean>(false) const add = () => { const str = `${Math.random()}`.slice(2, 7).toString() defaultTags.value.unshift(str) } </script>

显示代码

Tag Props

prop	说明	类型	默认值
success	使用 success 主题	boolean	false
primary	使用 primary 主题	boolean	false
danger	使用 danger 主题	boolean	false
warning	使用 warning 主题	boolean	false
hollow	hollow 模式	boolean	false
text	内容,也可以用 slot	string	''
iconClass	图标	string	''
closable	是否可以关闭	boolean	false

Tag Slots

name	参数	说明
default	无	默认 tag 的显示

Tags Props

prop	说明	类型	默认值
modelValue	tag 值，可以是字符串数组，也可以是对象数组，type 属性为'success'|'danger'|'warning'|'primary', 以及 closeable, text, iconClass 属性	string[]|object[]	-
success	使用 success 主题	boolean	false
primary	使用 primary 主题	boolean	false
danger	使用 danger 主题	boolean	false
warning	使用 warning 主题	boolean	false
hollow	hollow 模式	boolean	false
showTag	从单个 modelValue 值获取显示的字符串	function	(str) => str
handleTag	新增 tag 时，将输入变成 tag 时的方法	function	(str) => str

Tags Events

事件名称	说明	回调参数
update:modelValue	更新 tags 列表	TagItem[]
change	tags 列表发生改变时触发	(tags: TagItem[]) => void

Tags Slots

name	参数	说明
create	无	添加 tag 元素的按钮