|
@@ -1,12 +1,27 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
<div>
|
|
|
+ <div class="text-right m-b-10px">
|
|
|
+ <el-button size="small" type="primary" @click="addNewTag = true; newTagText = ''">添加新标签</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="m-b-12px flex" v-if="addNewTag">
|
|
|
+ <el-input
|
|
|
+ v-model="newTagText"
|
|
|
+ placeholder="请输入标签,按回车键确认!"
|
|
|
+ clearable
|
|
|
+ class="!w-300px"
|
|
|
+ @keyup.enter="saveTags"
|
|
|
+ />
|
|
|
+ <el-button type="primary" class="m-l-12px" @click="saveTags">保存</el-button>
|
|
|
+ <el-button @click="addNewTag = false">关闭</el-button>
|
|
|
+ </div>
|
|
|
<div>
|
|
|
<el-tag
|
|
|
v-for="(item, index) of list"
|
|
|
:key="index"
|
|
|
closable
|
|
|
size="large"
|
|
|
+ @close="deleteTag(index)"
|
|
|
class="m-r-10px m-b-10px"
|
|
|
>{{ item.skillsName }}</el-tag>
|
|
|
</div>
|
|
@@ -45,4 +60,15 @@ const tagList = [
|
|
|
]
|
|
|
|
|
|
const list = ref(props.data && props.data.length ? cloneDeep(props.data) : tagList)
|
|
|
+
|
|
|
+const addNewTag = ref(false)
|
|
|
+const newTagText = ref('')
|
|
|
+const saveTags = () => {
|
|
|
+ list.value.push({skillsName: newTagText.value})
|
|
|
+ addNewTag.value = false
|
|
|
+}
|
|
|
+
|
|
|
+const deleteTag = (index) => {
|
|
|
+ list.value.splice(index, 1)
|
|
|
+}
|
|
|
</script>
|