进度条

进度条组件。

基础使用

通过 src 属性设置头像图片。

<template>
	<pure-swiper
		:list="list"
		:current="current"
		@onChange="onChange"
	>
		<template #progresor>
			<pure-progresor
				@onPrev="onPrev"
				@onNext="onNext"
				:disabledPrev="current === 0"
				:disabledNext="current === list.length - 1"
			></pure-progresor>
		</template>
	</pure-swiper>
</template>

<script setup>
	import { ref } from "vue";

	const list = ref([
		{ src: "/static/images/elephant.jpg" },
		{ src: "/static/images/elephant.jpg" },
		{ src: "/static/images/elephant.jpg" },
		{ src: "/static/images/elephant.jpg" },
		{ src: "/static/images/elephant.jpg" }
	]);
	const current = ref(0);

	// 切换事件
	function onChange(e) {
		current.value = e.detail.current;
	}

	// 上一个
	function onPrev() {
		current.value--;
	}

	// 下一个
	function onNext() {
		current.value++;
	}
</script>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
prevIconName	String	__arrow-left	上一个图标名称
nextIconName	String	__arrow-right	下一个图标名称
prevText	String		上一个按钮文本
nextText	String		下一个按钮文本
disabledPrev	Boolean	false	是否禁用上一个按钮
disabledNext	Boolean	false	是否禁用下一个按钮

事件

名称	参数	说明
onPrev		上一个按钮点击事件
onNext		下一个按钮点击事件

插槽

名称	参数	说明
#default		默认，其他内容
#prev		上一个按钮
#next		下一个按钮

样式变量

名称	说明
--pure-progresor-flex-direction	布局方向
--pure-progresor-align-items	内容对齐方式
--pure-progresor-justify-content	内容对齐方式
--pure-progresor-height	高度
--pure-progresor-width	宽度
--pure-progresor-position	定位方式
--pure-progresor-top	定位位置
--pure-progresor-left	定位位置
--pure-progresor-right	定位位置
--pure-progresor-bottom	定位位置
--pure-progresor-padding	内边距
--pure-progresor-margin	外边距
--pure-progresor-gap	内容间距
--pure-progresor-font-size	字体大小
--pure-progresor-color	字体颜色
--pure-progresor-item-width	按钮宽度
--pure-progresor-item-height	按钮高度
--pure-progresor-item-background	按钮背景
--pure-progresor-item-border-radius	按钮圆角
--pure-progresor-item-disabled-opacity	禁用按钮透明度
--pure-progresor-item-disabled-background	禁用按钮背景
--pure-progresor-item-disabled-color	禁用按钮文本颜色