#插件讨论# 【 niceui-progress进度条（线条形，环状和仪表盘） - NiceUI前端 】层级

是要在页面加弹层之类的吗

刚试了，可以盖住，(●'◡'●)

<template>  
    <view style="margin: 10rpx 0 50rpx;padding:1rpx ;">  
        <view style="color:#333;font-size:40rpx;text-align: center;margin: 20rpx 0 10rpx;">  
            Progress 进度条  
        </view>  
        <view style="color:#6f6f6f;font-size:28rpx;text-align: center;margin: 20rpx 20rpx 10rpx;">  
            用于展示操作进度，告知用户当前状态和预期。  
        </view>  
        <view style="color:#333;font-size:34rpx;text-align: left;margin: 50rpx 20rpx 10rpx;">  
            <view style="margin: 30rpx 0;">线形进度条</view>  
            <niceui-progress type="line" textInside :percentage="percentage1" :color="colorPrimary"></niceui-progress>  
            <niceui-progress type="line" textInside :percentage="percentage1" :color="colorSuccess"></niceui-progress>  
            <niceui-progress type="line" textInside :percentage="percentage1" :color="colorWarning"></niceui-progress>  
            <niceui-progress type="line" textInside :percentage="percentage1" :color="colorError"></niceui-progress>  
            <view style="margin: 30rpx 0;display: flex;justify-content: space-between;">  
                <button @click="draw1">增加</button>  
                <button @click="drawJian1">减少</button>  
            </view>  
        </view>  
        <view style="color:#333;font-size:34rpx;text-align: left;margin: 50rpx 20rpx 10rpx;">  
            <view style="margin: 30rpx 0;">百分比内显</view>  
            <niceui-progress type="line"  :percentage="percentage2" :color="colorPrimary"></niceui-progress>  
            <niceui-progress type="line"  :percentage="percentage2" :color="colorSuccess"></niceui-progress>  
            <niceui-progress type="line"  :percentage="percentage2" :color="colorWarning"></niceui-progress>  
            <niceui-progress type="line"  :percentage="percentage2" :color="colorError"></niceui-progress>  
            <view style="margin: 30rpx 0;display: flex;justify-content: space-between;">  
                <button @click="draw2">增加</button>  
                <button @click="drawJian2">减少</button>  
            </view>  
        </view>  
        <view style="color:#333;font-size:34rpx;text-align: left;margin: 50rpx 20rpx 10rpx;">  
            <view style="margin: 30rpx 0;">环形进度条</view>  
            <view style="display: flex;justify-content: space-between;">  
                <niceui-progress type="circle" :percentage="percentage3" ref="circle1" :color="colorPrimary"></niceui-progress>  
                <niceui-progress type="circle" :percentage="percentage3" ref="circle2" :color="colorSuccess"  
                    :width="120" :strokeWidth="10" :strokeLinecap="butt" :textColor="'red'" :textSize="14" :text="'完成率'"></niceui-progress>  
            </view>  

            <view style="margin: 30rpx 0;display: flex;justify-content: space-between;">  
                <button @click="draw3">增加</button>  
                <button @click="drawJian3">减少</button>  
            </view>  
        </view>  
        <view style="color:#333;font-size:34rpx;text-align: left;margin: 50rpx 20rpx 10rpx;">  
            <view style="margin: 30rpx 0;">仪表盘形进度条</view>  
            <chenzuheng-progress type="dashboard" :percentage="percentage4" ref="dashboard" :color="colorPrimary"></chenzuheng-progress>  
            <view style="margin: 30rpx 0;display: flex;justify-content: space-between;">  
                <button @click="draw4">增加</button>  
                <button @click="drawJian4">减少</button>  
            </view>  
        </view>  
        <view class="mask">  
            <view class="">  
                maskmaskmaskmaskmaskmaskmaskmaskmaskmask  
            </view>  
            <view class="">  
                maskmaskmaskmaskmaskmaskmaskmaskmaskmask  
            </view>  
            <view class="">  
                maskmaskmaskmaskmaskmaskmaskmaskmaskmask  
            </view>  
            <view class="">  
                maskmaskmaskmaskmaskmaskmaskmaskmaskmask  
            </view>  
            <view class="">  
                maskmaskmaskmaskmaskmaskmaskmaskmaskmask  
            </view>  
            <view class="">  
                maskmaskmaskmaskmaskmaskmaskmaskmaskmask  
            </view>  

        </view>  
    </view>  
</template>  

<script>  
    import NiceuiProgress from '@/uni_modules/niceui-progress/components/niceui-progress/niceui-progress.vue'  
    export default {  
        components: {NiceuiProgress},  
        data() {  
            return {  
                percentage1:30,  
                percentage2:60,  
                percentage3:30,  
                percentage3:50,  
                colorPrimary: '#007aff',  
                colorSuccess: '#4cd964',  
                colorWarning: '#f0ad4e',  
                colorError: '#dd524d',  
            }  
        },  
        methods: {  
            draw1(){  
                this.percentage1+=30  
                if(this.percentage1>99){  
                    this.percentage1 = 100  
                }  
            },  
            drawJian1(){  
                this.percentage1-=10  
                if(this.percentage1<1){  
                    this.percentage1 = 0  
                }  
            },  
            draw2(){  
                this.percentage2+=30  
                if(this.percentage2>99){  
                    this.percentage2 = 100  
                }  
            },  
            drawJian2(){  
                this.percentage2-=10  
                if(this.percentage2<1){  
                    this.percentage2 = 0  
                }  
            },  
            draw3(){  
                this.percentage3+=30  
                if(this.percentage3>99){  
                    this.percentage3 = 100  
                }  
                this.$refs.circle1.draw(this.percentage3)  
                this.$refs.circle2.draw(this.percentage3)  
            },  
            drawJian3(){  
                this.percentage3-=20  
                if(this.percentage3<1){  
                    this.percentage3 = 0  
                }  
                //console.log(this.percentage3,'drawJian3-----')  
                this.$refs.circle1.drawJian(this.percentage3)  
                this.$refs.circle2.drawJian(this.percentage3)  
            },  
            draw4(){  
                this.percentage4+=10  
                if(this.percentage4>99){  
                    this.percentage4 = 100  
                }  
                this.$refs.dashboard.draw(this.percentage4)  
            },  
            drawJian4(){  
                this.percentage4-=20  
                if(this.percentage4<1){  
                    this.percentage4 = 0  
                }  
                console.log(this.percentage4,'drawJian4-----')  
                this.$refs.dashboard.drawJian(this.percentage4)  
            },  
        }  
    }  
</script>  

<style lang="scss">  
    button{  
        font-size: 32rpx;  

    }  
    .mask{  
        position: fixed;  
        top: 0;  
        left: 0;  
        width: 750rpx;  
        height: 100vh;  
        z-index: 999;  
        background-color: rgba(0, 0, 0, 0.4);  
        color: #fff;  
    }  
</style>