tag
标签组件,默认情况下使用dict-tag使用, 如果字典包配置中有配置componentsPreFix字段,请根据此字段的具体配置值进行前缀修改,如配置了componentsPreFix为Bu, 则使用bu-tag使用。
复制成功


属性、事件和插槽继承技巧
此组件仅引用了van-tag一个组件,可直接继承原生属性、事件和插槽
组件结构
组件封装结构如下
vue
<van-tag ref="VanTagRef"></van-tag>js
const VanTagRef = ref(null)
const getVanTagRef = () => {
return VanTagRef.value
}
defineExpose({getVanTagRef})仅使用了van-tag组件,因此可无缝继承van-tag组件的所有属性、事件及插槽。可使用getVanTagRef获取实例。
属性
继承van-tag组件的所有属性以及新增的下列几个属性
| 属性 | 类型 | 说明 | 默认值 |
|---|---|---|---|
modelValue | string,number | 按钮绑定的字典值,必传,v1.1.0开始dictType没值时modelValue值就是tag标签值 | “” |
dictType | string | 按钮的字典类型,v1.1.0开始改为非必传 | “” |
judgeTypeFun(modelValue) | function | 根据modelValue返回对应的type函数 | 无 |
judgeColorFun(modelValue) | function | 根据modelValue返回对应的color函数 | 无 |
judgeDisabledFun(modelValue) | function | 根据modelValue返回对应的disabled函数 | 无 |
注意
type优先级:judgeTypeFun > type > 字典值对应数据自带的的type属性
color优先级:judgeColorFun>color>字典值对应数据自带的color属性
disabled优先级:judgeDisabledFun>字典值对应数据自带的disabled属性(为false时忽略)>disabled
插槽
继承van-tag组件的所有插槽

