ElementUI Tag组件实现多标签生成的方法示例


Posted in Javascript onJuly 08, 2019

现在好多应用场景里会有一些需要给文章打标签等类似的操作,之前jquery用户是使用taginput来实现,使用VUE以后elementui有一个组件非常简单就是tag组件。

ElementUI 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>

这个是官方文档给的实例,这样可以解决单一标签输入。但是实际场景中,好多用户是通过ctrl+c,ctrl+v的方式输入的,有可能还会一起粘贴好多行的标签,更有可能从excel中复制出来。

那我一一解决一下这样一个场景

首先,先改一下样式,让文本框变长:

.el-tag{
 margin-right: 10px;
}
.el-tag + .el-tag {
  margin-right: 10px;
 }
 .button-new-tag {
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
 }
 .input-new-tag {
  vertical-align: bottom;
 }

接着,修改一下enter和blur事件:

handleInputConfirm() {
 let inputValue = this.inputValue;
  if (inputValue) {
   var values = inputValue.split(/[,, \n]/).filter(item=>{
    return item!='' && item!=undefined
   })
   values.forEach(element => {
    var index = this.dynamicTags.findIndex(i=>{
    return i==element
   })
   if(index<0){
    this.dynamicTags.push(element);
   }
  });   
 }
 this.inputVisible = false;
 this.inputValue = '';
}

效果:

阿大发
asd

三大发舒服,

阿斯顿发撒地方。
阿斯顿发,阿斯顿发,,阿斯顿发,,阿斯顿发安抚,阿斯顿发 是淡淡的  点点滴滴方法,阿斯顿发撒地方,adfasd

我们把以上文字复制粘贴进去

ElementUI Tag组件实现多标签生成的方法示例 

ElementUI Tag组件实现多标签生成的方法示例

所有去重,拆分都OK,那们在试一下,从excel中复制

ElementUI Tag组件实现多标签生成的方法示例

 ElementUI Tag组件实现多标签生成的方法示例

完成。希望能够帮到有需要的朋友。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript之引用类型介绍
Aug 10 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
vue中nextTick用法实例
Sep 11 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
jQuery实现视频展示效果
May 30 jQuery
利用不到200行代码写一款属于你自己的js类库
Jul 08 #Javascript
Vue中util的工具函数实例详解
Jul 08 #Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 #Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 #Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 #Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 #Javascript
详解django模板与vue.js冲突问题
Jul 07 #Javascript
You might like
php下使用无限生命期Session的方法
2007/03/16 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
解析argc argv在php中的应用
2013/06/24 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
jquery 插件开发方法小结
2009/10/23 Javascript
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
Python3几个常见问题的处理方法
2019/02/26 Python
解决Python二维数组赋值问题
2019/11/28 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
医学护理毕业生自荐信
2013/11/07 职场文书
工业学校毕业生自荐书
2014/01/03 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
毕业生就业协议书
2014/04/11 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
离婚协议书格式
2015/01/26 职场文书
Django实现聊天机器人
2021/05/31 Python
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android