Vue 3的自定义水平/垂直/圆形滑块控件 - vue3-slider

Vue 3的自定义水平/垂直/圆形滑块控件 - vue3-slider
插件名称 vue3-slider
版本号 v1.6.0
发布时间 2021年3月10日
插件作者 freddie-nelson

Vue 3的可自定义滑块组件,可帮助您在应用程序上创建响应式,可访问性,启用触摸功能的水平/垂直/圆形滑块控件。

安装和下载:

# Yarn
$ yarn add vue3-slider

# NPM
$ npm i vue3-slider

如何使用它:

1.导入并注册滑块组件。

import slider from "vue3-slider"
export default {
  components: {
    "vue3-slider": slider
  }
}

2.将基本的滑块控件添加到应用程序。

<vue3-slider v-model="myNumber" />

3.所有可能的道具都可以自定义滑块控件。

width: {
  type: String,
  default: "100%",
  validator: validateLength,
},
height: {
  type: Number,
  default: 6,
},
color: {
  type: String,
  default: "#FB2727",
},
trackColor: {
  type: String,
  default: "#f1f6f828",
},
max: {
  type: Number,
  default: 100,
  required: true,
},
min: {
  type: Number,
  default: 0,
  required: true,
},
step: {
  type: Number,
  default: 1,
  required: true,
  validator(val: number) {
    if (val !== 0) {
      return true;
    } else {
      console.error("[Vue3Slider] Error: Step cannot be 0");
      return false;
    }
  },
},
tooltip: {
  type: Boolean,
  default: false,
},
tooltipText: {
  type: String,
  default: "%v",
  validator(val: string) {
    if (!val.includes("%v")) {
      console.error("[Vue3Slider] Error: tooltip text must contain %v");
      return false;
    }
    return true;
  },
},
tooltipColor: {
  type: String,
  default: "#FFFFFF",
},
tooltipTextColor: {
  type: String,
  default: "#000000",
},
formatTooltip: {
  validator(val: any) {
    if (typeof val !== "function") {
      console.error("[Vue3Slider] Error: formatTooltip must be a function");
      return false;
    } else if (typeof val(0) !== "string") {
      console.error("[Vue3Slider] Error: formatTooltip must return a string");
      return false;
    }
    return true;
  },
},
orientation: {
  type: String,
  default: "horizontal",
  validator(val: string) {
    return val === "horizontal" || val === "vertical" || val === "circular";
  },
},
modelValue: {
  type: Number,
  default: 0,
  required: true,
},
repeat: {
  type: Boolean,
  default: false,
},

变更日志:

v1.6.0(04/11/2021)

  • 壮举:为圆形滑块添加翻转支持

v1.5.8(04/08/2021)

  • 修复:当modelValue从外部更改时,不会重新计算modelValueRef

v1.5.6(04/06/2021)

  • 修复:方向更改后键盘控件不起作用

v1.5.5(04/04/2021)

  • 添加事件监听器