Tag 标签 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

进行标记和分类的小标签，用于标记事物的属性和维度，以及进行分类。

规则

标签文字必须显示完全。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import {Tag} from '@21cnfe/vui'  
Vue.component('Tag', Tag)

代码演示

Tag 标签 tags

基本用法可实现类似 Checkbox 的效果，点击切换选中效果，设置 selected 属性选中

<Tag>basic</Tag>
<Tag selected>basic</Tag>

不可用状态设置 disabled 属性切换至不可用状态

<Tag disabled>disabled</Tag>

可关闭设置 closable 属性成为可关闭标签并拥有关闭回调方法 onClose

<template>
  <Tag closable @onClose="handleClose">closable</Tag>
</template>
<script>
export default {
  methods: {
    handleClose () {
      console.log('close callback')
    }
  }
}
</script>

小尺寸标签设置 samll 属性成为小尺寸标签，只用于内容展示，为只读状态，无交互

<Tag small>small</Tag>

API

属性	说明	类型	默认值
`small`	小号标签	Boolean	`false`
`disable`	是否不可用	Boolean	`false`
`closable`	是否可关闭	Boolean	`false`
`selected`	是否默认选中	Boolean	`false`
`type`	状态类型，包括 `primary`、`success` `warning` `danger`，可选	String	`''`
`round`	圆形样式，可选	Boolean	`false`
`mark`	标签类样式	Boolean	`false`

Events

事件名称	说明	回调参数
`onClose`	点关闭时的回调函数	`--`
`onChange`	切换选中回调函数	`--`
`afterClose`	关闭后的回调	`selected`

1. Tag 标签 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

Tag 标签 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

规则

引入方式

代码演示

API

Events

Tag 标签 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用