DolphinHybrid
点我扫二维码，查看demo

# Slider 滑块组件

# 介绍

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

# 引入

通过以下方式来按需注册组件。

import Vue from 'vue';
import { Slider } from '@dolphin-iot/ui'

Vue.use(Slider);
1
2
3
4

# 代码演示

# 基础用法

通过 v-model 参数控制滑块的位置。

<template>
<mx-slider v-model="value" />
</template>
<script>
export default{
    data(){
        return {
            value:50
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

# 自定义取值范围

通过 min, max 参数控制滑块的取值范围。min 默认为 0, max 默认为 100

<template>
<mx-slider v-model="range" :min="20" :max="80"></mx-slider>
</template>
<script>
export default {
    data(){
        return {
            range: 50,
            min:30,
            max:70
        }
    }
}
</script>
<style lang="scss">
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;
  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
  h4 {
    padding: 20px 10px;
    font-size: 16px;
    font-weight: bold;
  }
}
.mgb-20{
  margin-bottom: 20px;
}
</style>
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

# 自定义步长

通过 step 参数可以控制组件每次滑动的距离。step 默认为 1。

<template>
<div>
    <mx-slider v-model="step" :step="20"></mx-slider>
</div>
</template>
<script>
export default {
    data(){
        return {
            step:40,
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 刻度

结合slider-scale组件中的 value 参数可以控制组件显示的刻度文本，实现刻度非均匀分布。value 默认为 0。

<template>
<div class="demo-list">
    <div class="panel">
      <h4>刻度</h4>
      <div class="demo-panel">
        <mx-slider class="mgb-20" v-model="scale" :min="1" :max="4"  @change="onChange" >
          <mx-slider-scale :value="1">低</mx-slider-scale>
          <mx-slider-scale :value="2">中</mx-slider-scale>
          <mx-slider-scale :value="3">高</mx-slider-scale>
          <mx-slider-scale :value="4">强</mx-slider-scale>
        </mx-slider>
        <mx-slider class="mgb-20" v-model="scale" :min="1" :max="4"  @change="onChange" >
          <mx-slider-scale :value="1">低</mx-slider-scale>
          <mx-slider-scale :value="4">高</mx-slider-scale>
        </mx-slider>
        <mx-slider class="mgb-20" v-model="scale" :min="1" :max="4"   @change="onChange" >
          <mx-slider-scale :value="1">低</mx-slider-scale>
          <mx-slider-scale :value="3">高</mx-slider-scale>
        </mx-slider>
        <mx-slider class="mgb-20" v-model="scale" :min="1" :max="4"  @change="onChange" >
          <mx-slider-scale :value="2">中</mx-slider-scale>
          <mx-slider-scale :value="3">高</mx-slider-scale>
        </mx-slider>
        <mx-slider class="mgb-20" v-model="basic"   @change="onChange" >
          <mx-slider-scale :value="20">20%</mx-slider-scale>
          <mx-slider-scale :value="30">30%</mx-slider-scale>
          <mx-slider-scale :value="60">60%</mx-slider-scale>
          <mx-slider-scale :value="80">80%</mx-slider-scale>
        </mx-slider>
      </div>
    </div>
</div>
</template>
<script>
export default {
    data(){
        return {
            basic:2,
            scale: '',
        }
    }
}
</script>
<style lang="scss">
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;

  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
  h4 {
    padding: 20px 10px;
    font-size: 16px;
    font-weight: bold;
  }
}
.mgb-20{
  margin-bottom: 20px;
}
</style>
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
55
56
57
58
59
60
61
62
63
64
65
66

# 主题

通过 theme 参数可以控制的颜色主题,支持 brand purple blue-purple blue cyan yellow orange orange-red gray-offline 九种主题颜色。theme 默认为 brand。

<template>
<div>
    <mx-slider class="mgb-20" theme="cyan" v-model="basic" :min="1"  :max="4"></mx-slider>
    <mx-slider theme="purple" v-model="basic" :min="1"  :max="4"></mx-slider>
</div>
</template>
<script>
export default {
    data(){
        return {
            basic:2,
        }
    }
}
</script>
<style scoped>
.mgb-20{
    margin-bottom:20px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 渐变色滑块

通过 linear 参数可以设置组件为渐变色。linear 默认为 []。

<template>
<div>
    <mx-slider class="mgb-20" :linear="linear" v-model="basic" :min="1"  :max="4"></mx-slider>
    <mx-slider :linear="linear1" v-model="basic" :min="1"  :max="4"></mx-slider>
</div>
</template>
<script>
export default {
    data(){
        return {
            basic:2,
            linear:['#ffaa10','#00cbb8'],
            linear1:['#ffaa10','#995efc']
        }
    }
}
</script>
<style scoped>
.mgb-20{
    margin-bottom:20px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 禁用

通过 disabled 参数可以控制是否为禁用状态。disabled 默认为 false。

<template>
<div>
    <mx-slider v-model="basic" :step="20" :disabled="true"></mx-slider>
</div>
</template>
<script>
export default {
    data(){
        return {
            basic:35
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Api

# Slider Props

参数 说明 类型 默认值 是否必须
value 当前值，可使用v-model number 0 是
min 最小值 number 0 -
max 最大值 number 100 -
step 步长 number 1 -
theme 主题颜色，可选值为:brand purple blue-purple blue cyan yellow orange orange-red gray-offline string brand -
scales 已废弃 刻度 string[] [] -
linear 渐变色,从左往右,最后一个颜色为滑块的颜色 string[] [] -
disabled 禁用 boolean false -

# Slider Events

事件名称 说明 回调参数
input 滑块滑动时触发 e: Number
change 滑动结束且组件值有变化时触发 e: Number

# SliderScale Props

参数 说明 类型 默认值 是否必须
value 刻度 number 0 是

# SliderScale Slots

名称 说明
default 刻度自定义内容
更新时间: 12/3/2021, 1:36:49 PM

← Rate 评分 →