一个可定制的范围滑块组件，支持工具提示、值提示、单/多滑块等。
同时兼容Vue.js 3和Vue.js 2。
如何使用它。
1.导入注册滑块组件。
import Slider from '@vueform/slider'
// theme
<style src="@vueform/slider/themes/default.css"></style>
export default {
components: {
Slider,
}
}
2.2.将滑块组件添加到模板中，并按如下方式确定初始值。
export default {
components: {
Slider,
},
data() {
return {
value: 30
}
}
}
3.可用组件来定制范围滑块。
id: {
type: [String, Number],
required: false,
},
disabled: {
type: Boolean,
required: false,
default: false,
},
min: {
type: Number,
required: false,
default: 0
},
max: {
type: Number,
required: false,
default: 100
},
step: {
type: Number,
required: false,
default: 1
},
orientation: {
type: String,
required: false,
default: 'horizontal',
},
direction: {
type: String,
required: false,
default: 'ltr',
},
tooltips: {
type: Boolean,
required: false,
default: true,
},
options: {
type: Object,
required: false,
default: () => ({})
},
merge: {
type: Number,
required: false,
default: -1
},
format: {
type: [Object, Function, Boolean],
required: false,
default: null,
},
classes: {
type: Object,
required: false,
default: () => ({}),
},
showTooltip: {
type: String,
required: false,
default: 'always'
},
tooltipPosition: {
type: String,
required: false,
default: null,
},
lazy: {
type: Boolean,
required: false,
default: true,
},
ariaLabelledby: {
type: String,
required: false,
default: undefined,
},
4.事件处理程序。
- @change: 在值改变后
- @update：在数值更新后
预览。
更改日志。
v2.1.3 (09/23/2022)
- A11y的改进。
- 增加了 ariaLabelledby道具。
v2.1.2 (07/23/2022)
- 修复：tailwind构建修复
v2.1.1 (07/11/2022)
- 兼容Vue.js 2.7
v2.0.10 (05/11/2022)
- 手柄数量变化时刷新滑块。
v2.0.9 (02/26/2022)
- 增加了对数组类的支持。
v2.0.8 (12/10/2021)
- 增加了懒人选项，默认情况下防止拖动时更新v-model
- 添加了tailwind.css。
- 错误修复
v2.0.6 (11/23/2021)
- 解决了devDependencies的冲突。
v2.0.7 (11/23/2021)
- 跟进了nouislider的CSS修改。
v2.0.5 (09/07/2021)
- 更新了default.css类和一般的类对象。请更新到最新的、扩展的版本。
- 更新到最新的nouislider。
- 添加了tooltipPosition道具。
- 添加了选项道具。
- 错误修正
v2.0.4 (08/02/2021)
- index.d.ts导入修复
v2.0.3 (06/29/2021)
- Tailwind插件的修复。
v2.0.1 (06/28/2021)
- 错误修复
v2.0.0 (06/28/2021)
- 移除高度道具并重写default.css。
- 增加了classes道具。
- 增加了CSS变量。
- id不再默认为undefined而不是slider。
The postCustom Range Slider For Vue.js 3appeared first onVue Script.
