知识的殿堂Appearance
功能介绍
- 标签分种类的展示，系统标签-橙色，微信标签-绿色，物料标签-蓝色
- 系统标签和微信标签分别可进行搜索，搜索结果里，搜索关键词高亮显示
- 选择标签时可以添加系统标签组、添加标签、添加微信标签
展示并编辑标签
如图： 
3. 使用示例 场景一：标签全量更新
JS
// 选择物料标签
<template>
<select-tag
:module="module"
v-model="data.record.materialTags"
:type="['material']"
@change="updateTags"></select-tag>
</template>
<script>
import SelectTag from "@/plugins/systemTag/selectTag/SelectTag"
export default {
components:{
SelectTag
},
methods:{
updateTags(tags){
console.log(tags)
// [
// {
// "id": "1020977499980816384",
// "name": "超长子标签名字删除测试验证",
// "folderId": "908652309150826496",
// "type": "Tag",
// "isPublic": true,
// "count": 14,
// "createTime": "2022-09-23T08:40:04.8403557+00:00",
// "updateTime": "2022-09-23T08:40:04.8403557+00:00",
// "editMode": false,
// "path": [
// "测试打分"
// ]
// }
// ]
}
}
};
</script>API
参数 说明 类型 默认值 type 标签的类型，只能选择以下五种值： ['system'] ['wechat']['system','wechat']['material']['public'] array ['system'] value object/array 为方便使用，当type为['system','wechat']时，value格式为 {tags: [],wechatTags: [] }，其余情况均为[]module 模块名称,用作权限管理控制closable，hideAdd string closeable 标签是否允许移除 boolean true popoverPlacement该属性推测是popover选择标签阶段的历史遗留问题，在新版本中删除 hideAdd 是否禁止添加标签 boolean false customTooltipTitle 自定义添加标签按钮处的tooltip提示 string multiple 是否多选 boolean true folderSelectable 标签文件夹是否可选 boolean false countType 标签计数类型 string "Lead" random 是否包含“任意标签/标签文件夹”选项 boolean false directSelect 选中标签后不需要点击模态框确认按扭，直接选中 boolean false 事件
当修改标签处可以全量更新时，推荐使用change事件。当移除标签和添加标签需分步操作时，则需分别处理untagging和complete事件。分步操作不符合使用习惯，所以打标签的需求尽量要求后端提供全量更新的接口
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 移除标签和模态框确认时的回调 | Function(tags) |
| untagging | 移除标签的回调 | Function(tag, type, index) |
| complete | 模态框点击确认按钮的回调 | Function(tags) |
| cancel | 模态框点击取消按钮的回调 | Function() |
选择标签
JS
this.$selectTag({
value: this.value,
type: this.type,
multiple: this.multiple,
folderSelectable: this.folderSelectable,
countType: this.countType,
random: this.random,
directSelect: this.directSelect,
handleOk: (tags) => {
_this.$emit("input", tags)
_this.$emit("complete", tags)
_this.$emit("change", tags)
},
handleCancel: () => {
_this.$emit("cancel")
},
})