本组件中应用到了iview的Icon，能够在全局装置了Iview的我的项目或者部分引入了Icon的页面中自在应用。
目录
- 成果展现
- 性能形容
- 构造代码
- 逻辑代码
- 组件利用
- 事件钩子
- github
成果展现
从左到右别离是：未选中状态、鼠标悬浮、选中、增加组合按钮
性能形容
- 增加/删除组合
- 单击聚焦组合
- 双击批改组合名字
- 切换下一个组合或者新增组合时上一个组合内容固定
- 组合不能清空，能够设置组合数量下限
构造代码
<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...