<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
        主站蜘蛛池模板: 亚洲日韩精品射精日| 国产一区二区三区免费看| 中文亚洲成a人片在线观看| 一区二区三区精品高清视频免费在线播放| 免费无码又爽又刺激高潮的视频 | 国产日本一线在线观看免费| 91亚洲国产成人久久精品网站| 99爱免费观看视频在线| 久久久久亚洲AV无码观看| 久久福利资源网站免费看| 亚洲永久在线观看| 日韩a级毛片免费视频| 成人a毛片视频免费看| 久久精品国产精品亚洲下载| 黄色网址免费在线观看| 亚洲日本在线观看| 免费无码精品黄AV电影| 三年片在线观看免费观看大全中国| 亚洲精品视频在线看| 久久99免费视频| 亚洲av一本岛在线播放| 日本一道在线日本一道高清不卡免费| 美女视频黄频a免费观看| 国产综合亚洲专区在线| 国产精品成人免费福利| 亚洲av乱码一区二区三区按摩| 亚洲人成网站在线观看青青| 黄网站免费在线观看| 亚洲天堂2016| 亚洲人成色7777在线观看不卡| 免费网站看av片| 亚洲xxxx视频| 亚洲精品你懂的在线观看 | 免费观看亚洲人成网站| 亚洲AV中文无码字幕色三| 国产免费AV片在线播放唯爱网| 一区二区免费在线观看| 亚洲人成777在线播放| 亚洲精品无码AV中文字幕电影网站| 无码少妇精品一区二区免费动态| 亚洲日韩精品国产3区|