业务背景
- 全局使用的查询表单的各种封装,目前需要支持下拉select可以自由配置颜色,与列表中的状态颜色显示一致,提高用户体验
- 需实现如图更直观
思路分析
-
本质是实现ul的li的文本颜色的配置
-
结合本项目业务场景,是使用的本公司自研的基础组件库
-
第一种方法:去修改组件库,使组件库支持配置功能;
-
第二种方法:业务里去二次封装实现,并且兼容全局已经使用过的地方,使得修改最小化、最简单
综合考虑后,由于基础组件库以相对稳定,维护人员并不能及时给予支持,故只能自己去改组件库,提MR,审核等走流程再发版本,周期较长,故采用自己在目前基础组件库支持的内容上,在业务中进行二次封装;
实现思路:一步步思考
- 基础组件库下拉目前不支持给select-option配置style,但是支持配置自定义的class
- 组件无法直接ref拿到动态的select-option
- 借助已经支持的focus事件,对其进行监听
- 用data-color动态传输每个option配置的颜色,用自定义class获取元素
- 用到原生js dom操作的知识啦,还是挺好用的哦,思路打开
关键代码如下
<meg-selectstyle="width: 100%"v-if="colItem.type === FormItemType.SELECT":placeholder="colItem.placeholder || placeholder.select":mode="colItem.mode"v-model="colItem.value":getPopupContainer="colItem.getPopup ? (node) => node.parentNode : null"@focus="handleSelectOption"@change="(e) => {onChange(e, colItem);}"><meg-select-optionv-for="(opt, index) in colItem.options":key="index":value="opt.value":data-color="colItem.statusColorMap && colItem.statusColorMap[Number(opt.value)] || '' "class="select-option-custom-color">{{ opt.label }}</meg-select-option></meg-select>handleSelectOption() {let elements = Array.from(document.getElementsByClassName('select-option-custom-color'));for (let ele of elements) {ele.style.color = ele.dataset.color;}},