|
背景
在公司遇到一个奇怪的需求，用户可以自定义下拉框的内容，也就是说用户看到下拉框里面没有自己喜欢的选项，他可以对已有的选项进行修改，或者直接自己新增；当时感觉还很奇葩，后来想想，也许是为了给用户更高的选择自由度吧，没有你喜欢的选项，你可以自己新建一个😁😁😄。
复制代码
实现原理
这里是vue2 + element-ui为基础
实现方式主要是通过自定义option的方式实现，代码主要分为三块：编辑区、选择区、添加自定义模板区
代码: 目前不支持搜索功能
{{ item.content }}
{{ bottomName }}
/**
* 接收的参数
* @prop materialTitleList:array select数据源
* @prop bottomName:string 自定义标题模板名称
* @prop selLoadingBool:boolean 下拉框的加载状态
* @prop maxlength:number 文字最大长度
* 抛出的事件
* @prop selectOption 选中的option
* @prop updateTemplete 更新当前修改的模板
* @prop deleteItemTitle 删除当前option
* @prop saveTemplate 保存添加的模板
*/
export default {
name: 'customizeSelect',
props: {
materialTitleList: {
type: Array,
default: () => ([])
},
bottomName: {
type: String,
default: ' + 添加自定义标题模板'
},
selLoadingBool: {
type: Boolean,
default: false
},
maxlength: {
type: Number,
default: 35
}
},
data() {
return {
placeholder: '点击“√”或回车保留模板',
value: '',
disableBool: false,
itemId: -1,
inputValue: '',
addCustomTempleteBool: false,
addCustomValue: '',
materialTitleListData: []
};
},
watch: {
materialTitleList: {
handler(val) {
if (val.length === 0) {
// 当没有数据传来时,需要一条 假数据 进行占位
this.materialTitleListData = [{id: -99, content: '--'}];
} else {
this.materialTitleListData = val;
}
},
immediate: true,
deep: true
}
},
methods: {
// 下拉/收起事件
visibleChange(bool) {
if (!bool) {
this.initModify();
}
},
// 选中的option
selectOption(e) {
this.$emit('selectOption', e);
},
// 取消/更新option的修改
updateTemplete(val, id, type) {
if (type !== 'cancle') {
this.$emit('updateTemplete', val, id);
}
this.initModify();
},
// 获取每条数据信息
getMaterialInfo(item) {
this.disableBool = true;
this.itemId = item.id;
this.inputValue = item.content;
},
// 删除当前项
deleteItemTitle(item) {
this.$emit('deleteItemTitle', item);
},
// 自定义模板模块
// 获取自定义模板的值
getCustomValue(e) {
this.addCustomValue = e;
},
// 点击“√”或回车保留模板
saveTemplate() {
this.$emit('saveTemplate', this.addCustomValue);
this.initModify();
},
// 下拉框初始化
initModify() {
this.itemId = -1;
this.addCustomTempleteBool = false;
this.disableBool = false;
this.addCustomValue = '';
}
},
};
.addCustom {
width: 100%;
height: 100%;
line-height: 100%;
}
复制代码
|