直播商城原始碼，vue 彈窗 慣性滾動 加速滾動

直播商城原始碼，vue 彈窗 慣性滾動 加速滾動

彈窗基礎元件

新建檔案 components/zwy-popup

<template>
<div v-show="ishide" @touchmove.stop.prevent>
<!-- 遮罩 -->
<div class="mask" :style="maskStyle"></div>
<!-- 內容 -->
<div class="tip" :style="tipStyle"><slot></slot></div>
</div>
</template>
<script>
export default {
props: {
// 控制彈窗顯隱
ishide: {
type: Boolean,
required: true
},
// 設定彈窗層級
zindex: {
type: Number,
default: 99
},
// 設定遮罩透明度
opacity: {
type: Number,
default: 0.6
},
// 設定內容區寬度
width: {
type: String,
default: '100%'
},
// 設定內容區高度
height: {
type: String,
default: '400px'
},
// 設定內容區圓角
radius: {
type: String
},
// 設定內容區底色
bgcolor: {
type: String,
default: 'transparent'
}
},
computed: {
// 遮罩樣式
maskStyle() {
return `
z-index:${this.zindex};
background:rgba(0,0,0,${this.opacity});
`;
},
// 內容樣式
tipStyle() {
return `
width:${this.width};
min-height:${this.height};
z-index:${this.zindex + 1};
border-radius:${this.radius};
background-color:${this.bgcolor};
`;
}
}
};
</script>
<style scoped>
.mask {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.2);
position: fixed;
left: 0;
top: 0;
z-index: 100000;
display: block;
}
.tip {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}
</style>

元件使用

<template>
<div class="exothecium">
<div class="rules" @click="rulesClick">彈窗按鈕</div>
<couponPup :ishide="ishide" @closeClick="closeClick"></couponPup>
</div>
</template>
<script>
import couponPup from '../components/coupon-pup.vue';
export default {
name: 'reduction_lj',
components: {
couponPup
},
data() {
return {
ishide: false
};
},
mounted: function() {},
methods: {
closeClick() {
this.ishide = false;
}
}
};
</script>
<style scoped>
* {
touch-action: pan-y;
}
html,
body {
overflow: hidden;
}
.exothecium {
width: 100%;
height: 100vh;
background: #999;
background-size: 100% 100%;
padding-top: 42px;
/* position: relative; */
}
.rules{
width: 200px;
height: 80px;
background-color: aqua;
}
</style>

以上就是直播商城原始碼，vue 彈窗 慣性滾動 加速滾動， 更多內容歡迎關注之後的文章