成都网站建设设计

将想法与焦点和您一起共享

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

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

创新互联网站建设提供从项目策划、软件开发,软件安全维护、网站优化(SEO)、网站分析、效果评估等整套的建站服务,主营业务为网站制作、成都网站建设重庆APP开发以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。创新互联深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

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


 {{tag}}



+ New Tag





这个是官方文档给的实例,这样可以解决单一标签输入。但是实际场景中,好多用户是通过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组件实现多标签生成的方法示例

完成。希望能够帮到有需要的朋友。也希望大家多多支持创新互联。


分享文章:ElementUITag组件实现多标签生成的方法示例
转载来源:http://chengdu.cdxwcx.cn/article/pehghh.html