VUE3实用组件开发合集三：进度条组件

最新推荐文章于 2024-05-14 20:45:50 发布

军军君01

最新推荐文章于 2024-05-14 20:45:50 发布

阅读量3.1k

点赞数

分类专栏： # VUE3实用组件开发合集文章标签：动画 vue.js 进度条 vue3 前端

本文链接：https://blog.csdn.net/m0_37631110/article/details/125825999

版权

VUE3实用组件开发合集专栏收录该内容

3 篇文章 4 订阅

订阅专栏

实现各种进度条，正常进度条、圆形进度条、分步进度等各种进度条组件，并添加特定的样式效果。

一、效果预览：

在这里插入图片描述

二、下载地址：

在这里插入图片描述
源码下载地址

三、实现效果：

1. 基础进度条的实现
2. 圆形进度条的实现
3. 分步进度条的实现
4. 添加操作方法
5. 背景填充颜色及渐变实现
6. 添加过渡动画效果

四、实现思路：

1. 基础进度条的实现思路：
使用div作为背景，颜色可指定。使用绝对定位将有值的部分悬浮到背景上，通过width的百分比控制有值部分的宽度。
2. 圆形进度条的实现思路：
使用canvas进行圆环的绘制，使用参数设置对应的颜色、尺寸等。
3. 分步进度条的实现思路：
使用背景色作为中间的进入展示，使用文字和需要展示每步的文字信息。
4. 背景填充颜色及渐变实现思路：
通过参数传递颜色或者渐变色的配置，组件自动识别，环状图时自动通过参数的方式传递回调函数，设置背景渐变色
5. 添加操作方法实现思路：
通过传入的value值控制当前进度,调用组件时通过改变参数的value值，实现进度条的更新。
6. 添加过渡动画效果实现思路：
bar/step使用css动画实现，通过控制宽度的方式实现动画效果。pie时使用动态重新绘制的方式实现动画效果。

五、参数说明：

1. 参数说明：

序号	参数	是否必填	说明
1	type	否	字符串，默认"bar",表示普通进度条，具体类型定义如下:1. bar表示普通进度条。2. pie表示圆形的进度条。3. step表示分布进度条。
2	value	否	数字，进度值，百分比，必填
3	width	否	字符串，整体的宽度，选填，默认300px，type=pie时，此值表示圆环的尺寸
4	height	否	字符串，整体的高度，选填，默认30px，type=pie时，此值表示圆环的宽度
5	bgcolor	否	对象，背景颜色，type='pie’的时候可通过回调函数的方式设置背景色，其它类型时可直接传递css的背景色样式，选填，默认#c1c1c1,
6	bgvaluecolor	否	对象，已完成部分的背景色，type='pie’的时候可通过回调函数的方式设置背景色，其它类型时可直接传递css的背景色样式，选填，默认#FF5252
6	bgbarcolor	否	对象，拖块的颜色，type='pie’的时候可通过回调函数的方式设置背景色，其它类型时可直接传递css的背景色样式，选填，默认#FF5252
7	textcolor	否	字符串，进度值文本的颜色，选填，默认#000
8	showtext	否	布尔值，是否显示进度值得文字，选填，默认true
9	textpositionx	否	字符串，文字x轴的位置，left左边、valuecenter已完成部分居中、valuetop未完成成部分居中、center居中、right右侧、其它自定义（如传入具体的px或者%位置等）选填，默认valuetop，type='step’时此属性不生效
10	textpositiony	否	字符串，文字y轴的位置，top上边、center中间、bottom下方、其它自定义（如传入具体的px或者%位置等）选填，默认center，type='step’时此属性的center不生效
11	showbar	否	布尔值，是否显示拖块，选填，默认true，type='step’时此属性不生效
12	radius	否	字符串，圆角尺寸，选填，默认5%，type=pie时，0px或0%时表示直角，其它时表示圆角，type='step’时此属
13	barstyle	否	字符串，设置拖块的样式：rect矩形、circle圆形，reat圆角矩形、自定义图片，选填，默认rect，type='step’时此属性不生效
14	items	否	字符串数组，类型时step时，此参数必须传递，标识各个节点的名称，类型为其它时此属性不生效。

六、使用说明：

引入ProgressBar组件，并且设置对应参数即可：

import ProgressBar from "../components/ProgressBar.vue"
<ProgressBar ref="demo1_1" :value="64"></ProgressBar>

七、开发说明：

本组件使用VUE3实现，开发工具为HBuilder X。

八、开发视频：

VUE3实用组件开发合集三：进度条组件

九、项目代码：

9.1 ProgressBar.vue

1. html代码

<template>
	<template v-if="type == 'pie'">
		<div class="pie" ref="container">
			<canvas ref="canvas" :width="width_" :height="width_"></canvas>
			<template v-if="showtext">
				<template v-if="istextpopsitonxcustomer() && istextpopsitonycustomer()">
					<div class="value_text" :class="[textpositionx,textpositiony]">{{value}}%</div>
				</template>
				<template v-else-if="!istextpopsitonxcustomer() && istextpopsitonycustomer()">
					<div class="value_text" :style="{'left':textpositionx}" :class="[textpositiony]">{{value}}%</div>
				</template>
				<template v-else-if="istextpopsitonxcustomer() && !istextpopsitonycustomer()">
					<div class="value_text" :style="{'top':textpositiony}" :class="[textpositionx]">{{value}}%</div>
				</template>
				<template v-else>
					<div class="value_text" style="line-height: 1;" :style="{'left':textpositionx,'top':textpositiony}">
						{{value}}%
					</div>
				</template>
			</template>
		</div>
	</template>
	<template v-else-if="type == 'step'">
		<div class="step" :class="{'top':textpositiony=='top'}">
			<div class="bg"></div>
			<div class="value"></div>
			<div class="titleitems" :class="{'top':textpositiony=='top'}">
				<template v-for="(item,index) in items">
					<div class="titleitem" :class="{'titleitemselected':index<=value}"
						:style="{'left':((index)*(1/(items.length-1))*width_ - (height_*0.75))+'px'}">
						<div class="title">
							<span>{{item}}</span>
						</div>
					</div>
				</template>
			</div>
			<div class="indexitems">
				<template v-for="(item,index) in items">
					<div class="indexitem" :class="{'indexitemselected':index<=value}"
						:style="{'left':((index)*(1/(items.length-1))*width_ - (height_*1.5/2))+'px'}">
						<div class="index">
							<template  v-if="showtext">
								{{index+1}}
							</template>
						</div>
					</div>
				</template>
			</div>
		</div>
	</template>
	<template v-else>
		<div class="bar">
			<div class="bg"></div>
			<div class="value"></div>
			<template v-if="showbar && barstyle=='circle'">
				<div class="value_bar value_bar_circle" style="border-radius: 100%;" :style="{'width':(height_)+'px'}">
				</div>
			</template>
			<template v-else-if="showbar && barstyle=='reat'">
				<div class="value_bar" style="border-radius: 5px;"></div>
			</template>
			<template v-else-if="showbar && barstyle=='rect'">
				<div class="value_bar"></div>
			</template>
			<template v-else-if="showbar">
				<img :src="barstyle" class="value_bar_img" />
			</template>

			<template v-if="showtext">
				<template v-if="istextpopsitonxcustomer() && istextpopsitonycustomer()">
					<div class="value_text" :class="[textpositionx,textpositiony]">{{value}}%</div>
				</template>
				<template v-else-if="!istextpopsitonxcustomer() && istextpopsitonycustomer()">
					<div class="value_text" :style="{'left':textpositionx}" :class="[textpositiony]">{{value}}%</div>
				</template>
				<template v-else-if="istextpopsitonxcustomer() && !istextpopsitonycustomer()">
					<div class="value_text" :style="{'top':textpositiony}" :class="[textpositionx]">{{value}}%</div>
				</template>
				<template v-else>
					<div class="value_text" :style="{'left':textpositionx,'top':textpositiony}">{{value}}%</div>
				</template>
			</template>


			<div class="value_text right" v-else-if="showtext && textpositionx =='right'">{{value}}%</div>
			<div class="value_text valuetop" v-else-if="showtext && textpositionx =='valuetop'">{{value}}%</div>
			<div class="value_text " v-else-if="showtext" :style="{'left':textpositionx}">{{value}}%</div>
		</div>
	</template>
</template>

2. JS代码

<script setup>
	import {
		ref,
		watch,
		defineExpose,
		onMounted
	} from 'vue'

	//外部传递的参数
	const option = defineProps({
		type: { //类型，bar、pie、step三种样式
			type: String,
			required: false,
			default: "bar"
		},
		value: { //进度值
			type: Number,
			required: true,
			default: 0
		},
		width: { //宽度
			type: String,
			required: false,
			default: '300px'
		},
		height: { //高度
			type: String,
			required: false,
			default: '20px'
		},
		bgcolor: { //暗部的背景色
			type: String,
			required: false,
			default: '#c1c1c1'
		},
		bgvaluecolor: { //亮部的背景色
			type: Object,
			required: false,
			default: '#FF5252'
		},
		bgbarcolor: { //滑块的颜色
			type: String,
			required: false,
			default: '#FF5252'
		},
		textcolor: { //文字的颜色
			type: String,
			required: false,
			default: '#000'
		},
		showtext: { //是否显示文字
			type: Boolean,
			required: false,
			default: true
		},
		textpositionx: { //文字显示的位置:left,valuecenter,valuetop,center,right,指定位置
			type: String,
			required: false,
			default: 'valuetop'
		},
		textpositiony: { //文字显示的位置:top,center,bottom,指定位置
			type: String,
			required: false,
			default: 'center'
		},
		showbar: { //是否显示拖块
			type: Boolean,
			required: false,
			default: true
		},
		radius: { //圆角尺寸
			type: String,
			required: false,
			default: "5%"
		},
		barstyle: { //设置拖块的样式：rect矩形、circle圆形，reat圆角矩形、自定义图片
			type: String,
			required: false,
			default: "rect"
		},
		items: { //分步组件时的数据列表，type=step时必传
			type: Array,
			required: false
		}
	});

	//监听外部参数的变动
	watch(() => option.type, (newvalue, oldvalue) => {
		if (option.type == 'pie') {
			draw();
		}
	});
	watch(() => option.items, (newvalue, oldvalue) => {
		if (option.items.length > 1) {
			stepvaluewidth = option.value * 100 * (1 / (option.items.length - 1));
		}
	});
	watch(() => option.value, (newvalue, oldvalue) => {
		if (option.items.length > 1) {
			stepvaluewidth = option.value * 100 * (1 / (option.items.length - 1));
		}
		if (option.type == 'pie') {
			draw();
		}
	});
	watch(() => option.width, (newvalue, oldvalue) => {
		width_ = newvalue.replace('px', '').replace('rem', '').replace('vh', '').replace('vw', '').replace('%',
			'') * 1.0;
		if (option.type == 'pie') {
			draw();
		}
	});
	watch(() => option.height, (newvalue, oldvalue) => {
		//将高度转换为数字
		height_ = newvalue.replace('px', '').replace('rem', '').replace('vh', '').replace('vw', '').replace('%',
			'') * 1.0;
		if (option.type == 'pie') {
			draw();
		}
	});
	watch(() => option.bgcolor, (newvalue, oldvalue) => {
		if (option.type == 'pie') {
			draw();
		}
	});
	watch(() => option.bgvaluecolor, (newvalue, oldvalue) => {
		if (option.type == 'pie') {
			draw();
		}
	});
	watch(() => option.bgbarcolor, (newvalue, oldvalue) => {
		if (option.type == 'pie') {
			draw();
		}
	});
	watch(() => option.textcolor, (newvalue, oldvalue) => {
		if (option.type == 'pie') {
			draw();
		}
	});
	watch(() => option.showtext, (newvalue, oldvalue) => {
		if (option.type == 'pie') {
			draw();
		}
	});
	watch(() => option.textpositionx, (newvalue, oldvalue) => {
		if (option.type == 'pie') {
			draw();
		}
	});
	watch(() => option.textpositiony, (newvalue, oldvalue) => {
		if (option.type == 'pie') {
			draw();
		}
	});
	watch(() => option.showbar, (newvalue, oldvalue) => {
		if (option.type == 'pie') {
			draw();
		}
	});
	watch(() => option.radius, (newvalue, oldvalue) => {
		if (option.type == 'pie') {
			draw();
		}
	});
	watch(() => option.barstyle, (newvalue, oldvalue) => {
		if (option.type == 'pie') {
			draw();
		}
	});

	//将高度转换为数字
	let height_ = option.height.replace('px', '').replace('rem', '').replace('vh', '').replace('vw', '').replace('%', '') ;
		1.0;
	let width_ = option.width.replace('px', '').replace('rem', '').replace('vh', '').replace('vw', '').replace('%', '') ;
		1.0;
	let stepvaluewidth = 0;
	if (option.items && option.items.length > 1) {
		stepvaluewidth = option.value * 100 * (1 / (option.items.length - 1));
	}
	//文字的x是否是指定的范围内的
	const istextpopsitonxcustomer = () => {
		return option.textpositionx == 'left' || option.textpositionx == 'valuecenter' || option.textpositionx ==
			'valuetop' || option.textpositionx == 'right' || option.textpositionx == 'center';
	}
	//文字的y是否是指定的范围内的
	const istextpopsitonycustomer = () => {
		return option.textpositiony == 'top' || option.textpositiony == 'centery' || option.textpositiony == 'bottom';
	}

	onMounted(() => {
		if (option.type == 'pie') {
			draw();
		}
	});
	const canvas = ref();
	let stepvalue = 0;
	const draw = () => {
		
		stepvalue = 0;
		requestAnimationFrame(draw_);
	}
	const draw_ = () => {
		let w = canvas.value.width;
		let h = canvas.value.height;
		canvas.value.width = w;
		canvas.value.height = h;

		let centerx = width_ / 2;
		let centery = width_ / 2;
		let r = (width_) / 2 - height_;

		if (option.textpositionx == 'valuecenter') {
			textx.value = centerx + (r) * Math.sin(2 * Math.PI / 360 * 3.6 * (stepvalue / 2.0));
			texty.value = centery - (r) * Math.cos(2 * Math.PI / 360 * 3.6 * (stepvalue / 2.0));
		}
		if (option.textpositionx == 'valuetop') {
			textx.value = centerx + (r) * Math.sin(2 * Math.PI / 360 * 3.6 * (stepvalue));
			texty.value = centery - (r) * Math.cos(2 * Math.PI / 360 * 3.6 * (stepvalue));
		}

		const ctx = canvas.value.getContext("2d");

		//****画出背景色
		ctx.beginPath();
		ctx.strokeStyle = option.bgcolor;
		ctx.lineWidth = height_;
		ctx.arc(centerx, centery, r, 0, 2 * Math.PI);
		ctx.stroke();
		ctx.closePath();

		ctx.beginPath();
		if (option.bgvaluecolor instanceof Function) {
			let linex = centerx + (r) * Math.sin(2 * Math.PI / 360 * 3.6 * stepvalue);
			let liney = centery - (r) * Math.cos(2 * Math.PI / 360 * 3.6 * stepvalue);

			let gradient = ctx.createLinearGradient(0, 0, linex, liney);
			gradient = option.bgvaluecolor(gradient);

			ctx.strokeStyle = gradient;
		} else {
			ctx.strokeStyle = option.bgvaluecolor;
		}
		// if(option.bgvaluecolor.indexOf(";")!=-1){
		// 	let colors = option.bgvaluecolor.split(";");
		// 	let gradient=ctx.createLinearGradient(0,0,170,0);
		// 	gradient.addColorStop("0","magenta");
		// 	gradient.addColorStop("0.5","blue");
		// 	gradient.addColorStop("1.0","red");
		// }
		if (!(option.radius == '0px' || option.radius == '0%')) {
			ctx.lineCap = "round";
		}
		//x/2 = value/100 
		//x = value/100*2
		ctx.arc(centerx, centery, r, -0.5 * Math.PI, ((stepvalue / 100) * 2 - 0.5) * Math.PI);
		ctx.stroke();
		ctx.closePath();

		if (option.showbar) {
			ctx.beginPath();
			//x/360 = value / 100;
			// x = value/100*360;
			let linex = centerx + (r) * Math.sin(2 * Math.PI / 360 * 3.6 * (stepvalue));
			let liney = centery - (r) * Math.cos(2 * Math.PI / 360 * 3.6 * (stepvalue));
			console.log('x=' + linex + ',y=' + liney);
			ctx.lineWidth = 0.1;
			if (option.bgbarcolor instanceof Function) {
				let gradient = ctx.createRadialGradient(linex, liney, 0, linex, liney, height_ / 2 + 5);
				gradient = option.bgbarcolor(gradient);
				ctx.fillStyle = gradient;
			} else {
				ctx.fillStyle = option.bgbarcolor;
			}

			ctx.arc(linex, liney, height_ / 2 + 5, 0, 2 * Math.PI);
			ctx.fill();
			ctx.stroke();
			ctx.closePath();
		}

		stepvalue++;
		if (stepvalue < option.value) {
			requestAnimationFrame(draw_);
		} else {
			stepvalue = option.value;
		}
	}

	let textx = ref(0);
	let texty = ref(0);
</script>

3. 样式代码

<style scoped>
	.bar {
		position: relative;
		height: v-bind(height);
		line-height: v-bind(height);
		width: v-bind(width);
	}

	.bar .bg {
		background: v-bind(bgcolor);
		height: 100%;
		border-radius: v-bind(radius);
		background-size: 100% 100%;
	}

	.bar .value {
		background: v-bind(bgvaluecolor);
		position: absolute;
		left: 0;
		top: 0;
		width: 0;
		height: 100%;
		border-radius: v-bind(radius);
		animation: barmove 1s;
		animation-fill-mode: forwards;
	}

	/* Chrome, Safari, Opera */
	@-webkit-keyframes barmove {
		100% {
			width: v-bind(value+'%');
		}
	}

	/* Standard syntax */
	@keyframes barmove {
		100% {
			width: v-bind(value+'%');
			;
		}
	}

	.bar .value_bar {
		background: v-bind(bgbarcolor);
		position: absolute;
		left: 0;
		top: -5px;
		width: calc(1% + v-bind(radius));
		height: calc(100% + 10px);
		animation: barvalue_barmove 1s;
		animation-fill-mode: forwards;
	}

	/* Chrome, Safari, Opera */
	@-webkit-keyframes barvalue_barmove {
		100% {
			left: calc(v-bind(value+'%') - v-bind(radius));
		}
	}

	/* Standard syntax */
	@keyframes barvalue_barmove {
		100% {
			left: calc(v-bind(value+'%') - v-bind(radius));
		}
	}

	.bar .value_bar_circle {
		left: calc(v-bind(value+'%') - v-bind(height_*0.8+'px'));
		top: -2px;
		height: calc(100% + 4px);
		box-shadow: 0 0 20px v-bind(bgbarcolor);
	}

	.bar .value_bar_img {
		position: absolute;
		left: calc(v-bind(value+'%') - v-bind(radius));
		top: 0px;
		width: calc(2% + v-bind(radius));
		height: calc(100%);
	}

	.bar .value_text {
		position: absolute;
		top: 0;
		color: v-bind(textcolor);
	}

	.bar .left {
		left: 0;
	}

	.bar .center {
		left: 0;
		width: 100%;
		text-align: center;
	}

	.bar .valuecenter {
		left: calc(v-bind(value+'%') / 2);
	}

	.bar .valuetop {
		left: calc(v-bind(value+'%') + 10px);
	}

	.bar .right {
		left: 100%;
	}

	.bar .top {
		top: -100%;
	}

	.bar .center {
		top: 0;
	}

	.bar .bottom {
		top: 100%;
	}

	.pie {
		position: relative;
		height: v-bind(width);
		line-height: v-bind(width);
		width: v-bind(width);
	}

	.pie .value_text {
		position: absolute;
		top: 0;
		color: v-bind(textcolor);
	}

	.pie .left {
		left: 0;
	}

	.pie .center {
		left: 0;
		width: v-bind(width);
		text-align: center;
	}

	.pie .valuecenter {
		left: v-bind(textx-15+'px');
		top: v-bind(texty+'px') !important;
		line-height: 1;
		width: auto;
	}

	.pie .valuetop {
		left: v-bind(textx-15+'px');
		top: v-bind(texty+15+'px') !important;
		line-height: 1;
		width: auto;
	}

	.pie .right {
		left: 0;
		text-align: right;
		width: 100%;
	}

	.pie .top {
		top: 0;
		line-height: 1;
	}

	.pie .centery {
		top: 0;
	}

	.pie .bottom {
		top: 100%;
		line-height: 1;
	}

	.step {
		position: relative;
		height: v-bind(height);
		line-height: v-bind(height);
		width: v-bind(width);
		margin-top: v-bind(height_/2+'px');
		margin-left: v-bind(height_/2+'px');
		margin-bottom: v-bind(height_*1.5+'px');
		margin-right: v-bind(height_/2+'px');
	}
	.step.top {
		margin-top: v-bind(height_*1.5+'px');
		margin-bottom: v-bind(height_/2+'px');
	}

	.step .bg {
		background: v-bind(bgcolor);
		height: 100%;
		border-radius: v-bind(radius);
		background-size: 100% 100%;
	}

	.step .value {
		background: v-bind(bgvaluecolor);
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 0;
		border-radius: v-bind(radius);
		animation: stepmove 1s;
		animation-fill-mode: forwards;
	}

	/* Chrome, Safari, Opera */
	@-webkit-keyframes stepmove {
		100% {
			width: v-bind(stepvaluewidth+'%');
		}
	}

	/* Standard syntax */
	@keyframes stepmove {
		100% {
			width: v-bind(stepvaluewidth+'%');
			;
		}
	}

	.step .indexitems {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.step .indexitems .indexitem {
		text-align: center;
		position: absolute;
	}

	.step .indexitems .indexitem .index {
		color: v-bind(textcolor);
		background: v-bind(bgcolor);
		border-radius: 100%;
		width: v-bind(height_*1.5+'px');
		height: v-bind(height_*1.5+'px');
		position: relative;
		top: v-bind(-height_*0.25+'px');
		text-align: center;
		line-height: v-bind(height_*1.5+'px');
		margin: 0 auto;
	}

	.step .indexitems .indexitemselected .index {
		background: v-bind(bgvaluecolor);
	}

	.step .titleitems {
		position: absolute;
		left: 0;
		top: calc(100% + v-bind(height_*0.5+'px'));
		width: 100%;
		height: 100%;
	}
	.step .titleitems.top {
		top: calc((-100% - v-bind(height_*0.5+'px')));
	}

	.step .titleitems .titleitem {
		text-align: center;
		position: absolute;
	}

	.step .titleitems .titleitem .title {
		/* color: v-bind(textcolor); */
		/* width: v-bind(height_*1.5+'px'); */
		height: v-bind(height_*1.5+'px');
		position: relative;
		top: v-bind(-height_*0.25+'px');
		text-align: center;
		line-height: v-bind(height_*1.5+'px');
		margin: 0 auto;
		white-space: nowrap;
	}
	.step .titleitems .titleitem .title span{
		white-space: nowrap;
		display: inline-block;
		position: relative;
		left: calc(-50% + v-bind(height_*0.75+'px'));
	}
	.step .titleitems .titleitemselected .title {
		color: v-bind(bgvaluecolor);
	}
</style>

十、示例代码：

<template>
	<div class="container">
		<div class="content">
			<h1 style="text-align: center;">VUE3实用组件开发合集三：进度条组件</h1>
			<div class="flex">
				<div class="menus">
					<div class="menuitem">一、实现效果</div>
					<div class="menuitem">二、实现思路</div>
					<div class="menuitem">三、参数说明</div>
					<div class="menuitem">四、方法说明</div>
					<div class="menuitem">五、事件说明</div>
					<div class="menuitem">六、效果预览</div>
				</div>
				<div class="contentdetail" style="padding: 10px;padding-bottom: 200px;">
					<div style="text-indent: 2em;line-height: 30px;">
						实现各种进度条，正常进度条、圆形进度条、分步进度等各种进度条组件，并添加特定的样式效果。
					</div>
				
					<div>
						<div class="header_title"><b>一、实现效果：</b></div>
						<div style="text-indent: 2em;line-height: 30px;">
							<div>1.基础进度条的实现</div>
							<div>2.圆形进度条的实现 </div>
							<div>3.分步进度条的实现 </div>
							<div>4.添加操作方法 </div>
							<div>5.背景填充颜色及渐变实现 </div>
							<div>6.添加过渡动画效果 </div>
						</div>
					</div>
				
					<div>
						<div class="header_title"><b>二、实现思路：</b></div>
						<div>
							<div style="text-indent: 2em;">
								<div class="header_title">1.基础进度条的实现思路：</div>
								<div class="content_text" style="text-indent: 4em;">
									使用div作为背景，颜色可指定。使用绝对定位将有值的部分悬浮到背景上，通过width的百分比控制有值部分的宽度。
								</div>
							</div>
							<div style="text-indent: 2em;">
								<div class="header_title">2.圆形进度条的实现思路：</div>
								<div class="content_text" style="text-indent: 4em;">
									使用canvas进行圆环的绘制，使用参数设置对应的颜色、尺寸等。
								</div>
							</div>
							<div style="text-indent: 2em;">
								<div class="header_title">3.分步进度条的实现思路：</div>
								<div class="content_text" style="text-indent: 4em;">
									使用背景色作为中间的进入展示，使用文字和需要展示每步的文字信息。
								</div>
							</div>
							<div style="text-indent: 2em;">
								<div class="header_title">4.背景填充颜色及渐变实现思路：</div>
								<div class="content_text" style="text-indent: 4em;">
									通过参数传递颜色或者渐变色的配置，组件自动识别，环状图时自动通过参数的方式传递回调函数，设置背景渐变色
								</div>
							</div>
							<div style="text-indent: 2em;">
								<div class="header_title">5.添加操作方法实现思路：</div>
								<div class="content_text" style="text-indent: 4em;">
									通过传入的value值控制当前进度,调用组件时通过改变参数的value值，实现进度条的更新。
								</div>
							</div>
							<div style="text-indent: 2em;">
								<div class="header_title">6.添加过渡动画效果实现思路：</div>
								<div class="content_text" style="text-indent: 4em;">
									bar/step使用css动画实现，通过控制宽度的方式实现动画效果。pie时使用动态重新绘制的方式实现动画效果。
								</div>
							</div>
						</div>
					</div>
				
					<div>
						<div class="header_title"><b>三、参数说明：</b></div>
						<div>
							<table class="table" cellspacing="0" cellpadding="0">
								<tr>
									<th style="width:60px;">序号</th>
									<th style="width:100px;">参数</th>
									<th style="width:100px;">是否必填</th>
									<th>说明</th>
								</tr>
								<tr>
									<td style="text-align:center">2</td>
									<td>type</td>
									<td>否</td>
									<td>
										<div>字符串，默认"bar",表示普通进度条，具体类型定义如下:</div>
										<div style="text-indent: 2em;">
											<div>1. bar表示普通进度条。</div>
											<div>2. pie表示圆形的进度条。</div>
											<div>3. step表示分布进度条。</div>
										</div>
									</td>
								</tr>
								<tr>
									<td style="text-align:center">3</td>
									<td>value</td>
									<td>否</td>
									<td>
										<div>数字，进度值，百分比，必填</div>
									</td>
								</tr>
								<tr>
									<td style="text-align:center">4</td>
									<td>width</td>
									<td>否</td>
									<td>
										<div>字符串，整体的宽度，选填，默认300px，type=pie时，此值表示圆环的尺寸</div>
									</td>
								</tr>
								<tr>
									<td style="text-align:center">5</td>
									<td>height</td>
									<td>否</td>
									<td>
										<div>字符串，整体的高度，选填，默认30px，type=pie时，此值表示圆环的宽度</div>
									</td>
								</tr>
								<tr>
									<td style="text-align:center">6</td>
									<td>bgcolor</td>
									<td>否</td>
									<td>
										<div>对象，背景颜色，type='pie'的时候可通过回调函数的方式设置背景色，其它类型时可直接传递css的背景色样式，选填，默认#c1c1c1,</div>
									</td>
								</tr>
								<tr>
									<td style="text-align:center">7</td>
									<td>bgvaluecolor</td>
									<td>否</td>
									<td>
										<div>对象，已完成部分的背景色，type='pie'的时候可通过回调函数的方式设置背景色，其它类型时可直接传递css的背景色样式，选填，默认#FF5252</div>
									</td>
								</tr>
								<tr>
									<td style="text-align:center">8</td>
									<td>bgbarcolor</td>
									<td>否</td>
									<td>
										<div>对象，拖块的颜色，type='pie'的时候可通过回调函数的方式设置背景色，其它类型时可直接传递css的背景色样式，选填，默认#FF5252</div>
									</td>
								</tr>
								<tr>
									<td style="text-align:center">9</td>
									<td>textcolor</td>
									<td>否</td>
									<td>
										<div>字符串，进度值文本的颜色，选填，默认#000</div>
									</td>
								</tr>
								<tr>
									<td style="text-align:center">10</td>
									<td>showtext</td>
									<td>否</td>
									<td>
										<div>布尔值，是否显示进度值得文字，选填，默认true</div>
									</td>
								</tr>
								<tr>
									<td style="text-align:center">11</td>
									<td>textpositionx</td>
									<td>否</td>
									<td>
										<div>字符串，文字x轴的位置，left左边、valuecenter已完成部分居中、valuetop未完成成部分居中、center居中、right右侧、其它自定义（如传入具体的px或者%位置等）选填，默认valuetop，type='step'时此属性不生效</div>
									</td>
								</tr>
								<tr>
									<td style="text-align:center">12</td>
									<td>textpositiony</td>
									<td>否</td>
									<td>
										<div>字符串，文字y轴的位置，top上边、center中间、bottom下方、其它自定义（如传入具体的px或者%位置等）选填，默认center，type='step'时此属性的center不生效</div>
									</td>
								</tr>
								<tr>
									<td style="text-align:center">13</td>
									<td>showbar</td>
									<td>否</td>
									<td>
										<div>布尔值，是否显示拖块，选填，默认true，type='step'时此属性不生效</div>
									</td>
								</tr>
								<tr>
									<td style="text-align:center">14</td>
									<td>radius</td>
									<td>否</td>
									<td>
										<div>字符串，圆角尺寸，选填，默认5%，type=pie时，0px或0%时表示直角，其它时表示圆角，type='step'时此属性不生效</div>
									</td>
								</tr>
								<tr>
									<td style="text-align:center">15</td>
									<td>barstyle</td>
									<td>否</td>
									<td>
										<div>字符串，设置拖块的样式：rect矩形、circle圆形，reat圆角矩形、自定义图片，选填，默认rect，type='step'时此属性不生效</div>
									</td>
								</tr>
								<tr>
									<td style="text-align:center">16</td>
									<td>items</td>
									<td>否</td>
									<td>
										<div>字符串数组，类型时step时，此参数必须传递，标识各个节点的名称，类型为其它时此属性不生效。</div>
									</td>
								</tr>
							</table>
						</div>
					</div>
					<div>
						<div class="header_title"><b>四、方法说明：</b></div>
						<div>
							无
						</div>
					</div>
					<div>
						<div class="header_title"><b>五、事件说明：</b></div>
						<div>
							无
						</div>
					</div>
				
					<div>
						<div class="header_title"><b>六、效果预览：</b></div>
						<div>
							<div class="header_title">1.实现效果一(基础进度条的实现)：</div>
							<div>
								<div class="item">
									<span>普通进度条1：</span>
									<ProgressBar ref="demo1_1" :value="64"></ProgressBar>
								</div>
								<div class="item">
									<span>普通进度条2：</span>
									<ProgressBar ref="demo1_1" :value="24"></ProgressBar>
								</div>
								<div class="item">
									<span>普通进度条3：</span>
									<ProgressBar ref="demo1_1" :value="74" width="200px" height="20px" bgcolor="#01AAED" bgvaluecolor="#fdcd0b" bgbarcolor="#ee6666" textcolor="#fff"></ProgressBar>
								</div>
								<div class="item">
									<span>普通进度条4：</span>
									<ProgressBar ref="demo1_1" :value="64" width="200px" height="20px" bgcolor="#01AAED" bgvaluecolor="#fdcd0b" :showtext="false" :showbar="false"></ProgressBar>
								</div>
							</div>
							
							<div class="header_title">2.实现效果二(基础进度条的实现-圆角)：</div>
							<div>
								<div class="item">
									<span>普通圆角进度条1：</span>
									<ProgressBar ref="demo1_1" :value="34" radius="5px" bgcolor="#00FAC122" bgvaluecolor="#00FAC1" bgbarcolor="#00FAC1" textcolor="#ee6666"></ProgressBar>
								</div>
								<div class="item">
									<span>普通圆角进度条2：</span>
									<ProgressBar ref="demo1_1" :value="14" radius="10px"></ProgressBar>
								</div>
								<div class="item">
									<span>普通圆角进度条3：</span>
									<ProgressBar ref="demo1_1" :value="74" width="200px" height="20px" bgcolor="#01AAED" bgvaluecolor="#fdcd0b" bgbarcolor="#ee6666" textcolor="#fff" radius="20px"></ProgressBar>
								</div>
								<div class="item">
									<span>普通圆角进度条4：</span>
									<ProgressBar ref="demo1_1" :value="94" width="200px" height="20px" bgcolor="#01AAED" bgvaluecolor="#fdcd0b" :showtext="false" :showbar="false" radius="20px"></ProgressBar>
								</div>
							</div>
							
							<div class="header_title">3.实现效果三(基础进度条的实现-拖块)：</div>
							<div>
								<div class="item">
									<span>普通圆角进度条1：</span>
									<ProgressBar ref="demo1_1" :value="64" radius="30px" barstyle="circle"></ProgressBar>
								</div>
								<div class="item">
									<span>普通圆角进度条2：</span>
									<ProgressBar ref="demo1_1" :value="74" radius="10px" barstyle="reat"></ProgressBar>
								</div>
								<div class="item">
									<span>普通圆角进度条3：</span>
									<ProgressBar ref="demo1_1" :value="74" width="200px" height="20px" bgcolor="#01AAED" bgvaluecolor="#fdcd0b" bgbarcolor="#ee6666" textcolor="#fff" radius="20px" barstyle="./src/components/icon-141.png"></ProgressBar>
								</div>
								<div class="item">
									<span>普通圆角进度条背景图片：</span>
									<ProgressBar ref="demo1_1" :value="74" width="200px" height="20px" bgcolor="url('https://img0.baidu.com/it/u=525954882,1049770024&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281')" bgvaluecolor="#fdcd0b" bgbarcolor="#ee6666" textcolor="#fff" radius="20px" barstyle="./src/components/icon-141.png"></ProgressBar>
								</div>
							</div>
							
							<div class="header_title">4.实现效果四(基础进度条的实现-文字的位置)：</div>
							<div>
								<div class="item">
									<span>文字的位置进度条1：</span>
									<ProgressBar ref="demo1_1" :value="64"  bgcolor="#0adbfa22" bgvaluecolor="#0adbfa" bgbarcolor="#0adbfa" textcolor="#ee6666"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置进度条2：</span>
									<ProgressBar ref="demo1_1" :value="34" textpositionx="left" bgcolor="#f071ff22" bgvaluecolor="#f071ff" bgbarcolor="#f071ff" textcolor="#00FAC1"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置进度条3：</span>
									<ProgressBar ref="demo1_1" :value="74" textpositionx="valuecenter"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置进度条4：</span>
									<ProgressBar ref="demo1_1" :value="74" textpositionx="right"></ProgressBar>
								</div>
							</div>
							<div>
								<div class="item">
									<span>文字的位置进度条1：</span>
									<ProgressBar ref="demo1_1" :value="35" textpositiony="top"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置进度条2：</span>
									<ProgressBar ref="demo1_1" :value="14" textpositiony="bottom" bgcolor="#fdcd0b22" bgvaluecolor="#fdcd0b" bgbarcolor="#fdcd0b" textcolor="#ee6666"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置进度条3：</span>
									<ProgressBar ref="demo1_1" :value="74" textpositionx="right" textpositiony="top" bgcolor="#01AAED22" bgvaluecolor="#01AAED" bgbarcolor="#01AAED" textcolor="#ee6666"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置进度条4：</span>
									<ProgressBar ref="demo1_1" :value="56" textpositionx="right" textpositiony="bottom"></ProgressBar>
								</div>
							</div>
							
							<div>
								<div class="item">
									<span>文字的位置进度条4：</span>
									<ProgressBar ref="demo1_1" :value="44" textpositionx="50%" textpositiony="-11%"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置进度条5：</span>
									<ProgressBar ref="demo1_1" :value="44" textpositionx="center" textpositiony="-11%"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置进度条6：</span>
									<ProgressBar ref="demo1_1" :value="44" textpositionx="center" textpositiony="-11%" bgvaluecolor="linear-gradient(to right, red, green)"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置进度条7：</span>
									<ProgressBar ref="demo1_1" :value="44" textpositionx="center" textpositiony="-11%" bgvaluecolor="linear-gradient(to top, #ee6666, #01AAFF)"></ProgressBar>
								</div>
							</div>
							
							<div class="header_title">5.实现效果五(圆形进度条的实现)：</div>
							<div>
								<div class="item">
									<span>圆形进度条：</span>
									<ProgressBar ref="demo1_1" :value="50" type="pie" textpositionx="center"></ProgressBar>
								</div>
								<div class="item">
									<span>圆形进度条-直角：</span>
									<ProgressBar ref="demo1_1" :value="20" type="pie" textpositionx="center" radius="0%"></ProgressBar>
								</div>
								<div class="item">
									<span>圆形进度条-背景渐变：</span>
									<ProgressBar ref="demo1_1" :value="68" type="pie" textpositionx="center" :bgvaluecolor="bgcolor"></ProgressBar>
								</div>
								<div class="item">
									<span>圆形进度条-背景渐变：</span>
									<ProgressBar ref="demo1_1" :value="48" type="pie" textpositionx="center" :bgvaluecolor="bgcolor" :bgbarcolor="bgbarcolor"></ProgressBar>
								</div>
							</div>
							
							<div class="header_title">6.实现效果六(圆形进度条文字的位置)：</div>
							<div>
								<div class="item">
									<span>文字的位置（valuetop,centery）：</span>
									<ProgressBar ref="demo1_1" :value="20" type="pie" width="100px" height="10px"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置（left,top）：</span>
									<ProgressBar ref="demo1_1" :value="22" type="pie" textpositionx="left" textpositiony="top" radius="0%" width="100px" height="10px"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置（left,centery）：</span>
									<ProgressBar ref="demo1_1" :value="38" type="pie" textpositionx="left" textpositiony="centery" :bgvaluecolor="bgcolor" width="100px" height="10px"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置（left,bottom）：</span>
									<ProgressBar ref="demo1_1" :value="18" type="pie" textpositionx="left" textpositiony="bottom" :bgvaluecolor="bgcolor" :bgbarcolor="bgbarcolor" width="150px" height="10px"></ProgressBar>
								</div>
							</div>
							<div>
								<div class="item">
									<span>文字的位置（center,top）：</span>
									<ProgressBar ref="demo1_1" :value="20" type="pie" textpositionx="center" textpositiony="top" width="100px" height="10px"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置（center,centery）：</span>
									<ProgressBar ref="demo1_1" :value="22" type="pie" textpositionx="center" textpositiony="centery" radius="0%" width="100px" height="10px"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置（center,bottom）：</span>
									<ProgressBar ref="demo1_1" :value="38" type="pie" textpositionx="center" textpositiony="bottom" :bgvaluecolor="bgcolor" width="100px" height="10px"></ProgressBar>
								</div>
							</div>
							<div>
								<div class="item">
									<span>文字的位置（valuecenter,top）：</span>
									<ProgressBar ref="demo1_1" :value="85" type="pie" textpositionx="valuecenter" textpositiony="top" :bgvaluecolor="bgcolor" :bgbarcolor="bgbarcolor" width="100px" height="20px"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置（valuecenter,centery）：</span>
									<ProgressBar ref="demo1_1" :value="56" type="pie" textpositionx="valuecenter" textpositiony="centery" :bgvaluecolor="bgcolor" :bgbarcolor="bgbarcolor" width="100px" height="10px"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置（valuecenter,bottom）：</span>
									<ProgressBar ref="demo1_1" :value="34" type="pie" textpositionx="valuecenter" textpositiony="bottom" :bgvaluecolor="bgcolor" :bgbarcolor="bgbarcolor" width="100px" height="10px"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置（valuetop,top）：</span>
									<ProgressBar ref="demo1_1" :value="26" type="pie" textpositionx="valuetop" textpositiony="top" :bgvaluecolor="bgcolor" :bgbarcolor="bgbarcolor" width="100px" height="10px"></ProgressBar>
								</div>
							</div>
							<div>
								<div class="item">
									<span>文字的位置（valuetop,centery）：</span>
									<ProgressBar ref="demo1_1" :value="26" type="pie" textpositionx="valuetop" textpositiony="centery" :bgvaluecolor="bgcolor" :bgbarcolor="bgbarcolor" width="100px" height="10px"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置（valuetop,bottom）：</span>
									<ProgressBar ref="demo1_1" :value="25" type="pie" textpositionx="valuetop" textpositiony="bottom" :bgvaluecolor="bgcolor" :bgbarcolor="bgbarcolor" width="100px" height="10px"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置（right,top）：</span>
									<ProgressBar ref="demo1_1" :value="33" type="pie" textpositionx="right" textpositiony="top" :bgvaluecolor="bgcolor" :bgbarcolor="bgbarcolor" width="100px" height="10px"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置（right,centery）：</span>
									<ProgressBar ref="demo1_1" :value="38" type="pie" textpositionx="right" textpositiony="centery" :bgvaluecolor="bgcolor" :bgbarcolor="bgbarcolor" width="100px" height="10px"></ProgressBar>
								</div>
							</div>
							<div>
								<div class="item">
									<span>文字的位置（right,bottom）：</span>
									<ProgressBar ref="demo1_1" :value="38" type="pie" textpositionx="right" textpositiony="bottom" :bgvaluecolor="bgcolor" :bgbarcolor="bgbarcolor" width="100px" height="10px"></ProgressBar>
								</div>
								<div class="item">
									<span>文字的位置（20px,10px）：</span>
									<ProgressBar ref="demo1_1" :value="38" type="pie" textpositionx="20px" textpositiony="10px" :bgvaluecolor="bgcolor" :bgbarcolor="bgbarcolor" width="100px" height="10px" textcolor="red"></ProgressBar>
								</div>
							</div>
							
							<div class="header_title">7.实现效果七(分步进度提示)：</div>
							<div>
								<div class="item">
									<span>分步进度条默认：</span>
									<ProgressBar ref="demo1_1" type="step" :items="items" style=""></ProgressBar>
								</div>
								<div class="item">
									<span>分步进度条默认：</span>
									<ProgressBar ref="demo1_1" type="step" :value="2" :items="items" style="ight: 15px;"></ProgressBar>
								</div>
								<div class="item">
									<span>分步进度条默认：</span>
									<ProgressBar ref="demo1_1" type="step" :value="1" :items="items" style="" width="250px" height="20px"></ProgressBar>
								</div>
							</div>
							
							<div class="header_title">8.实现效果八(分步进度的方法)：</div>
							<div>
								<div class="item">
									<span>分步进度条方法：</span>
									<ProgressBar ref="demo8_1" type="step" :value="value8_1" :items="items" style=""></ProgressBar>
									<div style="padding-top: 10px;">
										<button @click="predemo8_1()">上一步</button>
										<button @click="nextdemo8_1()">下一步</button>
										<button @click="todemo8_1()">到第3步</button>
									</div>
								</div>
								<div class="item">
									<span>分步进度条方法：</span>
									<ProgressBar ref="demo8_1" type="step" :value="value8_2" :items="items1" style=""></ProgressBar>
									<div style="padding-top: 10px;">
										<button @click="predemo8_2()">上一步</button>
										<button @click="nextdemo8_2()">下一步</button>
										<button @click="todemo8_2()">到第3步</button>
									</div>
									
								</div>
								
							</div>
							
							<div class="header_title">9.实现效果九(背景色)：</div>
							<div>
								<div class="item">
									<span>分步进度条默认：</span>
									<ProgressBar ref="demo1_1" type="step" :items="items" bgcolor="#656562" bgvaluecolor="#01AAFF" textcolor="#fff"></ProgressBar>
								</div>
								<div class="item">
									<span>分步进度条默认：</span>
									<ProgressBar ref="demo1_1" type="step" :value="2" :items="items"  bgcolor="#656562" bgvaluecolor="#01AAFF" textcolor="#fff"></ProgressBar>
								</div>
								<div class="item">
									<span>分步进度条默认：</span>
									<ProgressBar ref="demo1_1" type="step" :value="1" :items="items"  bgcolor="#656562" bgvaluecolor="#01AAFF" textcolor="#fff" width="250px" height="20px"></ProgressBar>
								</div>
								<div class="item">
									<span>分步进度条默认：</span>
									<ProgressBar ref="demo1_1" type="step" :value="1" :items="items"  bgcolor="linear-gradient(to right, #000, #555)" bgvaluecolor="linear-gradient(to right, #ee6666, #01AAFF)" textcolor="#fff" width="250px" height="20px"></ProgressBar>
								</div>
							</div>
							
							<div class="header_title">10.实现效果十(文字位置)：</div>
							<div>
								<div class="item">
									<span>分步进度条文字的位置：</span>
									<ProgressBar ref="demo1_1" type="step" :value="2" :items="items"  bgcolor="linear-gradient(to right, #000, #555)" bgvaluecolor="linear-gradient(to right, #ee6666, #01AAFF)" textcolor="#fff" width="250px" height="20px" :showtext="false"></ProgressBar>
								</div>
								<div class="item">
									<span>分步进度条文字的位置：</span>
									<ProgressBar ref="demo1_1" type="step" :value="2" :items="items"  bgcolor="linear-gradient(to right, #555, #555555ee)" bgvaluecolor="linear-gradient(to right, #ee6666, #ee6666bb)" textcolor="#fff" width="250px" height="20px" textpositiony="top"></ProgressBar>
								</div>
							</div>
							<div>
								<div class="item">
									<span>分步进度条文字的位置：</span>
									<ProgressBar ref="demo1_1" type="step" :value="2" :items="items"  bgcolor="linear-gradient(to right, #555, #555555ee)" bgvaluecolor="linear-gradient(to right, #01AAFF, #01AAFFbb)" textcolor="#fff" width="850px" height="15px" textpositiony="bottom"></ProgressBar>
								</div>
							</div>
							
							<div>
								<div class="item">
									<span>分步进度条文字的位置：</span>
									<ProgressBar ref="demo1_1" type="step" :value="2" :items="items1"  bgcolor="linear-gradient(to right, #555, #555555ee)" bgvaluecolor="linear-gradient(to right, #ee6666, #ee666688)" textcolor="#fff" width="1000px" height="15px" textpositiony="bottom"></ProgressBar>
								</div>
							</div>
						</div>
					</div>
				
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onBeforeUnmount
	} from 'vue'
	
	import ProgressBar from "../components/ProgressBar.vue"
	
	const bgcolor = function(gradient){
		gradient.addColorStop("0","#fdcd0b");
		gradient.addColorStop("1.0","#ee6666");
		return gradient;
	}
	const bgbarcolor = function(gradient){
		gradient.addColorStop("0","#ee6666");
		gradient.addColorStop("1.0","#fff");
		return gradient;
	}
	
	const items = ['第一步','第二步','第三步','第四步'];
	
	const items1 = ['基本信息','联系相信','扩展资料','信息确认','完成'];
	
	let value8_1 = ref(0);
	let value8_2 = ref(0);
	
	const demo8_1 = ref();
	
	const predemo8_1 = ()=>{
		value8_1.value --;
		if(value8_1.value<=0){
			value8_1.value = 0;
		}
		console.log(value8_1.value);
	}
	const nextdemo8_1 = ()=>{
		value8_1.value ++;
		if(value8_1.value>items.length-1){
			value8_1.value = items.length-1;
		}
		console.log(value8_1.value);
	}
	const todemo8_1 = ()=>{
		value8_1.value  = 2;
		console.log(value8_1.value);
	}
	
	const predemo8_2 = ()=>{
		value8_2.value --;
		if(value8_2.value<=0){
			value8_2.value = 0;
		}
	}
	const nextdemo8_2 = ()=>{
		value8_2.value ++;
		if(value8_2.value>items1.length-1){
			value8_2.value = items1.length-1;
		}
	}
	const todemo8_2 = ()=>{
		value8_2.value  = 2;
	}
	
</script>

<style scoped="scoped">
	.container {
		background-color: whitesmoke;
	}

	.container .content {
		width: 80%;
		background-color: #fff;
		margin: 0 auto;
	}
	.flex{
		display: flex;
	}

	.container .content .menus {
		width: 200px;
		border-bottom: 1px solid #d9d9d9;
		border-top: 1px solid #d9d9d9;
		border-right: 1px solid #d9d9d9;
	}
	
	.menuitem{
		height: 45px;
		line-height: 45px;
		padding: 0 10px;
		cursor: pointer;
		border-bottom: 1px solid #d9d9d9;
	}
	
	.menuitem:hover{
		background: #FF5252;
		color: #fff;
	}
	
	.menuitemselected{
		background: #FF5252;
		color: #fff;
	}

	.header_title {
		font-weight: bold;
		line-height: 40px;
	}

	.content_text {
		text-indent: 2em;
		line-height: 30px;
		color: #222;
	}

	.table {
		margin-left: 2em;
		border-top: 1px solid #d9d9d9;
		border-left: 1px solid #d9d9d9;
	}

	.table th,
	td {
		border-bottom: 1px solid #d9d9d9;
		border-right: 1px solid #d9d9d9;
		padding: 3px;
	}

	.item {
		display: inline-block;
		margin-right: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
</style>

军军君01

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE3实用组件开发合集三：进度条组件

VUE3实用组件开发合集三：进度条组件，包括源码，开发文档、素材等。使用vue3开发实现各种进度条，正常进度条、圆形进度条、分步进度等各种进度条组件，并添加特定的样式效果。封装为组件，可直接调用，通过参数可指定样式、效果等。提供实例源码、开发过程视频及实现过程。.........
复制链接

扫一扫