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

• 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）
• 回调参数 ： 改变后的值