uniapp vue3实现的一款数字动画调节器件，支持长按、单点操作，提供丝滑的增减动画效果

狼性书生2025-02-28 13:30

采用 uniapp-vue3 实现, 是一款数字动画调节器件，支持长按、单点操作，提供丝滑的增减动画效果，支持自定义配置，适配 web、H5、微信小程序（其他平台小程序未测试过，可自行尝试）

可到插件市场下载尝试： https://ext.dcloud.net.cn/plugin?id=22345

使用示例

示例代码

javascript 复制代码

<template>
	<view>
		<view>值：{{ state.val }}</view>
		<view class="light">
			<wo-spinner v-model:defaultValue="state.normalVal" @on-change="changeEvent"></wo-spinner>
			<wo-spinner v-model:defaultValue="state.warningVal"></wo-spinner>
			<wo-spinner v-model:defaultValue="state.abnormalVal"></wo-spinner>
			<wo-spinner :spinnerHeight="'300px'" :spinnerWidth="'70px'" :spinnerRadius="'40px'"
				:progressWidth="'30px'"></wo-spinner>
			<wo-spinner v-model:defaultValue="state.defaultVal" :spinnerBgColor="'#0079FF'" :progressBgColor="'#ADE8FF'"
				:maxNumber="10" :middleNumber="0" :criticalNumber="7" :startColor="'#f00'" :middleColor="'#ff0'"
				:targetColor="'#269446'"></wo-spinner>
		</view>
	</view>

</template>

<script setup lang="ts">
import { reactive } from 'vue';
const state = reactive({
	normalVal: 45,
	warningVal: 72,
	abnormalVal: 92,
	defaultVal: 3,
	val: 45
});
const changeEvent = (el) => {
	console.log('点击：', el);
	state.val = el.value;
}
</script>

<style lang="scss" scoped>
.light {
	color: #fff;
	padding: 20rpx;
	font-size: 24rpx;
	margin: 20px;
	display: flex;
	gap: 20px;
}
</style>