zoukankan      html  css  js  c++  java
  • 解决级联选择器滚动下拉框分离问题

    先说一下.addEventListener(“事件”,函数处理,布尔类型)
    第一个参数是事件的类型(比如 “click” 或 “mousedown”)。
    第二个参数是当事件发生时我们需要调用的函数。
    第三个参数是布尔值,指定使用事件冒泡还是事件捕获。此参数是可选的。
    默认值是 false,将使用冒泡传播,如果该值设置为 true,则事件使用捕获传播

    mounted () {//给window添加一个滚动滚动监听事件
    window.addEventListener('scroll', this.handleScroll, true)
    },

    methods: {
    handleScroll () { //改变元素#searchBar的top值
    let top = this.$refs.newConBox.$el.getBoundingClientRect().top
    // 或者通过id获取 document.querySelector('#box').getBoundingClientRect().top
    }
    },
    destroyed () {//离开该页面需要移除这个监听的事件
    window.removeEventListener('scroll', this.handleScroll, true)
    }

    我使用这个监听是修复级联选择器滚动时,弹窗内容分离问题
    解决方法是:
    在 cascader组件中,添加 popper-class="cascaderClass" 添加了一个类名,即级联选择器下拉框的类名

    handleScroll () { //改变元素#searchBar的top值
    // box.clientHeight为输入框的高度
    let top = this.$refs.newConBox.$el.getBoundingClientRect().top + box.clientHeight
    // 或者通过id获取 document.querySelector('#box').getBoundingClientRect().top
    let cascaderClass = document.querySelector('.cascaderClass')
    cascaderClass.style.top = offsetTop + 'px'
    }

  • 相关阅读:
    phpstrom+xdebug+chrome+postman调试工具搭建
    Docker常用命令
    使用nginx+docker配置https负载均衡
    LVS三种模式的区别及负载均衡算法
    ELK Betas 6.0安装及使用
    Excel从低级到中级
    我回来了,哈哈
    刷电信版s710d卡在htc开机画面的解决办法
    基于cocos2d-android-1的FlyppyBird
    利息?hii
  • 原文地址:https://www.cnblogs.com/hellofangfang/p/14838491.html
Copyright © 2011-2022 走看看