Vue.js的可自定义范围滑块输入 - vue-custom-range-slider

Vue.js的可自定义范围滑块输入 - vue-custom-range-slider
插件名称 vue-custom-range-slider
发布时间 2020年11月21日
插件作者 Bjornnyborg

基于Vue和本机范围输入构建的自定义范围滑块组件。支持自定义值,标签,拇指等。

变更日志:

2020年11月19日

  • v2.5.0:从商店使用showDeletion和showEdition

2020年10月18日

  • v2.5.0:关于删除的最终确认。

2020年6月16日

  • v2.4.1

安装和下载:

# Yarn
$ yarn add vue-custom-range-slider

# NPM
$ npm i vue-custom-range-slider --save

如何使用它:

1.导入可自定义范围滑块。

import CustomSlider from "vue-custom-range-slider";
import "vue-custom-range-slider/dist/vue-custom-range-slider.css";

2.将custom-slider组件添加到模板。

<custom-slider :values="sliderValues" raising v-model="slider"/>

3.注册组件并将其安装到应用程序。

export default {
  name: "app",
  components: {
    CustomSlider
  },
  data() {
    return {
      changed: false,
      slider: "a",
      sliderValues: null,
      sliderValues1: [
        {
          label: "Not at all",
          value: "a"
        },
        {
          label: "A tiny bit",
          value: "b"
        },
        {
          label: "Its ok",
          value: "c"
        },
        {
          label: "Its very good",
          value: "d"
        },
        {
          label: "Its AMAZING!",
          value: "e"
        }
      ],
      sliderValues2: [
        {
          label: "Something else",
          value: "1"
        },
        {
          label: "Something else else",
          value: "2"
        },
        {
          label: "Comp",
          value: "3"
        }
      ]
    };
  }
};

4.所有默认组件道具。

value: {
  type: String,
  required: false,
  default: ""
},
values: {
  type: Array,
  required: false,
  default: () => []
},
min: {
  type: String,
  required: false,
  default: "0"
},
max: {
  type: String,
  required: false,
  default: "100"
},
step: {
  type: String,
  required: false,
  default: "1"
},
hideLabel: {
  type: Boolean,
  required: false,
  default: false
},
raising: {
  type: Boolean,
  required: false,
  default: false
}