<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        VueJs監聽window.resize方法示例

        來源:懂視網 責編:小采 時間:2020-11-27 22:21:38
        文檔

        VueJs監聽window.resize方法示例

        VueJs監聽window.resize方法示例:Vuejs 本身就是一個 MVVM 的框架。 但是在監聽 window 上的 事件 時,往往會顯得 力不從心。 比如 這次是 window.resize 恩,我做之前也是百度了一下。看到大家伙都為這個問題而發愁。 問題: 今天我也 遇到了這樣一個問題, 是關于canvas 自適應。
        推薦度:
        導讀VueJs監聽window.resize方法示例:Vuejs 本身就是一個 MVVM 的框架。 但是在監聽 window 上的 事件 時,往往會顯得 力不從心。 比如 這次是 window.resize 恩,我做之前也是百度了一下。看到大家伙都為這個問題而發愁。 問題: 今天我也 遇到了這樣一個問題, 是關于canvas 自適應。

        Vuejs 本身就是一個 MVVM 的框架。

        但是在監聽 window 上的 事件 時,往往會顯得 力不從心。

        比如 這次是 window.resize

        恩,我做之前也是百度了一下??吹酱蠹一锒紴檫@個問題而發愁。

        問題: 今天我也 遇到了這樣一個問題, 是關于canvas 自適應。 根據窗口的變化去變化 canvas 的寬度

        備注: 重要的問題說三遍 解決 框架內的bug 先說 框架 版本 版本 版本 (這里用的 Vue 2.x 、ES6)

        解決方案:

        第一步: 先在 data 中去 定義 一個記錄寬度是 屬性

        data: {
         screenWidth: document.body.clientWidth // 這里是給到了一個默認值 (這個很重要)
        }
        

        第二步: 我們需要 講 reisze 事件在 vue mounted 的時候 去掛載一下它的方法

         mounted () {
         const that = this
         window.onresize = () => {
         return (() => {
         window.screenWidth = document.body.clientWidth
         that.screenWidth = window.screenWidth
         })()
         }
         }
        

        第三步: watch 去監聽這個 屬性值的變化,如果發生變化則講這個val 傳遞給 this.screenWidth

         watch: {
         screenWidth (val) {
         this.screenWidth = val
         }
         }

        第四步:優化 因為 頻繁 觸發 resize 函數,導致頁面很卡的 問題

         watch: {
         screenWidth (val) {
         if (!this.timer) {
         this.screenWidth = val
         this.timer = true
         let that = this
         setTimeout(function () {
         // that.screenWidth = that.$store.state.canvasWidth
         console.log(that.screenWidth)
         that.init()
         that.timer = false
         }, 400)
         }
         }
         }

        最后一步: 去看看你想要的結果吧~

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        VueJs監聽window.resize方法示例

        VueJs監聽window.resize方法示例:Vuejs 本身就是一個 MVVM 的框架。 但是在監聽 window 上的 事件 時,往往會顯得 力不從心。 比如 這次是 window.resize 恩,我做之前也是百度了一下??吹酱蠹一锒紴檫@個問題而發愁。 問題: 今天我也 遇到了這樣一個問題, 是關于canvas 自適應。
        推薦度:
        標簽: 方法 VUE js
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 在线观看亚洲人成网站| 亚洲成人一区二区| 麻豆亚洲AV永久无码精品久久 | 亚洲人6666成人观看| 最近2022中文字幕免费视频| 亚洲av中文无码乱人伦在线咪咕 | 亚洲国产91精品无码专区| 深夜特黄a级毛片免费播放| 免费成人午夜视频| 国产97视频人人做人人爱免费| 国产免费观看黄AV片| 国产精品免费视频观看拍拍| 亚洲国产精品一区二区第一页 | 怡红院免费全部视频在线视频| 亚洲国语精品自产拍在线观看| 最近免费最新高清中文字幕韩国| 亚洲精品**中文毛片| 成人毛片视频免费网站观看| 特a级免费高清黄色片| 国产aⅴ无码专区亚洲av| 99久久久国产精品免费无卡顿| 亚洲熟女综合色一区二区三区| 免费一级毛片一级毛片aa| 成在线人视频免费视频| 亚洲成人福利在线| 在线免费观看国产视频| 亚洲免费无码在线| 亚洲国产视频网站| 免费国产a国产片高清| 午夜精品射精入后重之免费观看| 成人亚洲国产va天堂| 丝袜熟女国偷自产中文字幕亚洲| 美丽的姑娘免费观看在线播放| 久久亚洲精品无码gv| 亚洲国产成人一区二区三区| 最近最新的免费中文字幕| 一级做a爰性色毛片免费| 91亚洲国产成人久久精品| 日本中文一区二区三区亚洲| 91麻豆国产免费观看| 羞羞漫画页面免费入口欢迎你|