element-ui动态编辑标签

news/2024/12/23 5:02:11/

在这里插入图片描述
点击叉叉,标签消失,点击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重新进行渲染。


http://www.ppmy.cn/news/973749.html

相关文章

亲爱的小朋友,你好,今天我们聊一聊什么是ChatGPT?

亲爱的小朋友&#xff0c;你好&#xff01; 今天我们要聊一聊的是我们的好朋友——ChatGPT&#xff0c;最近ChatGPT很火爆&#xff0c;你们可能已经在很多地方看到关于它的文章和视频了。 你可能会问&#xff0c;这个ChatGPT到底是什么东西呢&#xff1f;好像很厉害的样子&am…

【社区图书馆】读后感《你好,ChatGPT》

&#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&#xff08;网站、工具、素材、源码、游戏等&#xff09; 有什么需要欢迎底部卡片私我&#xff0c;获取更多支持&#xff0c;交流让学习不再孤单。 前两天收到了CSDN发的一本书&…

OpenCv之视频人脸识别

一、人脸检测 案例代码如下: import cv2 import numpy as npvideo cv2.VideoCapture(1.mp4) face_detector cv2.CascadeClassifier(haarcascade_frontalface_alt.xml) while True:retval,image video.read() # retval boolean类型表名是否获得了图片if not retval:pr…

arcgis-利用等高线数据生成dem栅格

1、打开cass&#xff0c;展高程点&#xff0c;绘制三角网&#xff0c;绘制等高线&#xff0c;删除三角网和高程点。如下&#xff1a; 2、得到的等高线图&#xff0c;如下&#xff1a; 3、保存文件为dwg格式&#xff0c;随后打开arcmap软件&#xff0c;打开dwg的线层数据&#x…

airtest-selenium 脚本爬取百度热搜标题

目录 1. 前言 2. 爬取标题的脚本 3. 命令行运行 Web 自动化脚本 1&#xff09;python 环境准备 2&#xff09;chrome 与 chromedriver 版本对应 3&#xff09;命令行运行 1. 前言 airtest-selenium是一个基于Python的UI自动化测试框架&#xff0c;它结合了airtest和sele…

【数据结构】--八大排序算法【完整版】

匠心制作&#xff0c;后续有问题会加以修改的 &#xff0c;全文均是自己写的&#xff0c;几张图有参考网络 ———————————————— 目录 一、直接插入排序 二、希尔排序(直接插入排序的改良版) 三、选择排序&#xff08;直接选择排序&#xff09; 四、堆排序 …

(黑客)自学笔记

特别声明&#xff1a; 此教程为纯技术分享&#xff01;本教程的目的决不是为那些怀有不良动机的人提供及技术支持&#xff01;也不承担因为技术被滥用所产生的连带责任&#xff01;本教程的目的在于最大限度地唤醒大家对网络安全的重视&#xff0c;并采取相应的安全措施&#x…

各种各类镜像网站

这里给出了南京邮电大学的镜像开源软件镜像网站地址和国内其它大学和企业如阿里、腾讯、网易等的开源镜像地址。 南京邮电大学开源镜像网站地址&#xff1a;https://mirrors.njupt.edu.cn/清华大学开源软件镜像站地址&#xff1a;https://mirror.tuna.tsinghua.edu.cn/中国科大…