BiKing/components/step/step.vue

<template>
	<view class="step-box">
		<!-- :iconBorderRadius="" -->
		<cu-progress ref="cuProgressRef" :value="percent" width="100%" @dragging="dragging" strokeWidth="4rpx" handleSize="18rpx" handleColor="#fff"
			activeColor="#05C175" noActiveColor="#e6e6e6" progressMainH='22rpx'></cu-progress>
		<view class="step-node-nums">
			<view class="num-ratio">0%</view>
			<view class="num-ratio"><text class="t">25%</text></view>
			<view class="num-ratio"><text class="t">50%</text></view>
			<view class="num-ratio"><text class="t">75%</text></view>
			<view class="num-ratio"><text>100%</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			width: {
				type: Number,
				default: 0
			},
			percent: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
		

			};
		},
		watch:{
			// percent:{
			// 	handler(newNum , oldNum){
			// 		if(newNum === 0 && newNum !== oldNum){
			// 			this.$nextTick(() => {
			// 				this.$refs.cuProgressRef.initialNum()
			// 			})
			// 		}
			// 	},
			// 	immediate:true,
			// }
		},
		methods: {
			// 百分比滑动条
			dragging(e) {
				// const num = `${e.value}%`
				this.$emit('update:percent', e.value)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.step-box {
		width: 100%;
		height: 50rpx;
		border-radius: 2rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		::v-deep .cu-handle {
			border: 6rpx solid #05C175;
			background-color: #fff;
		}

		.step-node-nums {
			width: 100%;
			display: flex;
			justify-content: space-between;


			.num-ratio {
				width: 1rpx;
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: center;
				color: #808080;
				line-height: 28rpx;
				position: relative;

				.t {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
				}

				// &:first-child {
				// 	text-align: left;
				// }

				&:last-child {
					text {
						position: absolute;
						right: 0;
					}

				}
			}
		}









	}
</style>