Switch 开关选择器

纯 CSS 实现的圆环形的进度条组件，支持渐变。

提示

此组件使用 css 的 conic-gradient 实现的，目前测试在H5、微信小程序、支付宝小程序、抖音小程序、APP中都能正常使用，其他平台暂未测试。

提示

因为此组件使用 css 的 conic-gradient 来实现，所以不支持设置进度条两端的圆角，另外，还不能使用 transition 设置过渡效果，当前组件的过渡效果是通过组件内设置递归函数实现的。

基础使用

通过 percent 设置当前进度，0-100。

<template>
    <hi-circle-progress :percent="percent"></hi-circle-progress>
</template>

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

    // 进度
    const percent = ref(75);
</script>

主题

通过 theme 属性设置主题。

<template>
    <hi-circle-progress :percent="percent" theme="primary"></hi-circle-progress>
    <hi-circle-progress :percent="percent" theme="success"></hi-circle-progress>
    <hi-circle-progress :percent="percent" theme="warning"></hi-circle-progress>
    <hi-circle-progress :percent="percent" theme="error"></hi-circle-progress>
    <hi-circle-progress :percent="percent" theme="info"></hi-circle-progress>
</template>

自定义颜色

• 通过 inactiveColor 属性设置未激活进度的颜色。
• 通过 color 设置激活进度的颜色，可以是一个颜色字符串，也可以是一组颜色数组（渐变进度条）。

<template>
    <!-- 自定义单色进度条 -->
    <hi-circle-progress :percent="percent" inactiveColor="#ff9900" color="#ff0000"></hi-circle-progress>

    <!-- 自定义多色渐变进度条 -->
    <hi-circle-progress
        :percent="percent"
        :color="['#ff0000', '#ff9900', '#ff0099', '#0099ff', '#00ff99', '#99ff00', '#9900ff']"
    ></hi-circle-progress>
</template>

进度条粗细

通过 width 属性设置进度条粗细。

<template>
    <hi-circle-progress :percent="percent" width="10px" theme="success"></hi-circle-progress>
    <hi-circle-progress :percent="percent" width="32rpx" theme="warning"></hi-circle-progress>
</template>

自定义大小

通过 size 属性设置圆的大小。

<template>
    <hi-circle-progress :percent="percent" size="60px" theme="primary"></hi-circle-progress>
    <hi-circle-progress :percent="percent" size="260rpx" theme="success"></hi-circle-progress>
</template>

状态展示

通过 status 设置进度条中间内容状态：

• on: 进行中，此时会显示 75% 这样的文字，显示的内容格式可以通过 format 属性自定义。
• success: 完成，此时会显示一个成功图标，图标名称、颜色和大小可以自定义。
• fail: 失败，此时会显示一个失败图标，图标名称、颜色和大小可以自定义。

提示

组件不会自动更新状态，需在使用的地方去控制，如果不需要显示状态，可以将 showStatus 组件设置未 false，或通过默认 slot 将状态内容替换掉。

<template>
    <!-- 进行中 -->
    <hi-circle-progress :percent="percent" status="on" theme="primary"></hi-circle-progress>

    <!-- 完成 -->
    <hi-circle-progress :percent="percent" status="success" theme="success"></hi-circle-progress>

    <!-- 失败 -->
    <hi-circle-progress :percent="percent" status="fail" theme="error"></hi-circle-progress>
</template>

自定义状态文字格式

• 通过 format 可以自定义状态文字的格式，一个字符串，格式为："{percent}%"，其中 {percent} 表示进度值。

<template>
    <!-- 自定义文字格式 -->
    <hi-circle-progress :percent="percent" status="on" format="已完成{percent}%"></hi-circle-progress>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
theme	主题	String	-	-	-
size	大小	String	-	-	-
width	进度条粗细	String	-	-	-
percent	进度值	Number	-	-	-
inactiveColor	未激活进度的颜色	String	-	-	-
color	激活进度的颜色	[String, Array[String]]	-	-	-
bg	背景	String	-	-	-
status	状态	String	on	on、success、fail	-
format	状态内容格式字符串	String	"{percent}%"	-	-
step	更新进度值时过渡效果每次更新的步长	Number	0.1	-	-
interval	更新进度值时过渡效果的间隔时间，毫秒	Number	10	-	-
showStatus	是否显示状态内容	Boolean	true	false	-
statusColor	状态内容颜色	String	-	-	-
statusFontSize	状态内容字体大小	String	-	-	-
successIcon	成功图标名称	String	__checked	-	-
successIconColor	成功图标颜色	String	-	-	-
successIconSize	成功图标大小	String	-	-	-
failIcon	失败图标名称	String	__error	-	-
failIconColor	失败图标颜色	String	-	-	-
failIconSize	失败图标大小	String	-	-	-

Slots

名称	说明	参数	版本
default	默认内容	-	-

样式变量

组件提供了以下样式变量，可以在使用时设置这些变量来修改组件的样式。

变量名	默认值	版本
--hi-circle-progress-size	90px	-
--hi-circle-progress-background	-	-
--hi-circle-progress-width	10px	-
--hi-circle-progress-content-justify-content	center	-
--hi-circle-progress-content-flex-direction	column	-
--hi-circle-progress-content-align-items	center	-
--hi-circle-progress-content-text-align	center	-
--hi-circle-progress-status-font-size	1.15em	-
--hi-circle-progress-status-color	-	-
--hi-circle-progress-status-icon-font-size	1.15em	-
--hi-circle-progress-status-icon-color	-	-
--hi-circle-progress-status-success-icon-font-size	var(--hi-circle-progress-status-icon-font-size, 1.15em)	-
--hi-circle-progress-status-success-icon-color	var(--hi-circle-progress-status-icon-color, var(--hi-circle-progress-active-color, var(--hi-theme-primary)))	-
--hi-circle-progress-status-fail-icon-font-size	var(--hi-circle-progress-status-icon-font-size, 1.15em)	-
--hi-circle-progress-status-fail-icon-color	var(--hi-circle-progress-status-icon-color, var(--hi-circle-progress-active-color, var(--hi-theme-error)))	-