进度条 xProgress

---

预览

介绍

使用，允许设置min,max值，如果你的双向绑定的vale值超过min,max的合法值，将会被转换为正确值。

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-progress/x-progress.uvue

使用

<x-progress></x-progress>

Props 属性

名称	说明	类型	默认值
min	最小值	number	0
max	最大值	number	100
modelValue	当前的值 等同v-model=""	number	0
color	进度条激活时的颜色 为空时，取全局配置的值	string	""
bgColor	背景颜色	string	"info"
darkBgColor	暗黑背景颜色，如果不设置取inputDarkColor	string	""
showLabel	是否显示进度条上的label文本	boolean	false
labelColor	文本颜色	string	"white"
labelFontSize	文本文字大小	string	"10"
size	进度条的大小	string	"4"
round	圆角。 为空值时，取全局的统一值	string	""
duration	动画持续的时间	number	350
linearColor	渐变背景，使用使用正经的background-image请查阅官方文档,例：'linear-gradient(to bottom,red,green)' 注意不要动态在渐变和color间切换原生不支持这样操作，会渲染异常的。	string	''

Events 事件

名称	参数	说明
update:modelValue	-	-

Slots 插槽

名称	说明	数据
default	默认标签文本插槽，需要设置:showLabel="true"	value: number value: number percentage: number percentage: number
right	右插槽	value: number value: number percentage: number percentage: number

Ref 方法

名称	参数	返回值	说明

示例文件路径

/pages/zhanshi/progress

示例源码

uvue

<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor"
			:front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->

	<x-sheet>
		<x-text font-size="18" class=" text-weight-b mb-8">进度条 Progress</x-text>
		<x-text color="#999999">
			主题，圆角风格可全局统一配置
		</x-text>
	</x-sheet>

	<x-sheet>
		<x-progress v-model="val" class="mb-12"></x-progress>
		<x-progress v-model="val" class="mb-12" color="danger"></x-progress>
		<x-progress v-model="val" color="error"></x-progress>
	</x-sheet>

	<x-sheet>
		<x-text font-size="18" class=" text-weight-b ">显示label</x-text>
	</x-sheet>
	<x-sheet>
		<x-progress v-model="val" class="mb-12" size="12" :show-label="true"></x-progress>
		<x-progress v-model="val" class="mb-12" size="12" :show-label="true" color="danger"></x-progress>
		<x-progress v-model="val" size="12" :show-label="true"
			linear-color="linear-gradient(to right, #FFEB3A, #4DEF8E)"></x-progress>
	</x-sheet>

	<x-sheet>
		<x-text font-size="18" class=" text-weight-b ">设置圆角</x-text>
	</x-sheet>
	<x-sheet>
		<x-progress v-model="val" class="mb-12" round="0"></x-progress>
		<view>
			<x-progress v-model="val" round="0" color="error"></x-progress>
		</view>
	</x-sheet>

	<x-sheet style="display: flex;flex-direction: row;">
		<x-button class="mr-32" @click="val = val+10">增加</x-button>
		<x-button color="error" @click="val = val-10">减少</x-button>
	</x-sheet>


	<x-sheet>
		<x-text font-size="18" class=" text-weight-b ">设置右插槽，显示内容</x-text>
	</x-sheet>
	<x-sheet>
		<x-progress :model-value="50" round="0" :max="150">
			<template #right="{percentage,value}">
				<x-text font-size="12" class="ml-12">{{percentage}}%,{{value}}元</x-text>
			</template>
		</x-progress>
	</x-sheet>

	<view style="height:50px"></view>

</template>

<script lang="uts" setup>
	const val = ref(50)
</script>

<style lang="scss">

</style>