129 lines
2.6 KiB
Vue
129 lines
2.6 KiB
Vue
<template>
|
|
<view class="message-popup" :class="{ 'show': config.show }">
|
|
<view class="mask" @click="closeProgress" :class="{ 'show': config.show }"
|
|
:style="{backgroundColor:config.maskBgColor,display:(config.showMask?'':'none')}">
|
|
</view>
|
|
|
|
<view class="progress-content" :style="{backgroundColor:config.contentBgColor}">
|
|
<text
|
|
:style="{color:config.txtColor,display:(config.showText?'':'none')}">{{config.curr}}/{{config.total}}</text>
|
|
<view class="jdWai"
|
|
:style="{borderRadius:config.borderRadius, backgroundColor:config.proBgColor,border:config.proBorder,height:config.height}">
|
|
<view class="jdNei"
|
|
:style="{borderRadius:config.borderRadius,height:config.height,backgroundColor:config.currBgColor,border:config.currBorder,width:(config.curr/config.total*100)+'%'}">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Progress",
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
props: {
|
|
config: {
|
|
type: Object,
|
|
default: () => ({
|
|
show: false, //是否显示
|
|
showMask: true, //是否显示mask
|
|
height:'20px',
|
|
maskBgColor: '#00000000', //mask背景颜色
|
|
contentBgColor: '#121212', //总背景颜色
|
|
showText: true, //是否显示当前进度的文字
|
|
txtColor: '#ffffffde', //文字的颜色
|
|
curr: 0, //当前进度
|
|
total: 100, //总进度
|
|
proBgColor: '#2a2a2a', //进度条底色,
|
|
proBorder: '', //进度条border
|
|
currBgColor: '#bbe600', //当前进度底色
|
|
currBorder: '', //当前进度border
|
|
borderRadius:'10px'
|
|
})
|
|
}
|
|
},methods: {
|
|
closeProgress() {
|
|
|
|
this.$emit('closeProgress');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.message-popup {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.message-popup.show {
|
|
display: block;
|
|
}
|
|
|
|
.p100 {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 0rpx 20rpx;
|
|
}
|
|
|
|
.displayNone {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
|
|
.mask {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 9;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.progress-content {
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
z-index: 10;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.jdWai {
|
|
width: 100%;
|
|
}
|
|
|
|
.jdNei {
|
|
height: 100%;
|
|
|
|
}
|
|
</style> |