直播平台软件开发，简单易修改的弹框组件

弹窗组件

适用框架 vue, uniapp

使用再uniapp 框架中可简单修改标签与尺寸单位后使用

px与rpx

<br><!-- vue --><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"><br><slot></slot><br></div><br></div><br></template><br><!-- uniapp --><br><!-- <br><template><br> <view v-show="ishide" @touchmove.stop.prevent><br> <view class="mask" :style="maskStyle"></view><br> <view class="tip" :style="tipStyle"><br> <slot></slot><br> </view><br> </view><br></template><br> --><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: '70%'<br>},<br>// 设置内容区高度<br>height: {<br>type: String,<br>default: '300px'<br>},<br>// 设置内容区圆角<br>radius: {<br>type: String,<br>default: '10px'<br>},<br>// 设置内容区底色<br>bgcolor: {<br>type: String,<br>default: '#FFFFFF'<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>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>position: fixed;<br>bottom: 0;<br>right: 0;<br>left: 0;<br>top: 0;<br>}<br>.tip {<br>position: fixed;<br>left: 50%;<br>top: 50%;<br>transform: translate(-50%, -50%);<br>}<br></style> 