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

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

弹窗组件

适用框架 vue, uniapp

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

px与rpx

<!-- vue -->
<template>
<div v-show="ishide" @touchmove.stop.prevent>
<!-- 遮罩 -->
<div class="mask" :style="maskStyle"></div>
<!-- 内容 -->
<div class="tip" :style="tipStyle">
<slot></slot>
</div>
</div>
</template>
<!-- uniapp -->
<!-- 
<template>
 <view v-show="ishide" @touchmove.stop.prevent>
 <view class="mask" :style="maskStyle"></view>
 <view class="tip" :style="tipStyle">
 <slot></slot>
 </view>
 </view>
</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: '70%'
},
// 设置内容区高度
height: {
type: String,
default: '300px'
},
// 设置内容区圆角
radius: {
type: String,
default: '10px'
},
// 设置内容区底色
bgcolor: {
type: String,
default: '#FFFFFF'
}
},
computed: {
// 遮罩样式
maskStyle() {
return `
z-index:${this.zindex};
background:rgba(0,0,0,${this.opacity});
`
},
// 内容样式
tipStyle() {
return `
width:${this.width};
height:${this.height};
z-index:${this.zindex+1};
border-radius:${this.radius};

`
}
}
}
</script>
<style scoped>
.mask {
position: fixed;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.tip {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style> 

​

以上就是直播平台软件开发，简单易修改的弹框组件， 更多内容欢迎关注之后的文章