小伙伴一个大胆的想法写出创意的组件，但又碰见无奈的bug
源码：
https://github.com/sunzsh/vue-el-demo/blob/master/src/views/select-close.vue
Demo：
给大家看个好玩的
这个小伙伴竟然把分页的组件
放到了el-select里边儿
最终做出一个这样的效果
然后他什么问题呢
大家看啊
他在里边选择这个条数的时候
注意看啊
整个这个下拉框就关闭了
他想做到的就是我选择里边的条数啊
只是这个关闭
整个这个下拉框还保持原样
那问题的原因其实很好理解啊
因为他点了下边这个位置
相当于点击了这个
整个这个下拉框的外部
他就关闭了
所以呢我们先来看一下下拉框
里圆嘛我们点到el-select里边
这里有个v-click-outside
他在调用这个handleClose
就是说：当点击外部的时候调这个方法
我们先来看一下
这个方法就很简单
做了一个visible
就是说：visible就是这个东西
让它隐藏掉
那我们就来尝试把这个方法先替换掉
我们在这个mouned的里边
我下面做了一个REF哈
我们先测试一下this.$refs.sel.handleClose
等于一个空方法（先）
好我们来试一下刷新
大家看我现在点外部
他怎么也不关了
这样他就不关闭了
那接下来怎么做呢
我们不想让他一直不关闭
其实是点这里边的时候不关闭
也就是说
里边这个下拉框展开的时候
他不关闭
所以呢
我们要去找到里边这个下拉框
所以呢
我们先给这个分页组件再设一个REF
然后我们在这里边做一个打印
打印谁呢
就打印刚才这个page
好我们来试一下
展开，注意看下面打印
这个page
然后我们去找到
大家看它有个children
就是整个这个分页条的组件
它里边分了好几个组件
然后我们看一下哪个是下拉框的
这个
看是这个
然后呢
注意它里边还有一个children在这里
这个children的第0个元素
它才是真正的这个el-select
所以呢我们要找到这个组件
那怎么写呢就是
就this.$refs
然后$children.find...item.$el.classList.contains
把这个换成(.el-pagination__sizes)这个样式
然后我们找到这个组件
之后呢注意我们在这个find后边
还要点它的children
刚才我们说了
它这里边的第零个组件
才是那个下拉框（分页条中的下拉框）
然后我们再接收一下
我们叫pageSizeSelect
好我们打印这个
我们再试一下啊
展开，看这~ 这有了
这是那个下拉框
然后打印它的什么呢
刚才说了
在下拉框的源码里边
他控制他是否隐藏的时候
他有一个属性是这个
visible
在这里
所以呢
我们在这先打印它的visible属性
再测一下
false
true对吧
所以它就简单了
我们就看这个属性
只有这个属性是false的时候
我们才有给它关闭if
好我们在这怎么做关闭呢
我们在前面要把这个方法先备份一下
_handleClose
等于this.
就这个方法
然后呢
我们在这把替换成我们自己的了
这个带下划线的就是它原来的方法
我们需要在这给他调一下
原来这个close
就可以了
我们再来试一下
刷新
大家看 这样就可以了
最后更新于
这有帮助吗？