监控el-select的出现/显隐，进而控制滚动条

最新推荐文章于 2024-07-29 09:38:22 发布

什么时候得心应手

最新推荐文章于 2024-07-29 09:38:22 发布

阅读量797

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_45739770/article/details/126013061

版权

本文介绍了一个使用Vue.js实现的可搜索、可清除的选择框组件。通过监听`visible-change`事件来控制页面滚动条显示状态，当选择框显示时隐藏滚动，隐藏时恢复。该组件结合了`el-select`和`el-option`，提供了筛选和清空选项的功能。

摘要由CSDN通过智能技术生成

HTML

<el-select placeholder="请选择" v-model="val" filterable clearable"
     @visible-change="visibleChange">
     <el-option v-for="(item, i) in businessNameList" :value="item" :label="item" :key="i"></el-option>
   </el-select>

方法：出现则为 true，隐藏则为 false

visibleChange(visible) {
    visible ? this.show() : this.hide()
  },
  show() {
    document.querySelector('.l-body').style.overflow = 'hidden'
  },
  hide() {
    document.querySelector('.l-body').style.overflow = 'scroll'
  }