coding
最代码人间蒸发的gravatar头像
最代码人间蒸发2019-09-09 15:58:10
沙雕程序员(七)—— 小记!iview实现动态编辑标签!

文章开始前,说几句废话。

 

其实这个很龙8国际娱乐pt老虎机,在iview的文档中呢,提供了标签的动态使用 ——>点这里看iview标签,但它是不可编辑的,所以我写个文章记录一下,方便刚学习vue的小伙伴,直接使用,毕竟我开始也是不会到会。

首先我最初做的样子,我是写死的,然后进行点选。。。

这个效果不是我想要的,最代码现在也是分享博客的时候,默认选择一些类别。当然具体情况具体分析。我想要的效果什么呢,比如csdn发表文章添加标签一样。虽然当时想是这么想的,但没有去深究,今天好好研究了一下,把这个写出来了。

 

接下来,我就给大家上代码,讲一下怎么实现。

<iv-tag 
    v-for="item in countTags" 
    :key="item" 
    :name="item" 
     closable
     @on-close="handleClose">{{ item }}</iv-tag >
//tag参数
countTags: ['Java', 'Vue'],

 

//标签部分
handleClose(tag) {
  this.countTags.splice(this.countTags.indexOf(tag), 1);
},

注:iview中你使用tag,不是iv-tag,<Tag></Tag>,我这个是自定义引入,只使用我需要的iview插件。

如上代码段,遍历标签,不多解释,加了一个可关闭事件。参照iview中的官方文档,跟我这个大同小异。

 

-------------------------------------------------华丽分割线--------------------------------------------------------

接下来就是iview中没有的。

在iv-tag下写一个input。代码如下~

<iv-input
  class="input-new-tag"
  v-if="inputVisible"
  v-model="inputValue"
  ref="saveTagInput"
  size="small"
  @keyup.enter.native="handleInputConfirm"
  @blur="handleInputConfirm"
>
样式,写到你的style里
.input-new-tag {
  width: 80px;
  margin-left: 0px;
}

再加俩个初始参数,

inputVisible: false,
inputValue: '',

一个回车事件,一个元素失去焦点时所触发的事件,触发同一个事件。

handleInputConfirm() {
  let inputValue = this.inputValue;
  if (inputValue) {
    this.countTags.push(inputValue);   //简龙8国际娱乐pt老虎机单,push一下
  }
  this.inputVisible = false;
  this.inputValue = '';
},

再在input下加一个button,使用ref引用上面的input,点击出现。

<iv-button v-else 
  size="small" 
  type="dashed" 
  icon="ios-add" 
  @click="showInput">+ 添加标签</iv-button>
showInput() {
  this.inputVisible = true;
  this.$nextTick(_ => {
    this.$refs.saveTagInput.$refs.input.focus();
  });
},

至此,全文结束。

沙雕程序员(七)—— 小记!iview实现动态编辑标签!

看一下效果~


打赏

已有1人打赏

最代码官方的gravatar头像

分享到:

最近浏览
菜鸟真的是菜 LV710月18日
月亮星星星星星星
暮色留白 LV710月18日
月亮星星星星星星
11410415040 LV210月16日
星星星星
chadzhang LV110月14日
星星
156dfv LV210月12日
星星星星
话不多的程序员 LV1710月11日
太阳星星
你吃屎 LV210月11日
星星星星
wjxiongw LV610月11日
月亮星星星星
jason0943 LV1010月10日
月亮月亮星星星星
遇见, LV3610月8日
太阳太阳月亮
最代码位
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友

龙8国际娱乐pt老虎机