element-ui动态编辑标签

news2024/11/26 23:38:41

在这里插入图片描述
点击叉叉,标签消失,点击New Tag,显示输入框,输入完成后生成标签,并且出现New Tag标签。

代码:

<el-tag
  :key="tag"
  v-for="tag in dynamicTags"
  closable
  :disable-transitions="false"
  @close="handleClose(tag)">
  {{tag}}
</el-tag>
<el-input
  class="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.coloradmin.cn/o/780456.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Hive 01】简介、安装部署、高级函数使用

1 Hive简介 1.1 Hive系统架构 Hive是建立在 Hadoop上的数据仓库基础构架&#xff0c;它提供了一系列的工具&#xff0c;可以进行数据提取、转化、加载&#xff08; ETL &#xff09;Hive定义了简单的类SQL查询语言&#xff0c;称为HQL&#xff0c;它允许熟悉SQL的用户直接查询…

redux源码阅读总结(一)- createStore.js详细解析与思考

redux数据流分析 在阅读redux源码之前&#xff0c;先整理一下redux的数据流&#xff0c;官网的数据流程图如下所示。该图十分清晰明了的展示了redux的数据流&#xff1a; 点击UI&#xff0c;发起一个存钱的点击事件。在点击事件处理函数中&#xff0c;dispatch分发一个action…

AE 3D粒子插件trapcode particular 新版本

Trapcode Particular for Mac是目前AE系列的插件中最火爆最流行的一款三维粒子插件&#xff0c;是属于Red Giant Trapcode Suite&#xff08;红巨人粒子特效套装插件&#xff09;中的一款粒子插件。该软件提供了多达一百余种粒子效果供用户使用&#xff0c;可以产生各种各样的自…

【算法基础:搜索与图论】3.4 求最短路算法(Dijkstrabellman-fordspfaFloyd)

文章目录 求最短路算法总览Dijkstra朴素 Dijkstra 算法&#xff08;⭐原理讲解&#xff01;⭐重要&#xff01;&#xff09;&#xff08;用于稠密图&#xff09;例题&#xff1a;849. Dijkstra求最短路 I代码1——使用邻接表代码2——使用邻接矩阵 补充&#xff1a;稠密图和稀疏…

(Chrome Ext)谷歌扩展程序-谷歌插件渗透测试方法记录

文章目录 前言一、本地获取谷歌插件/扩展程序源码二、工具化信息收集总结 前言 在工作岗位变更之后&#xff0c;越来越多“奇奇怪怪”的东西要去渗透和测试&#xff0c;在我之前干安服的时候&#xff0c;最多的就是测一下web&#xff0c;极少情况下测测app&#xff0c;但是现在…

信息与通信工程学科面试准备——信息论与编码|保研推免面试题

目录 第一章 绪论 1 信息的概念 1.1 香农对信息的定义 1.2 信息与消息之间的关系&#xff1f; 2 信息的性质 3 信息的分类 4 信息论与编码研究的主要内容 (1)狭义信息论 (2)一般信息论 (3)广义信息论 5 信息论与编码的发展和应用 6 通信系统模型构成 (1)信源 (2)…

微信小程序-----input数据双向绑定

简介&#xff1a; 这里介绍两种获取的方式&#xff1a; 1、用户每输入一个字节就获取一个字节 2、用户全部输入结束了之后&#xff0c;再一起获取整个input输入框的值 注意&#xff1a;第二种方式会比较节省内存资源 第一种方式: 原理&#xff1a;我们使用bindinput事件来获取…

2023年Q2京东洗衣机行业品牌销售排行榜(京东销售数据分析)

鲸参谋电商大数据2023年Q2京东平台“洗衣机”品类完整销售数据榜单出炉&#xff01; 根据鲸参谋电商数据显示&#xff0c;今年Q2京东平台上洗衣机行业的销量超过380万&#xff0c;环比下降19%&#xff0c;同比上升约2%&#xff1b;行业销售额达63亿&#xff0c;环比下降约14%&a…

idea+springboot+jpa+maven+jquery+mysql进销存管理系统源码

ideaspringbootjpamavenjquerymysql进销存管理系统 一、系统介绍1.环境配置 二、系统展示1. 管理员登录2.首页3.采购订单4.收货入库5. 采购退货6. 商品入库7. 商品出库8. 库存查询9.商品移库10.库存盘点11.销售订单12.发货出库13.销售退货14.商品查询15. 供应商查询16.客户查询…

3.输出printf() 与 输入scanf()

输入 与 输出 1.printf()2.scanf() 1.printf() 1.1 引用条件 printf()函数使用之前必须要引入<stdio.h>这个头文件 1.2 关于换行 printf()在打印的时候不会自动换行&#xff0c;所以各位需要在输出文本的末尾添加转义字符\n&#xff0c;也就是换行符&#xff0c;不然调…

通过Docker启动DB2,并在Spring Boot整合DB2(Druid连接池)

1 简介 DB2是IBM的一款优秀的关系型数据库&#xff0c;简单学习一下。 2 Docker安装DB2 为了快速启动&#xff0c;直接使用Docker来安装DB2。先下载镜像如下&#xff1a; docker pull ibmcom/db2 # or docker pull ibmcom/db2:11.5.0.0 启动数据库如下&#xff1a; docker …

【树上操作】定长裁剪 CF1833 G

Problem - G - Codeforces 题意&#xff1a; 给定一棵n个节点的树&#xff0c;请你减掉一些边&#xff0c;使得剪掉后的每个树只有三个节点&#xff0c; 如果可以&#xff0c;第一行返回减掉边的数量&#xff0c;第二行返回减掉边的编号&#xff1b;如果无解&#xff0c;输出…

opencv 图像腐蚀膨胀 erode dilate

#include "iostream" #include "opencv2/opencv.hpp" using namespace std; using namespace cv;int main() {Mat img, dst, dstbin, distancetransform,rel, rel2;img imread("m3.jpg");//转为灰度图cvtColor(img, dst, COLOR_BGR2GRAY);//二…

springcloudAlibaba之nacos集群部署和nginx负载均衡

1.环境准备 nacos server安装包&#xff1a;https://github.com/alibaba/nacos nginx安装包&#xff1a;https://nginx.org/en/download.html 2、nacos配置 将下载好的nacos-server的压缩包解压好以后&#xff0c;复制出N份&#xff08;这里取决于你集群的数量&#xff09;&…

AC自动机(java)

AC自动机 AC自动机介绍代码演示 indexTree AC自动机介绍 AC自动机算法是一种基于Trie树和有限状态机的字符串匹配算法。它在查找字符串时&#xff0c;利用额外的失配指针进行回退&#xff0c;转向其他分支&#xff0c;避免重复匹配前缀&#xff0c;从而提高算法效率。当一个字典…

编译内联导致内存泄漏的问题定位修复

作者&#xff1a;0x264 问题 线上长时间存在一个跟异步 inflate 相关的量级较大的内存泄漏&#xff0c;如下所示&#xff1a; 第一次分析 从内存泄漏粗略看有几个信息&#xff1a; 被泄漏的Activity有很多&#xff0c;所以可能跟某个具体业务的关系不大引用链特别短&#xf…

SkyWalking链路追踪中span全解

基本概念 在SkyWalking链路追踪中&#xff0c;Span&#xff08;跨度&#xff09;是Trace&#xff08;追踪&#xff09;的组成部分之一。Span代表一次调用或操作的单个组件&#xff0c;可以是一个方法调用、一个HTTP请求或者其他类型的操作。 每个Span都包含了一些关键的信息&am…

yaml语法详解

#kv #对空格的严格要求十分高 #注入到我们的配置类中 #普通的keyvalue name: qinjiang#对象 student:name: qingjiangage: 3#行内写法 student1: {name: qinjiang,age: 3}#数组 pets:- cat- dog- pigpet: [cat,dog,pig]yaml可以给实体类赋值 person:name: kuangshenage: 19happ…

css——box-sizing属性

含义 盒子模型由四部分构成&#xff0c;外边距(margin), 边框(border),内边距(padding), 内容content box-sizing 就是指定盒子的大小和结构的。 box-sizing: content-box; //默认值 内容真正宽度 设置的宽度box-sizing: border-box; // 内容真正宽度width 设置的width- 左右p…

LabVIEW可重入VI,VI模板和动态VI之间的差异

LabVIEW可重入VI&#xff0c;VI模板和动态VI之间的差异 应该在何时使用可重入VI、模板VI和动态调用VI&#xff1f;这三种类型之间有什么区别&#xff1f; 可重入VI 当想要同时运行同一VI的多个实例时&#xff0c;将使用可重入VI。当VI不可重入时&#xff0c;VI只有一个数据空…