vue 解決mintui彈窗彈起來,底部頁面滾動bug問題
經(jīng)過dom層層注釋縮小反饋終于找到問題所在。
問題經(jīng)過
我在彈起彈窗的時(shí)候，設(shè)置了popupVisible為true
然后觸發(fā)了vue的updated生命周期鉤子函數(shù)
然后我在這個(gè)函數(shù)里面做了去this.$refs.container.offsetHeight導(dǎo)致頁面重繪
然后就導(dǎo)致了底部頁面向上滾動
解決辦法
去掉updated函數(shù)里面的重繪方法
補(bǔ)充知識：項(xiàng)目總結(jié)之關(guān)于vue中使用mint-ui的mt-popup出現(xiàn)滾動穿透問題的解決總結(jié)
說實(shí)話，使用Mint-ui這個(gè)ui組件的過程中遇到了很多問題，這個(gè)ui組件問題真多。
先說今天的主題吧，我在使用popup選擇框的時(shí)候和datepicker時(shí)間選擇器的時(shí)候出現(xiàn)了滾動穿透的問題，特別是在ios上面。
找了好多方法，最后同事給出了一個(gè)好的方法，很簡潔，于是就想著總結(jié)下來。
防止?jié)L動穿透 只需加入@touchmove.native.stop.prevent 阻止默認(rèn)根元素的默認(rèn)事件就可以了，native是關(guān)鍵，這個(gè)表示根元素的意思，也就是body或者h(yuǎn)tml
代碼如下：
Popup組件：
<mt-popup
v-model="popupVisible"
position="bottom">
...
</mt-popup>
// 防止?jié)L動穿透 只需加入@touchmove.native.stop.prevent 阻止默認(rèn)根元素的默認(rèn)事件就可以了native是關(guān)鍵，這個(gè)表示根元素的意思，也就是body或者h(yuǎn)tml
<mt-popup
v-model="popupVisible"
position="bottom"
@touchmove.native.stop.prevent>
...
</mt-popup>
注意當(dāng)mt-popup中還有div等子元素的時(shí)候，一定要注意，這個(gè)時(shí)候可能會有一些問題，會出現(xiàn)mt-popup這個(gè)元素也滾動不了的情況，所以說如果mt-popup本身不需要滾動的話，加了@touchmove.native.stop.prevent，底部頁面就不會跟著滑動，如果mt-popup里面有滾動條需要滾動的話，可能就滾動不了，這個(gè)時(shí)候需要采取常規(guī)方法了，如下：
// 解決方式，通過監(jiān)聽popupVisible變量,在彈窗出現(xiàn)后禁止body節(jié)點(diǎn)touchMove事件，彈窗消失后恢復(fù)body節(jié)點(diǎn)的touchMove事件
//html 如下
<mt-popup
v-model="popupVisible"
position="bottom">
...
</mt-popup>
// js 如下
const handler = function(e) {
e.preventDefault();
}
// vue實(shí)例內(nèi)
watch: {
popupVisible: function (val) {
if(val) {
document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
} else {
document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, { passive: false });
}
}
}
Datetime Picker：
<mt-datetime-picker
ref="picker"
type="time"
v-model="pickerValue"
@touchmove.native.stop.prevent>
</mt-datetime-picker>
對于時(shí)間組件加了@touchmove.native.stop.prevent，選擇時(shí)間滾動的時(shí)候底部頁面就不會跟著滾動了，很完美。
@touchmove.native.stop.prevent可以使我們省好多事，用起來吧！
以上這篇vue 解決mintui彈窗彈起來,底部頁面滾動bug問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中使用sass實(shí)現(xiàn)換膚功能，實(shí)現(xiàn)此功能用到了三個(gè)主要文件（base.scss、mixin.scss、varibale.scss）,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue中使用ueditor富文本編輯器的相關(guān)資料,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了vue計(jì)算屬性computed的使用方法,結(jié)合實(shí)例形式分析了vue計(jì)算屬性computed的基本用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
Vue-drag-resize 拖拽縮放插件的使用(簡單示例)
本文通過代碼給大家介紹了Vue-drag-resize 拖拽縮放插件使用簡單示例,代碼簡單易懂，非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
element?ui?就是基于vue的一個(gè)ui框架,該框架基于vue開發(fā)了很多相關(guān)組件,方便我們快速開發(fā)頁面,餓了么前端團(tuán)隊(duì)基于vue進(jìn)行開發(fā)并且進(jìn)行了開源?element?ui?中提供全部都是封裝好組件,本文給大家介紹Element?UI安裝全過程,感興趣的朋友一起看看吧2024-01-01
在一些網(wǎng)站經(jīng)?？梢钥吹角袚Q語言包,將網(wǎng)站轉(zhuǎn)化成多種語言版本的情況,下面這篇文章主要給大家介紹了關(guān)于vue中i18n的安裝與幾種使用方式的相關(guān)資料,需要的朋友可以參考下2022-09-09
在 Vue 中,嵌套路由和 Element Plus 的 Menu 組件是構(gòu)建復(fù)雜單頁面應(yīng)用（SPA）時(shí)的常用組合,通過嵌套路由,可以實(shí)現(xiàn)多級頁面結(jié)構(gòu),以下是結(jié)合 Vue 嵌套路由和 Element Plus Menu 的各種用法和場景的詳細(xì)介紹,需要的朋友可以參考下2025-01-01
SVG（Scalable?Vector?Graphics）可縮放矢量圖形，是一種用于描述基于二維的矢量圖形的?XML?標(biāo)記語言，其基本矢量顯示對象包括矩形、圓、橢圓、多邊形、直線、任意曲線等，還能顯示文字對象和嵌入式外部圖像2023-02-02
這篇文章主要介紹了vue3如何在setup中獲取DOM元素問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue2.0實(shí)戰(zhàn)之使用vue-cli搭建項(xiàng)目（2）
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)戰(zhàn)第二篇使用vue-cli搭建項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03