更新记录

0.3.1（2024-08-30） 下载此版本

feat:添加圆角开关；添加动画显示选项

0.2.0（2024-08-16） 下载此版本

fix:添加对vue2的支持；进度条圆角

0.1.0（2024-08-01） 下载此版本

上传插件

平台兼容性

uni-app

uni-app x

zjq-progress

• 基于uniapp vue3 纯CSS 的环形进度条

使用

• 导入就行

<zjq-progress :size='400' :target='60' title='进度条' border='20' color='#00ffff'></zjq-progress>

<zjq-progress :size='400' :target='60' border='20' color='#00ffff'>
    <view>我是中间的插槽/view>
</zjq-progress>

关于vue2的使用方式

• 自己改一下原文件的props的引用方式就行

API

Props

solt

• 使用插槽时，会覆盖掉“title”和中间显示的百分比
• 默认样式剧中对齐，大小和进度条大小相同

示例

    <view class="home">
    <view class="home-progress">
        环形进度条
    </view>
    <!-- 默认 -->
    <view class="item">
        <view class="item-title">
            <view>

            </view> # 默认样式<br /># target:进度，number类型<br />
            # color: 进度条颜色“string”类型，默认“red”
        </view>
        <!-- 大小(size)：200rpx,进度(target):0,环形宽度(border):8rpx, -->
        <view class="item-main" style="display: flex; align-items: center; ">
            <zjq-progress :target='10'>

            </zjq-progress>
            <zjq-progress :target='60' title="进度60">

            </zjq-progress>
            <zjq-progress :target='50' color="#00ffff" title="#00ffff">

            </zjq-progress>
        </view>
    </view>
    <view class="item">
        <view class="item-title">
            <view>

            </view> # title: "环形中间"的文字;<br /># border:进度条宽度(默认值8)，单位“rpx”
        </view>
        <view class="item-main" style="display: flex; align-items: center; ">

            <zjq-progress :target='10' title="默认样式">

            </zjq-progress>
            <zjq-progress :target='10' title="宽度20" :border="20">

            </zjq-progress>
        </view>
    </view>
    <view class="item">
        <view class="item-title">
            <view>

            </view> # size: 进度环的大小(默认值200)，单位“rpx”
        </view>
        <view class="item-main" style="display: flex; align-items: center; ">

            <zjq-progress :target='10' title=":size='400'" size="400">

            </zjq-progress>
        </view>
    </view>

    <view class="item">
        <view class="item-title">
            <view>

            </view> # circular: 是否圆角“boolean”类型，默认“true”
        </view>
        <view class="item-main" style="display: flex; align-items: center; ">

            <zjq-progress :target='50' color="#00ffff" title="默认开启" :border="20">

            </zjq-progress>
            <zjq-progress :target='70' color="#00ffff" title="关闭圆角" :border="20" :circular="false">

            </zjq-progress>
        </view>
    </view>
    <view class="item">
        <view class="item-title">
            <view>

            </view> # 插槽演示<br/># hasTransition:是否开启动画,默认关闭
        </view>
        <view class="item-main" style="display: flex; align-items: center; ">

            <zjq-progress :size='400' :target='60' border='50' color='#00ffff'>
                <view>
                    我是中间的插槽
                </view>
            </zjq-progress>
        </view>
    </view>
</view>

    .home {
    // z-index: 10;
    height: 100%;
}

.home-progress {
    text-align: center;
    height: 80rpx;
    padding: 0 40rpx;
    line-height: 80rpx;
    border-bottom: 2px solid;
}

.item {
    margin: 20rpx;
    padding: 20rpx;
    border: 2rpx solid #eee;
    border-radius: 6rpx;

    .item-title {
        display: flex;
        min-height: 40rpx;
        height: auto;
        padding-bottom: 10rpx;

        border-bottom: 2rpx solid;

        >view {
            width: 10rpx;
            min-height: 40rpx;
            height: auto;
            background: red;
            margin-right: 20px;
        }
    }

    .item-main {
        padding: 20rpx 0;
    }
}