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 replace方法与正则表达式
Feb 19 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
简单实现jquery焦点图
Dec 12 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
javaScript同意等待代码实现心得
2011/01/01 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
使用python统计文件行数示例分享
2014/02/21 Python
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
python遍历数组的方法小结
2015/04/30 Python
python修改字典内key对应值的方法
2015/07/11 Python
Python交互环境下实现输入代码
2018/06/22 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
python操作链表的示例代码
2020/09/27 Python
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
精彩的推荐信范文
2013/11/26 职场文书
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
心理健康活动总结
2014/04/30 职场文书
美术社团活动总结
2014/06/27 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
MySql开发之自动同步表结构
2021/05/28 MySQL
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang