<!-- 父盒子 -->
<div class="father_box" @click="onclick">
<!-- 生成的标签 -->
<div v-for="(item, index) in node.data.TagsAll" :key="index" class="spanbox">
<span class="tagspan">{{ item }}</span>
<i class="span_close" @click="removeTag(index, item, node.data)"></i>
</div>
<!-- 输入框
@keyup.delete="deleteTags"-->
<input
placeholder="输入后按<回车>创建"
v-model="node.data.value"
@keyup.enter="addTags(node)"
:style="inputStyle"
class="inputTag"
ref="inputTag"
type="text"
/>
</div>
methods: {
//删除tag
removeTag(index, item, node) {
node.TagsAll.splice(index, 1);
},
//回车增加tag
addTags(node) {
if (node.data.value) {
//添加tag
node.data.TagsAll.push(node.data.value);
//清空输入框
node.data.value = "";
}
},
//点击父盒子输入框获取焦点
onclick() {
// console.log(2345);
},
}
开始用el-input生成的tag 标签,但是产品觉得看着别扭---就又改的input框回车生成tag...也差了些资料,这里单独做个文案记录。如有哪里疑惑可以参照el-tree添加条件