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

采用 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>
相关推荐
拉不动的猪5 分钟前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪13 分钟前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy1 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom2 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom2 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom2 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom2 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom2 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI3 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端
ONE_Gua3 小时前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·后端·爬虫