1.1.1 • Published 1 year ago
mm-slider v1.1.1
npm地址
https://www.npmjs.com/package/mm-slider
使用方法
1、下载插件
npm i mm-slider
2、在vue 的min.js中导入并注册
import mmSlider from 'mm-slider'
import 'mm-slider/mm-slider.css'
Vue.use(mmSlider)
3、在页面中使用
<mmSlider v-module="value"></htUniversalLine>
参数
v-model: 绑定值【必填】
type:Array
max:最大值
type:Number
默认值:100
min:最小值
type:Number
默认值:0
vertical:是否竖向
type:Boolean
默认值:true
colorList:选择器背景渐变色
type:Array
默认值:"#F56C6C", "#67C23A", "#409EFF"
selectColor:选中区域边框颜色
type:string
默认值:“#000”
customOptions:自定义下拉列表
type:Array
默认值:空数组
样例:
[ { lebal:'测试', value:[10,20] }, ... ]
selectSize:选择框大小
type:string
默认值:small【medium / small / mini】
disabled:是否禁用
type:Booblean
默认值:false
debounce:延迟毫秒数
type:Number
默认值:300
step:步长
type:Number
默认值:1
formatTooltip:格式化函数
type:Function
marks: 标记列表
描述: 标记, key 的类型必须为 number 且取值在闭区间 [min, max]
内,每个标记可以单独设置样式
type: object
样例:
{ 0: '0°C', 8: '8°C', 37: '37°C', 50: { style: { color: '#1989FA' }, label: this.$createElement('strong', '50%') } }
showTooltip: 是否显示 tooltip
type: Boolean
默认值:true
formatTooltip: 格式化 tooltip message
type: Function
事件
change
- 值改变时触发(使用鼠标拖曳时,只在松开鼠标后触发)
- 回调参数 : 改变后的值