<template>
<div style="color: white">
<div>關鍵詞組：</div>
<div class="add-input" v-for="(item, index) in updataData" :key="index">
<div style="flex: 1">
<input
@click="updasea(item.name, index)"
@input="updasea(item.name, index)"
@blur="blurFun(item.name, index)"
ref="updasea"
trim
type="text"
class="item-input two"
v-model="item.name"
/>
</div>
<div class="icon-add">
<div @click="updataadd(index)" v-if="index == updataData.length - 1">
+
</div>
<div @click="updatadel(index)" v-else>-</div>
</div>
</div>
<div class="text-tab-box">
<div class="text-tab-box-title">
<!-- <img src="@/assets/images/icon-title.png" alt="" /> -->
<span>已選關鍵詞</span>
</div>
<div class="text-tab-box-tag">
<div v-for="(item, index) in updataData_arr" :key="index">
<span v-for="(subItem, subIndex) in item" :key="subIndex">
<el-tag
size="small"
closable
v-if="subItem"
@close="updataClose(index, subIndex)"
:disable-transitions="true"
>{{ subItem }}</el-tag
>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
item: "",
updataData: [{ name: "" }],
updataData_arr: [],
};
},
methods: {
updataadd(index) {
this.updataData.push({ name: "" });
this.updataicon = true;
},
updatadel(index) {
this.updataData.splice(index, 1);
this.updataData_arr.splice(index, 1);
this.updataicon = true;
},
updataClose(index, subIndex) {
if (this.updataData_arr[index].length == 1) {
if (this.updataData.length == 1) {
this.updataData = [{ name: "" }];
} else {
this.updataData.splice(index, 1);
}
this.updataData_arr.splice(index, 1);
} else {
this.updataData_arr[index].splice(subIndex, 1);
this.updataData[index].name = this.updataData_arr[index].join(",");
}
},
blurFun(val, index) {
this.$nextTick(() => {
this.updataData_arr[index] = val.split(",");
this.$forceUpdate();
});
},
updasea(val, index) {
this.$nextTick(() => {
this.$refs.updasea[index].focus();
this.updataData_arr[index] = val.split(",");
});
},
},
};
</script>
<style>
</style>
