直播平臺軟體開發，簡單易修改的彈框元件

直播平臺軟體開發，簡單易修改的彈框元件

彈窗元件

適用框架 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};
background-color:${this.bgcolor};
`
}
}
}
</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>

以上就是直播平臺軟體開發，簡單易修改的彈框元件， 更多內容歡迎關注之後的文章