更新记录

0.0.4（2023-05-22） 下载此版本

优化显示

0.0.3（2023-05-02） 下载此版本

此版本做抽离组件化

点击按钮增大减小值 拖动圆环上剪头快速增减 实时显示当前控件值

自定义增加幅度 step 自定义颜色 自定义事件

0.0.2（2023-05-02） 下载此版本

说明文档

版本 0.0.2

功能说明

此版本做抽离组件化

1. 点击按钮增大减小值
2. 拖动圆环上剪头快速增减
3. 实时显示当前控件值

项目地址

项目地址 点这里。

平台兼容性

uni-app

其他

<template>
    <view class="content">
        <iCircle ref="circle" :name="name" :initVal="initVal" :unit="unit" :minVal="minVal" :maxVal="maxVal" 
        :step="step" :action="action" :bgColor="'linear-gradient(to right, #f52ec7, #5175e9);'"
        :colorbefore="'linear-gradient(to right, #f52ec7, #f52ec7);'"
        :colorafter="'linear-gradient(to right, #5175e9, #5175e9);'"
        >
        </iCircle>
    </view>
</template>
<script>
    import iCircle from '@/components/Draggable-circle/index.vue';
    export default {
        data() {
            return {
                unit: '%1',
                minVal: 211,
                maxVal: 241,
                name: '浓度1',
                step: 0.5,
                initVal: 230
            }
        },
        components: {
            iCircle
        },
        methods: {
            action(){
                //do something 
                // #ifdef MP-WEIXIN
                //小程序获取当前值
                console.log(this.rotVal); 
                // #endif

                // #ifdef H5
                //H5获取当前值
                console.log(this.$refs.circle.rotVal);
                // #endif
            }

        }
    }
</script>
<style>
</style>