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 相关文章推荐
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
JS控制输入框内字符串长度
May 21 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
js实现轮播图特效
May 28 Javascript
修改Vue打包后的默认文件名操作
Aug 12 Javascript
利用不到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生成月历代码
2007/06/14 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
PHP 图片处理
2020/09/16 PHP
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
javascript中new关键字详解
2015/12/14 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
python处理cookie详解
2014/02/07 Python
python的类变量和成员变量用法实例教程
2014/08/25 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
土木工程专业自荐信
2013/10/04 职场文书
优秀员工个人的自我评价
2013/11/29 职场文书
校长寄语大全
2014/04/09 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
师范生见习总结范文
2015/06/23 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
nginx服务器的下载安装与使用详解
2021/08/02 Servers