点击叉叉,标签消失,点击New Tag,显示输入框,输入完成后生成标签,并且出现New Tag标签。
代码:
<el-tag:key="tag"v-for="tag in dynamicTags"closable:disable-transitions="false"@close="handleClose(tag)">{{tag}}
</el-tag>
<el-inputclass="input-new-tag"v-if="inputVisible"v-model="inputValue"ref="saveTagInput"size="small"@keyup.enter.native="handleInputConfirm"@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button><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;}
</style><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>
通过v-for,根据description的内容进行渲染。当点击New Tag后,通过v-if和v-else来显示输入框,并去掉New Tag,
this.$nextTick(_ => {this.$refs.saveTagInput.$refs.input.focus();
});
来获取到焦点
在完成输入后由于绑定了失去焦点的事件和回车按下后的事件,会将新的内容放入数组中,通过v-for重新进行渲染,并且重置相关值以消失。
关闭标签则是直接对数组进行剪切,删除某个值,再通过v-for重新进行渲染。