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

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

 

其实这个很简单,在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);   //简简单单,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头像

分享到:

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