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 打地鼠游戏代码说明
Oct 12 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
JavaScript闭包详解
Feb 02 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
jquery自定义组件实例详解
Dec 31 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
解析strtr函数的效率问题
2013/06/26 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
js倒计时抢购实例
2015/12/20 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
VUE中v-model和v-for指令详解
2017/06/23 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
Python Web开发模板引擎优缺点总结
2014/05/06 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
python实现定时发送邮件
2020/12/23 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
校园活动宣传方案
2014/03/28 职场文书
信用卡催款律师函
2015/05/27 职场文书