直播商城源码，vue 弹窗 惯性滚动 加速滚动

直播商城源码，vue 弹窗 惯性滚动 加速滚动

弹窗基础组件

新建文件 components/zwy-popup

 

1

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

​

组件使用

 

1

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

 

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