最代碼人間蒸發的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日
太陽
頂部客服微信二維碼底部
>掃描二維碼關注最代碼為好友掃描二維碼關注最代碼為好友
2008大乐透走势图