c语言combine函数,自定义组件（原创）——组合Ccombine

本组件中使用到了iview的Icon，可以在全局安装了Iview的项目或者局部引入了Icon的页面中自由使用。目录效果展示

从左到右分别是：未选中状态、鼠标悬浮、选中、添加组合按钮功能描述添加/删除组合

单击聚焦组合

双击修改组合名字

切换下一个组合或者新增组合时上一个组合内容固定

组合不能清空，可以设置组合数量上限结构代码

{{item.name}}

+添加

根据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)

}

}处理新增组合事件

删除某个组合事件

选中某个组合事件

单击或双击某个组合事件(单击选中/双击改名)

输入组合名结束事件组件应用

:com_arr="com_arr"

:max_com="max_com"

@synfun="syn_handle"

@fixfun="fix_handle"

@delfun="del_handle"

@changename="changename_handle"

/>

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