最亚虎娱乐官网广告位
最亚虎娱乐官网人间蒸发的gravatar头像
沙雕程序员(七)—— 小记!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日
太阳
顶部客服微信二维码底部
>扫描二维码关注最亚虎娱乐官网为好友扫描二维码关注最亚虎娱乐官网为好友