Tag 标签
代码演示
标签一 标签二 标签三 标签四 标签五
基础用法
Tag标签的基础用法, 提供两种基础样式: 带边框与不带边框。
查看代码 < />
<template>
<w-tag>标签一</w-tag>
<w-tag type="success">标签二</w-tag>
<w-tag type="info">标签三</w-tag>
<w-tag type="warning">标签四</w-tag>
<w-tag type="error">标签五</w-tag>
<br />
<w-tag :border="false">标签一</w-tag>
<w-tag type="success" :border="false">标签二</w-tag>
<w-tag type="info" :border="false">标签三</w-tag>
<w-tag type="warning" :border="false">标签四</w-tag>
<w-tag type="error" :border="false">标签五</w-tag>
</template>可移除标签
为组件添加 closable 属性即可激活tag的删除按钮。
查看代码 < />
<template>
<w-tag v-for="(tag, index) in tags" :key="index"
:closable="tag.closable"
:type="tag.type" @close="handleClose(index)">{{tag.name}}</w-tag>
</template>
<script>
export default {
data () {
return {
tags: [{
closable: true,
type: '',
name: '标签一'
}, {
closable: true,
type: 'success',
name: '标签二'
}, {
closable: true,
type: 'info',
name: '标签三'
}, {
closable: true,
type: 'warning',
name: '标签四'
}, {
closable: true,
type: 'error',
name: '标签五'
}]
}
},
methods: {
handleClose (index) {
this.tags.splice(index, 1)
}
}
}
</script>
尺寸选择
组件提供了不同尺寸 (large / medium / small / mini / super-mini) 以供选择。
查看代码 < />
<template>
<w-tag size="large">常规标签</w-tag>
<w-tag size="medium">中号标签</w-tag>
<w-tag size="small">小号标签</w-tag>
<w-tag size="mini">迷你标签</w-tag>
<w-tag size="super-mini">超级迷你</w-tag>
</template>API
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| closable | 是否可关闭 | Boolean | — | false | |
| border | 是否描边 | Boolean | — | true | |
| disable-transitions | 是否开启 tag 过渡动画 | Boolean | — | true | v1.6.5 |
| size | 大小 | String | large / medium / small / mini / super-mini | normal | |
| type | 类型 | String | primary / success / info / warning / error | primary |
Events
| 参数 | 说明 | 回调参数 | Version |
|---|---|---|---|
| close | 关闭tag时触发的事件 | — |
贡献者
| 类型 | 参与者 |
|---|---|
| 设计者 | UED视觉组 |
| 维护者 | UED前端组 |