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頭像

分享到:

最近瀏覽
chadzhang LV12小時前
星星
156dfv LV2前天
星星星星
話不多的程序員 LV1710月11日
太陽星星
你吃屎 LV210月11日
星星星星
wjxiongw LV610月11日
月亮星星星星
jason0943 LV1010月10日
月亮月亮星星星星
遇見, LV3610月8日
太陽太陽月亮
dkq1314520 LV69月30日
月亮星星星星
最代碼_碼鑫源 LV39月29日
星星星星星星
rht_06279月29日
暫無貢獻等級
頂部客服微信二維碼底部
>掃描二維碼關注最代碼為好友掃描二維碼關注最代碼為好友
2008大乐透走势图