<!-- 可以动态新增的 tag 列表 -->
<template><div><el-tagv-for="(tag, index) in dynamicTags":key="index":closable="true":disable-transitions="false"@close="handleClose(tag)">{{ tag }}</el-tag><el-inputref="saveTagInput"class="input-new-tag"v-if="inputVisible"v-model="inputValue"@keyup.enter.native="$event.target.blur()"@blur="handleInputConfirm"/><el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button></div>
</template><script>
export default {name: "EditableTag",props: {dynamicTags: { type: Array, require: true }},model: {event: "change",prop: "dynamicTags"},data() {return {inputVisible: false,inputValue: ""};},methods: {handleClose(tag) {this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);},showInput() {this.inputVisible = true;this.$nextTick(() => {// auto focusthis.$refs.saveTagInput.$refs.input.focus();});},handleInputConfirm() {if (this.inputValue) {this.dynamicTags.push(this.inputValue);}this.inputVisible = false;this.inputValue = "";}}
};
</script><style>
.el-tag {margin-right: 10px;
}
.button-new-tag {height: 32px;line-height: 30px;padding-top: 0;padding-bottom: 0;
}
.input-new-tag {width: 90px;vertical-align: bottom;
}
</style>

这个组件封装的还是秒呀

值通过父组件传入

绑定change方法