Progress 进度条

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="LineProgress进度条">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" align="center" />
			<zk-progress :percentage="50" />
		</zk-theme>

		<!-- 不显示百分比 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="不显示百分比" align="center" />
			<zk-progress :percentage="70" :show-text="false" />
		</zk-theme>

		<!-- 自定义颜色 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义颜色" align="center" />
			<zk-progress :percentage="70" color="#FF5722" />
			<view class="margin-top">
				<zk-progress :percentage="80" color="#00C48F" />
			</view>
			<view class="margin-top">
				<zk-progress :percentage="90" color="#722ED1" />
			</view>
		</zk-theme>

		<!-- 自定义高度 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义高度" align="center" />
			<zk-progress :percentage="40" :height="4" />
			<view class="margin-top">
				<zk-progress :percentage="40" :height="8" />
			</view>
			<view class="margin-top">
				<zk-progress :percentage="40" :height="12" />
			</view>
		</zk-theme>

		<!-- 条纹效果 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="条纹效果" align="center" />
			<zk-progress :percentage="60" stripe />
			<view class="margin-top">
				<zk-progress :percentage="60" stripe stripe-anim />
			</view>
		</zk-theme>

		<!-- 自定义文字 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义文字" align="center" />
			<zk-progress :percentage="80" text-format="progress" />
			<view class="margin-top">
				<zk-progress :percentage="80" text-format="complete" />
			</view>
			<view class="margin-top">
				<zk-progress :percentage="80" text-format="number" />
			</view>
		</zk-theme>

		<!-- 动态进度 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="动态进度" align="center" />
			<zk-progress :percentage="dynamicValue" />
			<view class="button-group">
				<view class="button-wrapper">
					<zk-button text="-" type="primary" :disabled="dynamicValue <= 0" @click="decrease"
						margin="0 16rpx" />
				</view>
				<view class="button-wrapper">
					<zk-button text="+" type="primary" :disabled="dynamicValue >= 100" @click="increase"
						margin="0 16rpx" />
				</view>
			</view>
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				dynamicValue: 30
			}
		},
		methods: {
			increase() {
				if (this.dynamicValue < 100) {
					this.dynamicValue = Math.min(100, this.dynamicValue + 10)
				}
			},
			decrease() {
				if (this.dynamicValue > 0) {
					this.dynamicValue = Math.max(0, this.dynamicValue - 10)
				}
			}
		}
	}
</script>

<style lang="scss">
	.margin-top {
		margin-top: 24rpx;
	}

	.button-group {
		margin-top: 24rpx;
		flex-direction: row;

		align-items: center;
		display: flex;
	}

	.button-wrapper {
		padding: 0 16rpx;
	}

	/* #ifdef APP-NVUE */
	.button-group {
		width: 662rpx;
	}

	/* #endif */
</style>