Epr-components NPM

🚀 体验地址 Demo

🚄 使用教程

安装

npm i epr-components
// or
yarn add epr-components

使用

<epr-slider-button :min='min' :max="max" :step="step" v-model="value" :precision="precision" @change="sliderBtnChange" />
<epr-slider-input :min='min' :max="max" :step="step2" v-model="value2" :precision="precision" @change="sliderInputChange" />

import { eprSliderButton, eprSliderInput } from 'epr-components'
import 'epr-components/dist/style.css'

export default defineComponent({
  name: 'App',
  components: {
    eprSliderButton,
    eprSliderInput
  },
  setup () {
    const config: Config = reactive({
      min: 0,
      max: 100,
      step: [1, '2', '3%'],
      step2: [1, 2],
      value: 50,
      value2: 30,
      precision: 3
    })

    function sliderBtnChange (e: number) {
      config.value = e
    }

    function sliderInputChange (e: number) {
      config.value2 = e
    }

    return {
      ...toRefs(config),
      sliderBtnChange,
      sliderInputChange
    }
  }
})

📖 文档

属性 | eprSliderButton | 说明 | eprSliderInput | 说明 | | :-------------: | ------------------------------------------------------------ | :------------: | ------------------------------------------------------------ | | min | number - 最小值 | min | number - 最小值 | | max | number - 最大值 | max | number - 最大值 | | step | (string l number)[] - 步进。第一位是鼠标单击左右两侧的加减按钮步进，第二位是鼠标长按左右两侧的加减按钮的进步，第三位是鼠标点击滑块左右两侧滑道的步进值，第四位是鼠标长按滑块左右两侧滑道的步进值。步进值可以为[整数, 整数, '整数'， '百分比']： [1, 2, '3', '4%']。 | step | number[] - 步进。第一位是鼠标左右两侧的加减按钮的进步，第二位是键盘上下按键的步进值。这里的步进值只能为： [整数, 整数]：[1, 2]。但是第二位可以为空，既取消键盘的步进。 | | v-model | number - 当前值 | v-model | number - 当前值 | | precision | number - 精度 | precision | number - 精度 |