最代码广告位
最代码人间蒸发的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实现动态编辑标签!

看一下效果~


打赏

已有2人打赏

已注销用户的gravatar头像最代码官方的gravatar头像
最近浏览
kinvecc124月21日
暂无贡献等级
已注销用户 LV344月1日
太阳太阳星星星星
bjc9342190872月25日
暂无贡献等级
lmh1996 LV21月13日
星星星星
lijunjie1 LV12019年12月27日
星星
jinyanliang LV12019年10月31日
星星
KID星心 LV12019年10月28日
星星
zhuliu LV82019年10月26日
月亮月亮
liwf10900 LV22019年10月25日
星星星星
coding喵 LV162019年10月23日
太阳
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友