国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答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
主站蜘蛛池模板: 精品在线观看免费 | 国产精品系列在线一区 | 国产aaaaa一级毛片无下载 | 欧美黄色网页 | 国产成人乱码一区二区三区在线 | 最新国产小视频在线播放 | 国产精品一区在线观看 | 91在线精品亚洲一区二区 | 欧美日韩性生活 | 国产一级高清视频免费看 | 91频道 | 欧美在线观看不卡 | 亚洲一区综合 | 亚洲精品综合 | 欧美精品一区二区三区久久 | 欧美 亚洲 校园 第一页 | 久久天堂 | 黄色毛片a | 免费中文字幕一级毛片 | 国产精品久久久久久久久99热 | 国产成人精品免费视频大 | 在线观看国产一区二区三区 | 国产成人三级经典中文 | 国产精欧美一区二区三区 | 欧美国产日韩一区二区三区 | 亚洲欧美自拍一区 | 久草精品在线观看 | 日韩综合 | 亚洲伊人国产 | 国产不卡视频在线播放 | 国产成人+综合亚洲+天堂 | 亚洲精品乱码久久久久久v 亚洲精品免费观看 | 国产成人综合久久精品下载 | 精品欧美一区二区三区在线 | 久久国内精品 | 国产特黄视频 | 国产丝袜视频 | 国产精品网站在线进入 | 在线观看免费精品国产 | 久久精品视频一区二区三区 | 国产99视频精品免费观看7 |