共计 3490 个字符,预计需要花费 9 分钟才能阅读完成。
本组件中应用到了 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…
正文完