自定义组件（原创）-组合Ccombine
本组件使用了iview的Icon，可以在全局安装了iview的项目或者部分引入Icon的页面中自由使用。目录效果展示功能描述结构代码逻辑代码组件应用事件钩子github效果展示从左到右依次为：未选中状态、鼠标悬停、选中、添加组合按钮功能描述添加/删除组合点击聚焦组合双击修改组合名称switch上一个组合的内容在添加下一个组合或新组合时不能被清除。您可以设置组合数量的上限。结构代码{{item.name}}
+add 根据editDeterminetheeditstateorthetextdisplaystateselectedDeterminetheselectedstateorunselectedstate逻辑代码//输入组合名称name_input(idx){//console.log('focus')},//输入组合名称input_over(idx,name){this.com_arr[idx].edit=false//console.log('outoffocus')this.$emit('changename',idx,name)this.$emit('synfun',this.com_arr)},name_click(_type,idx){varself=thisclearTimeout(this.timer)if(_type===1){//点击组合if(event.detail===2)returnthis.timer=setTimeout(function(){//console.log('click')letlast_sel_id=0if(isArray(self.com_arr)){self.com_arr.forEach(com=>{if(com.selected)last_sel_id=com.idcom.edit=falsecom.selected=false})self.com_arr[idx].selected=trueself.$emit('fixfun','click',last_sel_id,idx)}},100)}else{//console.log('Doubleclick')this.com_arr[idx].edit=true}this.$emit('synfun',this.com_arr)},//选择组合selcom_handle(idx){if(isArray(this.com_arr)){让最后_sel_id=0this.com_arr.forEach(com=>{if(com.selected)last_sel_id=com.idcom.selected=false})this.com_arr[idx].selected=truethis.$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)letcur_idx=999if(this.com_arr[idx].selected){this.com_arr.splice(idx,1)this.com_arr[0].selected=truecur_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个组合~.~')}elseif(isArray(this.com_arr)){letlast_sel_id=0this.com_arr.forEach(com=>{if(com.选中)last_sel_id=com.idcom.selected=falsecom.edit=false})constid_temp=genID(1)constaddcom={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)}}处理新建组合事件删除组合事件选择组合事件点击或双击组合事件（点击选中/双击重命名）输入组合名称结束事件组件应用
从'@/components/c-combine/index导入Ccombine.vue'components:{Ccombine}data(){return{max_com:5,//最大组合数com_arr:[{//默认组合name:'combination6',content:{},id:0,selected:true,edit:false}]}}importimport-->组件注册-->useparent-->childparameters:com_arr初始组合，max_com组合事件挂钩的最大个数syn_handle(newValue){this.com_arr=newValue},//最后组合的内容fixed_handle(motion,last_sel_id,param){//motion:action'add'/'click'添加或切换//last_sel_id:最后一个Focused组合id//param:'add'对应addcom/'click'对应cur_idx},//删除某个组合del_handle(idx,cur_idx){//idx:删除组合索引，cur_idx删除组合索引},//Change组合名称changename_handle(idx,name){//idx：修改名称组合的idx，name：修改后的新组合名称}syn_handle：同步处理，子组件中的组合变化同步到父组件fix_handle：固定组合内容处理，添加或切换时修复上一个组合的contentdel_handle：删除某个组合changename_handle：更改组合名称github完整代码：https://github.com/littleOneY...
