@luguicheng/vue-circle-slider v0.1.2

简介

一个用于圆形滑块的 Vue 组件

A Vue component for a circular slider

示例

👉 点我查看示例

使用

安装

npm i @luguicheng/vue-circle-slider

注册组件

import vueCircleSlider from '@luguicheng/vue-circle-slider'
Vue.use(vueCircleSlider)

<template>
  <div id="App">
    <vue-circle-slider
      :max="max"
      :step-minutes="stepMinutes"
      @input="onChange"
    ></vue-circle-slider>
  </div>
</template>

<script>
  export default {
    name: 'circle-slider',
    data() {
      return {
        initialValue: '22:00-02:00', // '22:30-06:30',  [23, 8]
        stepMinutes: 5 // 间隔的分钟数
      }
    },
    computed: {
      max() {
        // 一天总分钟数
        const totalMinutes = 24 * 60
        let value = totalMinutes / this.stepMinutes
        return value
      }
    },
    methods: {
      onChange(val) {
        console.log('value', val)
      }
    }
  }
</script>

配置

事件