013_Slider滑块

1. Slider滑块

1.1. 通过拖动滑块在一个固定区间内进行选择。

1.2. Slider属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	number	无	0
min	最小值	number	无	0
max	最大值	number	无	100
disabled	是否禁用	boolean	无	false
step	步长	number	无	1
show-input	是否显示输入框, 仅在非范围选择时有效	boolean	无	false
show-input-controls	在显示输入框的情况下, 是否显示输入框的控制按钮	boolean	无	true
input-size	输入框的尺寸	string	large / medium / small / mini	small
show-stops	是否显示间断点	boolean	无	false
show-tooltip	是否显示tooltip	boolean	无	true
format-tooltip	格式化tooltip message	function(value)	无	无
range	是否为范围选择	boolean	无	false
vertical	是否竖向模式	boolean	无	false
height	Slider高度, 竖向模式时必填	string	无	无
label	屏幕阅读器标签	string	无	无
debounce	输入时的去抖延迟, 毫秒, 仅在show-input等于true时有效	number	无	300
tooltip-class	tooltip的自定义类名	string	无	无
marks	标记, key的类型必须为number且取值在闭区间[min, max]内, 每个标记可以单独设置样式	object	无	无

1.3. Slider事件

事件名称	说明	回调参数
change	值改变时触发(使用鼠标拖曳时, 只在松开鼠标后触发)	改变后的值
input	数据改变时触发(使用鼠标拖曳时, 活动过程实时触发)	改变后的值

2. Slider滑块例子

2.1. 使用脚手架新建一个名为element-ui-slider的前端项目, 同时安装Element插件。

2.2. 编写App.vue 

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
  #app {
    width: 600px;
    margin: 0 0 50px 10px;
  }
</style>

2.3. 编写index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Slider from '../components/Slider.vue'
import RangeSlider from '../components/RangeSlider.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Slider' },
  { path: '/Slider', component: Slider },
  { path: '/RangeSlider', component: RangeSlider }
]

const router = new VueRouter({
  routes
})

export default router

2.4. 在components下创建Slider.vue

<template>
  <div>
    <h1>基础用法</h1>
    <h4>在拖动滑块时, 显示当前值。通过设置绑定值自定义滑块的初始值。</h4>
    <div class="block">
      <span>默认</span>
      <el-slider v-model="base_value1"></el-slider>
    </div>
    <div class="block">
      <span>自定义初始值</span>
      <el-slider v-model="base_value2"></el-slider>
    </div>
    <div class="block">
      <span>隐藏 Tooltip</span>
      <el-slider v-model="base_value3" :show-tooltip="false"></el-slider>
    </div>
    <div class="block">
      <span>格式化 Tooltip</span>
      <el-slider v-model="base_value4" :format-tooltip="formatTooltip"></el-slider>
    </div>
    <div class="block">
      <span>禁用</span>
      <el-slider v-model="base_value5" disabled></el-slider>
    </div>

    <h1>离散值-选项可以是离散的</h1>
    <h4>改变step的值可以改变步长, 通过设置show-stops属性可以显示间断点。</h4>
    <div class="block">
      <span>不显示间断点</span>
      <el-slider v-model="step_value1" :step="10"></el-slider>
    </div>
    <div class="block">
      <span>显示间断点</span>
      <el-slider v-model="step_value2" :step="10" show-stops></el-slider>
    </div>

    <h1>带有输入框-通过输入框设置精确数值</h1>
    <h4>设置show-input属性会在右侧显示一个输入框。</h4>
    <div class="block">
      <el-slider v-model="input_value" show-input></el-slider>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      base_value1: 0,
      base_value2: 50,
      base_value3: 36,
      base_value4: 48,
      base_value5: 42,
      step_value1: 0,
      input_value: 0
    }
  },
  methods: {
    formatTooltip (val) {
      return val / 100
    }
  }
}
</script>

2.5. 在components下创建RangeSlider.vue

<template>
  <div>
    <h1>范围选择-支持选择某一数值范围</h1>
    <h4>设置range即可开启范围选择, 此时绑定值是一个数组, 其元素分别为最小边界值和最大边界值。</h4>
    <div class="block">
      <el-slider v-model="range_value" range show-stops :max="10"></el-slider>
    </div>

    <h1>竖向模式</h1>
    <h4>设置vertical可使Slider变成竖向模式, 此时必须设置高度height属性。</h4>
    <div class="block">
      <el-slider v-model="vertical_value" vertical height="200px"></el-slider>
    </div>

    <h1>展示标记</h1>
    <h4>设置marks属性可以展示标记。</h4>
    <div class="block">
      <el-slider v-model="value" range :marks="marks"></el-slider>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      range_value: [4, 8],
      vertical_value: 0,
      value: [30, 60],
      marks: {
        0: '0°C',
        8: '8°C',
        37: '37°C',
        50: {
          style: {
            color: '#1989FA'
          },
          label: this.$createElement('strong', '50%')
        }
      }
    }
  }
}
</script>

2.6. 运行项目, 访问http://localhost:8080/#/Slider

2.7. 运行项目, 访问http://localhost:8080/#/RangeSlider