antdv select下拉菜单自由扩展—添加输入框的使用问题

背景
antdv select 官方使用dropdownRender对下拉菜单进行自由扩展，
为了解决点击 dropdownRender 里的内容浮层关闭的问题，官方建议添加preventDefault，但是这样扩展内容里的输入框无法聚焦

一开始采取的方案是手动给自定义的输入框focus事件，但是基于页面只会有一个focus的原则，会因此触发select的输入框blur，反而导致下拉菜单收起，最后还是采取手动控制select的open属性来解决了问题

解决思路

在select上添加一个透明的div作为select替身，只用来控制open，这样不用调用select组件的blur和focus，避免和原组件的处理有冲突
选中选项（单选时）或者点击select控件外的地方操控open = false (dropdownRender处阻止冒泡stopPropagation，这样便于监听除下拉选项的全局事件)

实现效果

具体代码如下
selectInput.vue

<template><div class="select-wrapper"><a-select default-value="lucy" style="width: 300px" dropdownClassName="dropdown-class-name" placeholder="请选择" :open="open" @select="selectOption" :class="{'ant-select-open': open}" option-label-prop="label":filter-option="filterOption"show-search><div slot="dropdownRender" slot-scope="menu" @click="(e) => {e.stopPropagation()}"><v-nodes :vnodes="menu" /><a-divider style="margin: 4px 0" /><div style="padding: 4px 8px; cursor: pointer"><a-input class="input-txt" v-model="value" placeholder="请输入" allowClear @pressEnter="addItem" /></div></div><a-select-option v-for="item in items" :key="item" :value="item" :label="item">{{ item }}</a-select-option></a-select><!--原来的，因为有遮罩的div导致不能使用自带的搜索和删除<div class="select_overlap" @mousedown="openSelect"></div>--><!--最新方案，展开后隐藏遮罩即可使用组件本身的功能--><div v-show="!open" class="select_overlap" @mouseup="openSelect"></div></div>
</template>
<script>
export default {components: {VNodes: {functional: true,render: (h, ctx) => ctx.props.vnodes}},data: () => ({ items: ['jack', 'lucy'], value: '', open: false, clickHandle: null }),methods: {addItem() {this.items.push(this.value)},openSelect() {this.open = !this.open},selectOption() {// 单选时设置this.open = false},filterOption(input, option) {return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0},},mounted() {this.clickHandle = (e) => {if (e.target && 'className' in e.target && this.open) {const className = e.target.className;if (className.indexOf('select_overlap') === -1) {this.open = false}} else {this.open = false}}document.body.addEventListener('click', this.clickHandle)},beforeDestroy() {if (this.clickHandle) {document.body.removeEventListener('click', this.clickHandle)this.clickHandle = null}}
}
</script>

selectInput.less

.select-wrapper {position: relative;.select_overlap {cursor: pointer;height: 32px;width: 300px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;}
}

antdv select下拉菜单自由扩展—添加输入框的使用问题相关推荐

html表单中动态添加下拉框,antd Select下拉菜单动态添加option里的内容操作
antd Select下拉菜单动态添加option里的内容,通过form表单绑定select选中的值提供一个公共的方法,每次只需去调用这个方法就行了 //这里是示例数据格式 let giftScop ...
CMS可视化项目-iframe嵌套 token Object.keys(data).map()遍历对象包数组的数据 select下拉菜单
iframe嵌套单页面 iframe是一个行内块元素,如果希望改变它的位置就需要转块级元素 <style>/* iframe是一个行内块元素,如果希望改变它的位置就需要转块级元素 */if ...
html 下拉框字体,怎么把select下拉菜单里的文字设置成左右滚动效果
原标题:怎么把select下拉菜单里的文字设置成左右滚动效果希望用marquee标签来设置字体滚动,代码是下面这样写的,但是没有效果,字体还是不会滚动,应该怎么来写,才会实现这个效果呢? " ...
谷歌浏览器无法选select_去除谷歌浏览器表单边框特效和select下拉菜单背景
01 02 textarea {resize:none;} 然后就是这个谷歌会自动加背景的问题: 这是谷歌浏览器内核特有.用:-webkit-appearance:none 解决. 附:sele ...
html下拉select美化,美化select下拉菜单
默认的select下拉菜单不容易美化,很多UI是无法通过css更改的,所以要美化先更改结构,下面介绍的美化插件尽管代码各异,但大部分都将默认的下拉菜单转化成样式可控的元素,例如div.ul.span等 ...
html切换下拉菜单改变页面,通过select下拉菜单改变页面内容
web前端使用技巧:通过select下拉菜单改变页面内容方法一: function changeTable(){ var tabIndex = document.getElementById(&qu ...
html表单下拉美化教程,html5和css3炫酷select下拉菜单美化效果
html5和css3炫酷select下拉菜单美化效果发布日期:2015-10-20 11:11 来源: 标签: 网页技术 CSS教程 html5+css3 select下拉菜单美化这是一款使用ht ...
select下拉菜单美化简单美化效果
默认状态下的select下拉菜单简直是丑爆了,所以下面就介绍一下一个简单的方式对select下拉菜单进行美化,下面就是一段这样的代码实例,当然也不够美观,这里只是提供一种美化的思路,在实际应用中可以进 ...
select 下拉菜单Option对象使用add(elements,index)方法动态添加
2019独角兽企业重金招聘Python工程师标准>>> 原生js 的add函数为下拉菜单增加选项 1.object.add(oElement [, iIndex]) index 可选 ...

antdv select下拉菜单自由扩展—添加输入框的使用问题

antdv select下拉菜单自由扩展—添加输入框的使用问题相关推荐

最新文章

热门文章