coding
最亚虎娱乐官网人间蒸发的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实现动态编辑标签!

看一下效果~


打赏

已有1人打赏

最亚虎娱乐官网官方的gravatar头像

分享到:

最近浏览
coding喵 LV164小时前
太阳
菜鸟真的是菜 LV710月18日
月亮星星星星星星
暮色留白 LV710月18日
月亮星星星星星星
11410415040 LV210月16日
星星星星
chadzhang LV110月14日
星星
156dfv LV210月12日
星星星星
话不多的程序员 LV1710月11日
太阳星星
你吃屎 LV210月11日
星星星星
wjxiongw LV610月11日
月亮星星星星
jason0943 LV1010月10日
月亮月亮星星星星
最亚虎娱乐官网广告位
顶部客服微信二维码底部
>扫描二维码关注最亚虎娱乐官网为好友扫描二维码关注最亚虎娱乐官网为好友