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

发布于:2025-03-01 ⋅ 阅读:(112) ⋅ 点赞:(0)

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

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

  • 使用示例

请添加图片描述

请添加图片描述

  • 示例代码
<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>


网站公告

今日签到

点亮在社区的每一天
去签到