网站建设与管理 pdf,wordpress 需要ftp,最近新闻有哪些,做电子手环网站需求分析需求#xff1a;做一个添加标签的功能#xff0c;点击添加后输入内容后回车可以添加#xff0c;并且标签可以删除 1.效果 2.主要代码讲解
鼠标按下后触发handleLabel函数#xff0c;根据回车的keycode判断用户是不是按下的回车键#xff0c;回车键键值为13#xff0c;用… 需求做一个添加标签的功能点击添加后输入内容后回车可以添加并且标签可以删除 1.效果 2.主要代码讲解
鼠标按下后触发handleLabel函数根据回车的keycode判断用户是不是按下的回车键回车键键值为13用户按下回车键后把输入的内容添加到标签中并且清空输入框内容如果用户输入为空那么会给用户提示。 keyup.enter.nativehandleLabel 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.完整代码
!--* Descripttion: vue使用el-tag完成添加标签操作* Author: 叫我欧皇大人* email: 13071200550163.com* Date: 2023-12-15
--templatediv classcontent-boxdiv classcontainerel-tag v-for(item, index) in label :keyindex closable closelabel.splice(index, 1) stylemargin: 0 10px{{item.name}}/el-tagel-inputstylewidth: 150pxplaceholder请输入标签sizesmallclearablev-modellabelValuekeyup.enter.nativehandleLabelv-iflabelFlag true/el-inputel-button v-else typeprimary sizesmall iconel-icon-plus clickaddLabel()添加标签/el-button/div/div
/templatescript
export default {data() {return {label: [{ name: 前端 }],labelValue: ,labelFlag: false};},mounted() {},methods: {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(请输入标签内容);}}},addLabel() {this.labelFlag true;}}
};
/scriptstyle langscss scoped
.content-box {.container {// height: 400px;display: flex;}
}
.el-select {width: 80px;
}
/style文章到此结束希望对你有所帮助~~
