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 相关文章推荐
JS 面向对象之神奇的prototype
Feb 26 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 Javascript
js实现圆形菜单选择器
Dec 03 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
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
php中Smarty模板初体验
2011/08/08 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
php文件下载处理方法分析
2015/04/22 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
python实现的各种排序算法代码
2013/03/04 Python
python如何重载模块实例解析
2018/01/25 Python
Python版名片管理系统
2018/11/30 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
计算机个人求职信范例
2014/01/24 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
职代会闭幕词
2015/01/28 职场文书
小升初自荐信范文
2015/03/05 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
中秋节晚会开场白
2015/05/29 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python