1.0.4 • Published 2 years ago
vue2-tag v1.0.4
一个基于Vue2的动态添加删除Tag标签的组件
安装
npm install vue2-tag
引入
import Tag from "vue2-tag"
Vue.use(Tag)
组件使用
基础使用
template
<tag
:tags="sizeForm.tags"
:add-tag="addTag"
:delete-tag="deleteTag"
></tag>
script
<script>
export default {,
data() {
return {
sizeForm: {
// 数据源
tags: [],
},
};
},
methods: {
// 添加 tag
addTag(tag, callback) {
if (!tag) {
// 当重复添加时调用这个回调用来提示用户
callback(() => {
// 这里的提示信息可以按照您使用的UI框架决定
this.$message({
type: "error",
message: `标签不能重复`,
});
});
} else {
// 将新增的tag追加到数组中
this.sizeForm.tags.push(tag);
}
},
// 删除 tag
deleteTag(tagIndex) {
this.sizeForm.tags.splice(tagIndex, 1);
},
},
};
</script>
上面所演示的是必选项 如果不传递会报错提示相关信息
自定义提示文本
如果需要修改默认的提示文本可以通过 tip-text
属性来修改
<tag
:tags="sizeForm.tags"
:add-tag="addTag"
:delete-tag="deleteTag"
:tip-text="这里是自定义的提示文本"
></tag>
同时也可以接受一个函数 函数的形参为可以输入的最大的标签数量 默认是 7
<tag
:tags="sizeForm.tags"
:add-tag="addTag"
:delete-tag="deleteTag"
:tip-text="customTipText"
></tag>
script
<script>
export default {,
data() {
return {
// ... 省略上面写过的JS代码
};
},
methods: {
// ... 省略上面写过的JS代码
customTipText(maxTagNumber){
return "这是自定义的内容,最多可以添加" + maxTagNumber + "个标签"
}
},
};
</script>
修改可以添加的最大标签数量
通过 max-tag-number
属性就可以修改 , 超过 最大数量就添加不进去了
<tag
:tags="sizeForm.tags"
:add-tag="addTag"
:delete-tag="deleteTag"
:tip-text="customTipText"
:max-tag-number="5"
></tag>
修改边框颜色,边框圆角
可以通过 border-color
和 border-radius
两个属性来修改
<tag
:tags="sizeForm.tags"
:add-tag="addTag"
:delete-tag="deleteTag"
:tip-text="customTipText"
:max-tag-number="10"
border-color="#ccc"
border-radius="2"
></tag>
去除 tag 标签的圆角效果
可以通过 no-tag-rounded
属性来去除
<tag
:tags="sizeForm.tags"
:add-tag="addTag"
:delete-tag="deleteTag"
:tip-text="customTipText"
:max-tag-number="10"
border-color="red"
border-radius="25"
no-tag-rounded
></tag>
修改 tag 标签的背景,字体颜色
通过 tag-background-color
和 tag-text-color
修改
<tag
:tags="sizeForm.tags"
:add-tag="addTag"
:delete-tag="deleteTag"
:tip-text="customTipText"
:max-tag-number="10"
border-color="red"
border-radius="25"
no-tip-rounded
tag-background-color="red"
tag-text-color="black"
></tag>
属性
属性 | 解释 | 类型 |
---|---|---|
max-tag-number | 允许最大的标签添加数量 | Number|String |
no-tag-rounded | 去除标签的圆角效果 | Boolean |
tag-background-color | 标签的背景颜色 | String |
tag-text-color | 标签的文本颜色 | String |
border-color | 边框颜色 | String |
border-radius | 边框圆角 | Number|String |
tags | 存储标签的数组,必须 | Array |
方法
方法 | 解释 | 类型 |
---|---|---|
add-tag | 添加tag的方法,参数为当前添加的tag | Function |
delete-tag | 删除tag的方法,参数为当前tag所在数组的下标 | Function |
tip-text | 自定义提示文本,若为函数,参数为允许的最大标签数 | String|Fucntion |