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>
相关推荐
gurenchang26 分钟前
实现从一个微信小程序跳转到另一个微信小程序
微信小程序·小程序
Hamm27 分钟前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
小小小小宇1 小时前
前端国际化看这一篇就够了
前端
大G哥1 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext1 小时前
html初识
前端·html
小小小小宇2 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827522 小时前
vue中 vue.config.js反向代理
前端
Java&Develop2 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk2 小时前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务
摆烂工程师2 小时前
全网最详细的5分钟快速申请一个国际 “edu教育邮箱” 的保姆级教程!
前端·后端·程序员