怎么用vue实现内容可滚动的弹窗效果

这篇文章主要讲解了"怎么用vue实现内容可滚动的弹窗效果"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"怎么用vue实现内容可滚动的弹窗效果"吧！

本文实例为大家分享了vue实现内容可滚动的弹窗效果具体代码，供大家参考，具体内容如下

这是第一种实现方式

效果图：

弹窗代码：

Popup.vue

在Home.vue页面使用弹窗：

解决弹窗滚动，里面的body也跟着滚动问题

在main.js中

//弹出框禁止滑动Vue.prototype.noScroll = function () {  var mo = function (e) { e.preventDefault() }  document.body.style.overflow = 'hidden'  document.addEventListener('touchmove', mo, false,{ passive: false })// 禁止页面滑动} //弹出框可以滑动Vue.prototype.canScroll = function () {  var mo = function (e) {    e.preventDefault()  }  document.body.style.overflow = ''// 出现滚动条  document.removeEventListener('touchmove', mo, false,{ passive: false })}

在页面使用时：

//禁止主页面滑动  this.noScroll()//主页面可滑动  this.canScroll()//还要加上样式：* {  touch-action: pan-y;}

感谢各位的阅读，以上就是"怎么用vue实现内容可滚动的弹窗效果"的内容了，经过本文的学习后，相信大家对怎么用vue实现内容可滚动的弹窗效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！