vue封裝的Tag標簽雙擊編輯單擊選中可刪除

更新時間：2023年09月28日 09:23:13 作者：啥咕啦嗆

項目中需要制作一個雙擊編輯單擊選中可刪除Tag標簽,本文就來介紹一下如何實現(xiàn),具有一定的參考價值,感興趣的可以了解一下

背景

最近項目中需要制作一個雙擊編輯單擊選中可刪除Tag標簽（如下圖展示），今天分享一下這個組件功能。希望能拋磚引玉，給大家?guī)韱l(fā)。

需求功能

1.element-ui組件只能刪除，不能選中和直接編輯；

2.雙擊可編輯；

3.單擊選中，顏色變化；

4.有刪除按鈕；

設(shè)計開發(fā)

先說一下我的開發(fā)環(huán)境版本：

node: v11.3.0
npm: 6.4.1
vue：2.5.11

如果不是以上版本也沒關(guān)系，今日分享的思路，相信你可以自己造出來~

1.先寫靜態(tài)樣式html:

<div class='zTag' @click="checked" @dblclick.stop="edited" :class="{'hover':isSelected}">
  <input ref="input" type="text" v-if="isEdit" v-model="data"  @keyup.enter="edited"  @blur="edited">
  <span>
    <b >{{data}}</b>
    <i @click.stop="remove">X</i>
  </span>
 </div>

2.給html加css樣式：

.zTag{
? position: relative;
? display: inline-block;
? border: 1px solid #ddd;
? border-radius: 3px;
? background-color: #eee;
? color: #333;
? cursor: pointer;
? min-width: 10px;
? min-height: 30px;
? font-family: '微軟雅黑';
? overflow: hidden;
? padding: 0 15px 0 5px;
? &.hover{
? ? color:#1676ff;
? ? background: #a6cff5;
? ? border-color: #5a9af5;
? ? i{
? ? ? color:#999;
? ? }
? }
? input{
? ? position: absolute;
? ? left: 0;
? ? top:0;
? ? outline: none;
? ? border: none;
? ? width: 100%;
? ? display: block;
? ? font-size: 12px;
? ? line-height: 30px;
? ? font-family: '微軟雅黑';
? ? color: #333;
? ? padding: 0 10px 0 5px;
? }
? span{
? ? display: inline-block;
? ? // padding: 0 15px 0 5px;
? ? b{
? ? ? font-weight: normal;
? ? ? font-family: '微軟雅黑';
? ? ? font-size: 12px;
? ? ? line-height: 30px;
? ? }
? }
? i{
? ? position: absolute;
? ? right: 5px;
? ? top:5px;
? ? text-decoration: normal;
? ? &:hover{
? ? ? color:#1676ff;
? ? }
? }
}

3.給標簽加點擊事件和雙擊事件：

// 選中
    checked(){
      this.isSelected = !this.isSelected;
      this.$emit('selected', this.data);
    },
    // 編輯狀態(tài)切換
    edited(){
      this.isEdit = !this.isEdit;
      if(this.isEdit){
        this.$nextTick(_ => {
          this.$refs.input.focus()
        })
      }else{
        this.$input('value', this.data);
      }
    },
    // 刪除
    remove(){
      console.log('remove')
      this.$emit('remove')
    }

4.數(shù)據(jù)考慮傳參：

props:{
    value:{
      type:String,
      default:'標簽'
    }
  },
  data(){
    return{
      data: this.value,
      isEdit: false,
      isSelected: false,
    }
  },

本組件只用于學習交流哈！如上關(guān)閉按鈕可以調(diào)父級操作刪除或者清空功能，效果如下：