vue3 + elementPlus实现select下拉框插入确定和取消按钮。

vue3 + elementPlus实现select下拉框插入确定和取消按钮。_第1张图片

实现思路

Select 选择器 | Element Plus

1、select方法@visible-change这个方法是下拉框出现/隐藏时触发,当显示的时候将两个按钮插入到下拉框里面,是基于原生插入DOM的这种方式;

2、通过vue3 ref获取selectDOM,在获取select的popperPaneRef.$el (select下拉框的DOM),在基于js方法创建div `document.createElement('div')` 而div里面放入两个按钮使用div.appendChild插入按钮;

3、最后将div按钮插入到 popperPaneRef.$el(select下拉框的DOM)里就可以了,在将element-button-mini的css按钮样式复制,添加到原生按钮身上;

4、这里是无法使用el-button这种组件因为不解析,只能使用原生button,为其添加ele的样式;

具体实现看代码 





你可能感兴趣的:(项目中的问题,Vue3,vue.js,前端,javascript)