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

采用 uniapp-vue3 实现, 是一款数字动画调节器件，支持长按、单点操纵，提供丝滑的增减动画效果，支持自定义配置，适配 web、H5、微信小程序（其他平台小程序未测试过，可自行实行）
  可到插件市场下载实行： https://ext.dcloud.net.cn/plugin?id=22345

• 使用示例
  

• 示例代码
  

1. <template>
2.         <view>
3.                 <view>值：{{ state.val }}</view>
4.                 <view class="light">
5.                         <wo-spinner v-model:defaultValue="state.normalVal" @on-change="changeEvent"></wo-spinner>
6.                         <wo-spinner v-model:defaultValue="state.warningVal"></wo-spinner>
7.                         <wo-spinner v-model:defaultValue="state.abnormalVal"></wo-spinner>
8.                         <wo-spinner :spinnerHeight="'300px'" :spinnerWidth="'70px'" :spinnerRadius="'40px'"
9.                                 :progressWidth="'30px'"></wo-spinner>
10.                         <wo-spinner v-model:defaultValue="state.defaultVal" :spinnerBgColor="'#0079FF'" :progressBgColor="'#ADE8FF'"
11.                                 :maxNumber="10" :middleNumber="0" :criticalNumber="7" :startColor="'#f00'" :middleColor="'#ff0'"
12.                                 :targetColor="'#269446'"></wo-spinner>
13.                 </view>
14.         </view>
16. </template>
18. <script setup lang="ts">
19. import { reactive } from 'vue';
20. const state = reactive({
21.         normalVal: 45,
22.         warningVal: 72,
23.         abnormalVal: 92,
24.         defaultVal: 3,
25.         val: 45
26. });
27. const changeEvent = (el) => {
28.         console.log('点击：', el);
29.         state.val = el.value;
30. }
31. </script>
33. <style lang="scss" scoped>
34. .light {
35.         color: #fff;
36.         padding: 20rpx;
37.         font-size: 24rpx;
38.         margin: 20px;
39.         display: flex;
40.         gap: 20px;
41. }
42. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。