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'
    }

  • 相关阅读:
    RabbitMQ(dotnet基本使用)
    SignalR三种使用方式整理比较
    Asp.Net下SignalR的三种实现方式
    多种单例模式实现及区别
    VS/Xamarin Android开发Follow Me(十九)
    VS/Xamarin Android开发Follow Me(十八)
    比较大小的几种方法
    C# 求Π Π/4=1-1/3+1/5-1/7+......+1/(2*n-3)-1/(2*n-1); (n=2000)
    一步一步剖析Dictionary实现原理
    查看.net frameword版本
  • 原文地址:https://www.cnblogs.com/hellofangfang/p/14838491.html
Copyright © 2011-2022 走看看