vue使用el-tag完成添加标签操作

需求：做一个添加标签的功能，点击添加后输入内容后回车可以添加，并且标签可以删除

1.效果

2.主要代码讲解

鼠标按下后触发handleLabel函数，根据回车的keycode判断用户是不是按下的回车键，回车键键值为13，用户按下回车键后把输入的内容添加到标签中，并且清空输入框内容，如果用户输入为空那么会给用户提示。

  @keyup.enter.native="handleLabel"

    handleLabel(key) {
            if (key.keyCode == 13) {
                if (this.labelValue) {
                    this.labelFlag = false;
                    this.label.push({ name: this.labelValue });
                    this.$nextTick(() => (this.labelValue = ''));
                } else {
                    this.$message.warning('请输入标签内容');
                }
            }
        },

3.完整代码

文章到此结束，希望对你有所帮助~~