已解決430363個問題，去搜搜看，總會有你想問的

vue怎么監聽元素尺寸變化？

首頁猿問 vue怎么監聽元素尺寸變化？

vue怎么監聽元素尺寸變化？

JavaScript

海綿寶寶撒 2019-01-04 22:21:24

頁面上有canvas元素，同時頁面是百分比布局的。所以頁面的尺寸會變化，canvas需要響應重繪。本來監聽onresize方法可以重繪，但是頁面還有其他操作，比如隱藏部分元素、全屏等。所以能不能直接監聽canvas的父層元素canvas-wrap的尺寸來重繪呢？<div id="canvas-wrap"> <canvas></canvas></div>

查看完整描述

1 回答

鳳凰求蠱

TA貢獻1825條經驗獲得超4個贊

css-element-queries
比較成熟的解決方案

當然更簡單的可以自己寫個指令進行輪詢

Vue.directive('resize', {
    bind(el, binding) {      let width = '', height = '';      function get() {        const style = document.defaultView.getComputedStyle(el);        if (width !== style.width || height !== style.height) {
          binding.value({width, height});
        }
        width = style.width;
        height = style.height;
      }

      el.__vueReize__ = setInterval(get, 200);
    },
    unbind(el) {
      clearInterval(el.__vueReize__);
    },
  });

使用方式

<div id="canvas-wrap" v-resize="redraw">
    <canvas></canvas></div>

這樣輪詢到div的width,height發生變化就會觸發redraw事件了，directive是隨手寫的，測了下有效，沒實用過,只提供個思路

反對回復 2019-01-04

1 回答
0 關注
6220 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

vue怎么監聽元素尺寸變化？

vue怎么監聽元素尺寸變化？

1 回答

添加回答

vue怎么監聽元素尺寸變化？

vue怎么監聽元素尺寸變化？