vue 里 onresize 事件被覆盖,以及怎么实现 resize 防抖、移除 resize 事件?

简介: vue 里 onresize 事件被覆盖,以及怎么实现 resize 防抖、移除 resize 事件?

onresize 事件被覆盖

采用 window.addEventListener('resize', func) 监听实现



移除 resize 事件

destroyed() {
  window.removeEventListener('resize', this.func);
},



实现 resize 防抖

安装 npm i throttle-debounce 库,实现如下

// 节流-防抖
import { debounce } from 'throttle-debounce';
export default {
  mounted() {
      this.func();
      window.addEventListener('resize', this.func);
  },
  methods: {
    func: debounce(400, false, function() {
      // 业务代码
    }),
  }
}
目录
相关文章
|
1天前
|
存储 JavaScript
Vue当前时间与接口返回时间的判断
Vue当前时间与接口返回时间的判断
7 0
|
1天前
|
JavaScript
vue生成动态表单
vue生成动态表单
6 0
|
1天前
|
JavaScript 前端开发
Vue生成Canvas二维码
Vue生成Canvas二维码
6 0
|
1天前
|
JavaScript
vue项目切换页面白屏的解决方案
vue项目切换页面白屏的解决方案
5 0
|
1天前
|
JavaScript 前端开发 开发者
new Vue() 发生了什么
new Vue() 发生了什么
8 1
|
1天前
|
JavaScript 容器
使用Vue写一个日期选择器
使用Vue写一个日期选择器
9 1
|
1天前
|
JavaScript
Vue 中如何模块化使用 Vuex
Vue 中如何模块化使用 Vuex
5 0
|
1天前
|
JavaScript 应用服务中间件 nginx
vue中404解决方法
vue中404解决方法
3 0
|
1天前
|
JavaScript 前端开发
vue中nextTick使用以及原理
vue中nextTick使用以及原理
5 0
|
1天前
|
JavaScript
vue实现多个el-form表单提交统一校验的2个方法
vue实现多个el-form表单提交统一校验的2个方法
5 0