vue實現(xiàn)內(nèi)容可滾動的彈窗效果
更新時間：2021年09月05日 16:44:12 作者：知命者夏洛特
這篇文章主要為大家詳細介紹了vue實現(xiàn)內(nèi)容可滾動的彈窗效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)內(nèi)容可滾動的彈窗效果具體代碼，供大家參考，具體內(nèi)容如下
這是第一種實現(xiàn)方式
效果圖：
彈窗代碼：
Popup.vue
<template lang="html">
<div v-if="show" class="modal-bg" @click="closeModal">
<div class="modal_con">
<div class="modal_content">
<div class="modal-container">
<div class="modal_main">
<p class="modal-header">{{dataList.title}}</p>
<div class="rules_text">
<p
v-for="(item, index) in dataList.rules"
class="rules_txt"
:key="index"
>
{{ item }}
</p>
</div>
</div>
</div>
<div class="footer_rules">
<div class="tips"></div>
<div class="rules_button">
<div class="button" @click="closeModal">
<p class="button_text">我知道了</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Popup',
props: {
show: {
type: Boolean,
default: false
},
},
data () {
return {
dataList: {
rules: [
'1.這是第一條數(shù)據(jù)啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
'2.這是第二條數(shù)據(jù)啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
'3.這是第三條數(shù)據(jù)啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
'4.這是第四條數(shù)據(jù)啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊'
],
reward: [
'1.活動規(guī)則第一條數(shù)據(jù)數(shù)據(jù)數(shù)據(jù)數(shù)據(jù)',
'2.活動規(guī)則第二條數(shù)據(jù)數(shù)據(jù)數(shù)據(jù)',
'2.活動規(guī)則第三條數(shù)據(jù)數(shù)據(jù)數(shù)據(jù)'
]
}
}
},
methods: {
closeModal () {
this.$emit('closeModal')
},
}
}
</script>
<style lang="css" scoped>
.modal_con {
width: 80%;
height: 287px;
background: #ffffff;
overflow: hidden;
margin: 0 auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 8px;
}
.modal_content {
height: 100%;
background-color: #fff;
}
.modal-bg {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.modal-container {
height: 78%;
text-align: center;
display: flex;
flex-direction: column;
overflow-y: scroll;
/* ios需要下面這個屬性 */
-webkit-overflow-scrolling: touch;
}
.rules_txt {
font-size: 15px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
text-align: justify;
color: #666666;
padding: 0 20px;
margin-top: 8px;
margin-bottom: 0;
}
.rules_txt:last-child {
padding-bottom: 40px;
}
.modal-header {
font-size: 17px;
font-family: PingFang, PingFang-SC;
font-weight: bold;
text-align: center;
color: #333333;
margin: 0;
padding-top: 20px;
}
.reward_title {
font-size: 17px;
font-family: PingFang, PingFang-SC;
font-weight: bold;
text-align: center;
color: #333333;
padding: 0;
margin-top: 14px;
margin-bottom: 6px;
}
.footer_rules {
width: 100%;
height: 22%;
position: absolute;
bottom: 0;
}
.tips {
/* width: 100%;
opacity: 0.6;
height: 49px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), #ffffff);
text-align: center;
line-height: 49px;
font-size: 18px; */
}
.rules_button {
width: 100%;
background: #ffffff;
padding-bottom: 20px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
.button {
width: 90%;
display: flex;
justify-content: center;
align-content: center;
background: linear-gradient(270deg, #1283ff, #50a3ff);
border-radius: 4px;
text-align: center;
margin: 0 auto;
}
.button_text {
font-size: 15px;
font-family: PingFang, PingFang-SC;
font-weight: SC;
color: #ffffff;
display: flex;
justify-content: center;
align-content: center;
margin: 0;
padding: 12px 0;
}
.rules_con {
padding-bottom: 80px;
}
</style>
在Home.vue頁面使用彈窗：
<!-- 活動規(guī)則彈窗 -->
<template>
<div>
<div @click="clickPopup">
<span>點擊彈出彈窗</span>
</div>
<Popup
v-show="isRulesShow"
@closeModal="isRulesShow = false"
:show="isRulesShow"
>
</Popup>
</div>
</template>
<script>
import Popup from './Popup'
export default {
name:"Home",
components: {
Popup
},
data () {
return {
isRulesShow:flase
}
},
watch: {
isRulesShow (v) {
if (v) {
//禁止主頁面滑動方法在main.js
this.noScroll()
} else {
//主頁面可滑動
this.canScroll()
}
},
},
methods:{
//活動規(guī)則彈窗
clickPopup () {
this.isRulesShow = true
},
}
}
</script>
<style lang="scss" scoped>
* {
touch-action: pan-y;
}
</style>
解決彈窗滾動，里面的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 = ''// 出現(xiàn)滾動條
document.removeEventListener('touchmove', mo, false,{ passive: false })
}
在頁面使用時：
//禁止主頁面滑動
this.noScroll()
//主頁面可滑動
this.canScroll()
//還要加上樣式：
* {
touch-action: pan-y;
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文給大家分享vue自定義組件的四種方式，通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2020-02-02
這篇文章主要介紹了vue實現(xiàn)點擊選中取消切換，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vue-cli3.x + axios 跨域方案踩坑指北，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
這篇文章主要為大家詳細介紹了Vue2實現(xiàn)自適應屏幕大小的兩種方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
這篇文章主要介紹了徹底揭秘keep-alive原理(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
Vue中的Slot對于編寫可復用可擴展的組件是再合適不過了,下面這篇文章主要給大家介紹了關于Vue插槽slot詳細介紹的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細介紹了Vue3響應式核心之reactive的相關知識，文中的示例代碼講解詳細，對我們學習Vue3有一定的幫助，需要的可以參考一下2023-04-04
這篇文章主要介紹了Vue使用正則校驗文本框為正整數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue.js給動態(tài)綁定的radio列表做批量編輯的方法
下面小編就為大家分享一篇vue.js給動態(tài)綁定的radio列表做批量編輯的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
日歷在很多地方都可以使用的到，本文主要介紹了vue3日歷控件的具體實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02