本組件中使用到了iview的Icon，可以在全局安裝了Iview的項目或者局部引入了Icon的頁面中自由使用。

目錄

• 效果展示
• 功能描述
• 結構代碼
• 邏輯代碼
• 組件應用
• 事件鈎子
• github

效果展示

從左到右分別是：未選中狀態、鼠標懸浮、選中、添加組合按鈕

功能描述

1. 添加/刪除組合
2. 單擊聚焦組合
3. 雙擊修改組合名字
4. 切換下一個組合或者新增組合時上一個組合內容固定
5. 組合不能清空，可以設置組合數量上限

結構代碼

<template>
  <div class="c-combine">
    <div class="comBox">
      <div v-for="(item,idx) in com_arr" :key="item.id" class="comcell" :class="{'selcomcell': item.selected}" @click="selcom_handle(idx)">
        <span v-if="!item.edit" @dblclick.stop="name_click(2, idx)" @click.stop="name_click(1, idx)">{{item.name}}</span>
        <input v-else v-model="item.name" type="text" placeholder="組合名" maxlength="5" class="name-input" @focus="name_input(idx)" @blur="input_over(idx,item.name)" @click.stop>
        <Icon type="md-close-circle" @click.stop="close_com(idx)" />
      </div>
      <button type="text" class="add-btn" @click="addcom_handle()">+添加</button>
    </div>
  </div>
</template>

• 根據edit確定編輯狀態還是文本顯示狀態
• selected確定選中狀態還是未選中狀態

邏輯代碼

// 輸入組合名字
name_input (idx) {
  // console.log('聚焦')
},
// 組合名字輸入完畢
input_over (idx, name) {
  this.com_arr[idx].edit = false
  // console.log('失焦')
  this.$emit('changename', idx, name)
  this.$emit('synfun', this.com_arr)
},
name_click (_type, idx) {
  var self = this
  clearTimeout(this.timer)
  if (_type === 1) { // 單擊某個組合
    if (event.detail === 2) return
    this.timer = setTimeout(function () {
      // console.log('單擊')
      let last_sel_id = 0
      if (isArray(self.com_arr)) {
        self.com_arr.forEach(com => {
          if (com.selected)last_sel_id = com.id
          com.edit = false
          com.selected = false
        })
        self.com_arr[idx].selected = true
        self.$emit('fixfun', 'click', last_sel_id, idx)
      }
    }, 100)
  } else {
    // console.log('雙擊')
    this.com_arr[idx].edit = true
  }
  this.$emit('synfun', this.com_arr)
},
// 選中某個組合
selcom_handle (idx) {
  if (isArray(this.com_arr)) {
    let last_sel_id = 0
    this.com_arr.forEach(com => {
      if (com.selected)last_sel_id = com.id
      com.selected = false
    })
    this.com_arr[idx].selected = true
    this.$emit('synfun', this.com_arr)
    this.$emit('fixfun', 'click', last_sel_id, idx)
  }
},
// 刪除某個組合
close_com (idx) {
  if (this.com_arr.length === 1) {
    this.$Message.warning('組合不能清空哦-_-')
  } else {
    alert('刪除' + (idx + 1) + 'id: ' + this.com_arr[idx].id)
    let cur_idx = 999
    if (this.com_arr[idx].selected) {
      this.com_arr.splice(idx, 1)
      this.com_arr[0].selected = true
      cur_idx = 0
    } else {
      this.com_arr.splice(idx, 1)
    }
    this.$emit('synfun', this.com_arr)
    this.$emit('delfun', idx, cur_idx)
  }
},
// 新增組合
addcom_handle () {
  if (this.com_arr.length === this.max_com) {
    this.$Message.warning('最多隻能添加5個組合~.~')
  } else if (isArray(this.com_arr)) {
    let last_sel_id = 0
    this.com_arr.forEach(com => {
      if (com.selected)last_sel_id = com.id
      com.selected = false
      com.edit = false
    })
    const id_temp = genID(1)
    const addcom = {
      name: '雙擊命名',
      content: {},
      id: id_temp,
      selected: true,
      edit: true
    }
    this.com_arr.push(addcom)
    this.$emit('synfun', this.com_arr)
    this.$emit('fixfun', 'add', last_sel_id, addcom)
  }
}

• 處理新增組合事件
• 刪除某個組合事件
• 選中某個組合事件
• 單擊或雙擊某個組合事件（單擊選中/雙擊改名）
• 輸入組合名結束事件

組件應用

<div class="combineDiv" v-if="com_show">
  <Ccombine
    :com_arr="com_arr"
    :max_com="max_com"
    @synfun="syn_handle"
    @fixfun="fix_handle"
    @delfun="del_handle"
    @changename="changename_handle"
  />
</div>

import Ccombine from '@/components/c-combine/index.vue'

components: {
    Ccombine
}

data () {
    return {
        max_com: 5, // 組合最大數量
        com_arr: [{ // 默認組合
            name: '組合6',
            content: {},
            id: 0,
            selected: true,
            edit: false
        }]
    }
}

• import引入——>組件註冊——>使用
• 父——>子傳參：com_arr初始組合、max_com組合的最大數量

事件鈎子

syn_handle (newValue) {
  this.com_arr = newValue
},
// 上一個組合內容固定
fix_handle (motion, last_sel_id, param) {
    // motion:動作'add'/'click'新增或者切換
    // last_sel_id:上一個聚焦的組合id
    // param:'add'對應addcom/'click'對應cur_idx
},
// 刪除某個組合
del_handle (idx, cur_idx) {
    // idx:刪除的組合index，cur_idx刪除的組合Index
},
// 組合改名字
changename_handle (idx, name) {
    // idx:修改名字組合的idx，name:修改後的新組合名
}

• syn_handle：同步處理，子組件裏的組合更改同步到父組件
• fix_handle：固定組合內容處理，新增或者切換的時候固定上一個組合的content
• del_handle：刪除某個組合
• changename_handle：組合改名字

github

完整代碼：https://github.com/littleOneY...