直播商城源码，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};

`;
}
}
};
</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;

}
</style> 

以上就是直播商城源码，vue 弹窗 惯性滚动 加速滚动， 更多内容欢迎关注之后的文章