Custom component (original) – combined ccombine

Time:2021-4-21

IView icon is used in this component, which can be freely used in the project with global installation of iView or the page with local introduction of icon.

catalog

Effect display

Custom component (original) - combined ccombine

From left to right: unselected status, mouse hover, selected, add combination button

Function description

  1. Add / remove combinations
  2. Click focus group
  3. Double click to modify the combination name
  4. When switching to the next combination or adding a new combination, the content of the previous combination is fixed
  5. Combination cannot be emptied. You can set the maximum number of combinations

Structure code

<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 =" combination name "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 () "> + add < / button >
    </div>
  </div>
</template>
  • Determine the editing status or text display status according to edit
  • Selected determines whether the state is selected or not

Logic code

//Enter the combination name
name_input (idx) {
  //  console.log ('focus')
},
//  Combination name input completed
input_over (idx, name) {
  this.com_arr[idx].edit = false
  //  console.log ('out of focus')
  this.$emit('changename', idx, name)
  this.$emit('synfun', this.com_arr)
},
name_click (_type, idx) {
  var self = this
  clearTimeout(this.timer)
  if (_ Type = = 1) {// click a combination
    if (event.detail === 2) return
    this.timer = setTimeout(function () {
      //  console.log ('click ')
      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 ('double click ')
    this.com_arr[idx].edit = true
  }
  this.$emit('synfun', this.com_arr)
},
//Select a combination
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)
  }
},
//  Delete a combination
close_com (idx) {
  if (this.com_arr.length === 1) {
    this.$ Message.warning ('combination can't be emptied-_ -')
  } else {
    Alert ('delete '+ (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)
  }
},
//New combination
addcom_handle () {
  if (this.com_arr.length === this.max_com) {
    this.$ Message.warning ('up to 5 combinations can be added ~. ~ ')
  } 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: 'double click to 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)
  }
}
  • Handling new combination events
  • Delete a composite event
  • Select a composite event
  • Click or double-click a composite event (click to select / double-click to rename)
  • Enter a combination name to end the event

Component application

<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 :  five , //  Maximum number of combinations
        com_ Arr: [{// default combination
            Name: 'combination 6',
            content: {},
            id: 0,
            selected: true,
            edit: false
        }]
    }
}
  • Import import > component registration > use
  • Father > son reference: com_ Initial combination of arr and Max_ The maximum number of COM combinations

event hook

syn_handle (newValue) {
  this.com_arr = newValue
},
//The last combination is fixed
fix_handle (motion, last_sel_id, param) {
    //Motion: adding or switching actions' Add '/'click'
    // last_ sel_ ID: last focused combination ID
    //Param: 'Add' corresponds to addcom /'click 'corresponds to cur_ idx
},
//Delete a combination
del_handle (idx, cur_idx) {
    //IDX: deleted combination index, cur_ IDX deleted composite index
},
//Change the name by combination
changename_handle (idx, name) {
    //IDX: modify the IDX of the name combination, name: the new combination name after modification
}
  • syn_ Handle: synchronous processing, the combination changes in the child component are synchronized to the parent component
  • fix_ Handle: fixed combination content processing. Fixed the content of the previous combination when adding or switching
  • del_ Handle: delete a combination
  • changename_ Handle: change the name

github

Complete codehttps://github.com/littleOneY…