<template>
|
<div>
|
<el-button v-if="!inputVisible" class="button-new-tag" size="small" @click="showInput">+ 标签</el-button>
|
<el-input
|
v-else
|
class="input-new-tag"
|
v-model="inputValue"
|
ref="saveTagInput"
|
size="small"
|
@keyup.enter.native="handleInputConfirm"
|
@blur="handleInputConfirm"
|
>
|
</el-input>
|
<div class="tags-container">
|
<el-tag
|
v-for="tag in dynamicTags"
|
:key="tag"
|
closable
|
:disable-transitions="false"
|
@close="handleClose(tag)">
|
{{tag}}
|
</el-tag>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
dynamicTags: ['重点标记', '发改关注', '年度项目'],
|
inputVisible: false,
|
inputValue: ''
|
};
|
},
|
methods: {
|
handleClose(tag) {
|
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
|
},
|
|
showInput() {
|
this.inputVisible = true;
|
this.$nextTick(_ => {
|
this.$refs.saveTagInput.$refs.input.focus();
|
});
|
},
|
|
handleInputConfirm() {
|
let inputValue = this.inputValue;
|
if (inputValue) {
|
this.dynamicTags.push(inputValue);
|
}
|
this.inputVisible = false;
|
this.inputValue = '';
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.el-tag + .el-tag {
|
margin-left: 10px;
|
|
}
|
.button-new-tag {
|
margin-left: 10px;
|
height: 32px;
|
line-height: 30px;
|
padding-top: 0;
|
padding-bottom: 0;
|
}
|
.input-new-tag {
|
width: 90px;
|
margin-left: 10px;
|
vertical-align: bottom;
|
}
|
|
.tags-container {
|
margin-top: 10px; /* 根据需要调整间距 */
|
}
|
</style>
|
