iView UI Select 选择器 下拉列表跟随滚动条移动
这里记录一个BUG，关于iView UI Select 选择器 下拉列表跟随滚动条移动。
此文章是本人记录BUG以及BUG的解决方法，希望能帮到大家，如果大家有更好的方法请指点。
现象：
解决方法：判断下拉列表 Select 标签 是否在可视区域内，如果不在就让下拉列表 Select 标签 隐藏。 即：display = ‘none’
HTML代码：
<Form-item label="证件类型"><Select v-model="Region" ><Option value="11">工商注册号</Option><Option value="9">组织机构代码</Option><Option value="10">社会统一信用代码</Option><Option value="7">其他证件</Option></Select></Form-item>
min.js 文件
// 计算元素是否在可视区域内 Vue.prototype.isContain= function(dom) {// 参数dom ：要计算的元素const totalHeight = window.innerHeight || document.documentElement.clientHeight;const totalWidth = window.innerWidth || document.documentElement.clientWidth;// 当滚动条滚动时，top, left, bottom, right时刻会发生改变。const {top, right, bottom, left } = dom.getBoundingClientRect();// console.log(top, right, bottom, left )return (top >= 0 && left >= 0 && right <= totalWidth && bottom <= totalHeight);}Vue.prototype.isDisplayFun = function (target, origin) {// 修改下拉列表的状态let _this = this;if(!target.style.display || target.style.display == 'block'){// 判断下拉列表的状态if (!_this.isContain(origin)) {// 计算元素是否在可视区域内 target.style.display = 'none' }} }
test.vue 文件
import _ from 'lodash' // 引入lodash，vue 中自带 lodash，无需下载，直接引入即可export default {mounted() {// 添加浏览器滚动条事件window.addEventListener('scroll', this.scrollChenge, true)},methods: {scrollChenge: _.throttle(function () {// 滚动条事件 + lodash函数节流let mechanismSelectObj = {certificatesType : null, // 证件类型selectDropdown: null, // 证件类型下拉列表}// 查找 "证件类型" 标签 <Form-item label="证件类型"> mechanismSelectObj.certificatesType = document.querySelectorAll('.ivu-select-selection')[0];// 查找 "证件类型下拉列表" 标签 <Select v-model="Region" >mechanismSelectObj.selectDropdown = document.querySelectorAll('.ivu-select-dropdown')[0];// 调用 isDisplayFun 函数， 参数是上面获取的两个元素this.isDisplayFun(mechanismSelectObj.selectDropdown, mechanismSelectObj.certificatesType);}, 500),beforeDestroy() {// 组件销毁之前解除滚动条事件window.removeEventListener('scroll',this.scrollChenge,true);}}
