MiniX自绘渲染跨平台框架

# Slider 滑杆

请扫码查看示例

# 介绍

滑动输入条，用于在给定的范围内选择一个值。

# 引入

通过以下方式来引入组件

  1. 使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
  2. 在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

<element name="m-slider" src="@/node_modules/mui-minix/src/slider/index"></element>
<m-slider value="{{v1}}" @m-change="onChange"></m-slider>
1
2
export default {
  data(){
    return {
      v1: 36
    }
  },
  onChange(e){
    this.v1 = e.detail
  }
}
1
2
3
4
5
6
7
8
9
10

# 刻度

通过配置 scales 属性,可以添加刻度信息

<element name="m-slider" src="@/node_modules/mui-minix/src/slider/index"></element>
<div>
  <m-slider class="m-b-30" value="{{v1}}" scales="{{scales1}}" @m-change="onChange1"></m-slider>
  <m-slider class="m-b-30" value="{{v2}}" scales="{{scales2}}" min="{{1}}" max="{{4}}" @m-change="onChange2"></m-slider>
</div>
1
2
3
4
5
export default {
  data(){
    return {
      v1: 36,
      v2: 2,
      scales1:[
        {
          text:'0%',
          value:0
        },
        {
          text:'25%',
          value:25
        },
        {
          text:'50%',
          value:50
        },
        {
          text:'75%',
          value:75
        },
        {
          text:'100%',
          value:100
        }
      ],
      scales2:[
        {
          text:'低',
          value:1
        },
        {
          text:'中',
          value:2
        },
        {
          text:'高',
          value:3
        },
        {
          text:'强',
          value:4
        }
      ]
    }
  },
  onChange1(e){
    this.v1 = e.detail
  },
  onChange2(e){
    this.v2 = e.detail
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.m-b-30{
  margin-bottom:30px;
}
1
2
3

# 主题颜色

通过配置 theme 属性,更改主题颜色。 默认为 brand

<element name="m-slider" src="@/node_modules/mui-minix/src/slider/index"></element>
<div>
  <m-slider class="m-b-30" theme="purple" value="{{v1}}" scales="{{scales1}}" @m-change="onChange1"></m-slider>
  <m-slider class="m-b-30" theme="cyan" value="{{v2}}" scales="{{scales2}}" min="{{1}}" max="{{4}}" @m-change="onChange2"></m-slider>
</div>
1
2
3
4
5
export default {
  data(){
    return {
      v1: 36,
      v2: 2,
      scales1:[
        {
          text:'0%',
          value:0
        },
        {
          text:'25%',
          value:25
        },
        {
          text:'50%',
          value:50
        },
        {
          text:'75%',
          value:75
        },
        {
          text:'100%',
          value:100
        }
      ],
      scales2:[
        {
          text:'低',
          value:1
        },
        {
          text:'中',
          value:2
        },
        {
          text:'高',
          value:3
        },
        {
          text:'强',
          value:4
        }
      ]
    }
  },
  onChange1(e){
    this.v1 = e.detail
  },
  onChange2(e){
    this.v2 = e.detail
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.m-b-30{
  margin-bottom:30px;
}
1
2
3

# 自定义滑条颜色

通过配置 bar-color 属性,可以更改滑条颜色

<element name="m-slider" src="@/node_modules/mui-minix/src/slider/index"></element>
<div>
  <m-slider class="m-b-30" bar-color="#ff8225" value="{{v1}}" scales="{{scales1}}" @m-change="onChange1"></m-slider>
  <m-slider class="m-b-30" bar-color="#ff3b30" value="{{v2}}" scales="{{scales2}}" min="{{1}}" max="{{4}}" @m-change="onChange2"></m-slider>
</div>
1
2
3
4
5
export default {
  data(){
    return {
      v1: 36,
      v2: 2,
      scales1:[
        {
          text:'0%',
          value:0
        },
        {
          text:'25%',
          value:25
        },
        {
          text:'50%',
          value:50
        },
        {
          text:'75%',
          value:75
        },
        {
          text:'100%',
          value:100
        }
      ],
      scales2:[
        {
          text:'低',
          value:1
        },
        {
          text:'中',
          value:2
        },
        {
          text:'高',
          value:3
        },
        {
          text:'强',
          value:4
        }
      ]
    }
  },
  onChange1(e){
    this.v1 = e.detail
  },
  onChange2(e){
    this.v2 = e.detail
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.m-b-30{
  margin-bottom:30px;
}
1
2
3

# 自定义刻度文本

通过配置 scale-text-color 属性,可以配置刻度文本颜色

<element name="m-slider" src="@/node_modules/mui-minix/src/slider/index"></element>
<div>
  <m-slider class="m-b-30" scale-text-color="#995efc" theme="warning" value="{{v1}}" scales="{{scales1}}" @m-change="onChange1"></m-slider>
  <m-slider class="m-b-30" scale-text-color="#00cbb8" theme="success" value="{{v2}}" scales="{{scales2}}" min="{{1}}" max="{{4}}" @m-change="onChange2"></m-slider>
</div>
1
2
3
4
5
export default {
  data(){
    return {
      v1: 36,
      v2: 2,
      scales1:[
        {
          text:'0%',
          value:0
        },
        {
          text:'25%',
          value:25
        },
        {
          text:'50%',
          value:50
        },
        {
          text:'75%',
          value:75
        },
        {
          text:'100%',
          value:100
        }
      ],
      scales2:[
        {
          text:'低',
          value:1
        },
        {
          text:'中',
          value:2
        },
        {
          text:'高',
          value:3
        },
        {
          text:'强',
          value:4
        }
      ]
    }
  },
  onChange1(e){
    this.v1 = e.detail
  },
  onChange2(e){
    this.v2 = e.detail
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.m-b-30{
  margin-bottom:30px;
}
1
2
3

# Api

# Prop

字段 说明 类型 默认值 是否必须
value 当前值 number 0 是
min 最小值 number 0 否
max 最大值 number 100 否
step 步长 number 1 否
disabled 禁用状态 boolean false 否
readonly 是否只读 boolean false 否
track-height 滑轨高度 number 20 否
track-color 滑轨背景颜色 string #f2f2f2 否
track-border-radius 滑轨圆角半径 number 0 否
bar-height 填充块高度 number 0 否
bar-border-radius 填充块圆角半径 number 0 否
bar-color 填充块背景颜色 string - 否
dot-size 填充块最右侧圆点尺寸 number 12 否
dot-color 填充块最右侧圆点背景颜色 string #ffffff 否
dot-top 填充块最右侧圆点顶部距离填充块长度 number 0 否
dot-right 填充块最右侧圆点右侧距离填充块长度 number 0 否
theme 主题颜色 string brand 否
scales-height 刻度容器高度 number 14 否
scales-margin-top 刻度容器距离滑轨的距离 number 8 否
scales 刻度 Scale[] [] 否
scale-text-size 刻度文本字体大小 number 10 否
scale-text-color 刻度文本颜色 string #8a8a8f 否

# Events

名称 说明 回调参数
m-input 滑块位置变化时触发 value: string
m-change 滑块位置变化,且与起始滑动式位置不同时触发 value: string