【Vue.js】Vue.js组件库Element中的Select选择器、Cascader级联选择器、Switch开关和Slider滑块

约定不等于承诺〃 2022-12-01 05:29 262阅读 0赞

## 1、Select 选择器 ##

当选项过多时，使用下拉菜单展示并选择内容。

#### 基础用法 ####

使用广泛的基础单选。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]  
v-model的值为当前被选中的el-option的 value 属性值。

<template>
      <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </template>
    
    <script> export default { data() { return { options: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }, { value: '选项3', label: '蚵仔煎' }, { value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }], value: '' } } } </script>

#### 有禁用选项 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1][]  
在el-option中，设定disabled值为 true，即可禁用该选项。

<template>
      <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
        </el-option>
      </el-select>
    </template>
    
    <script> export default { data() { return { options: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶', disabled: true }, { value: '选项3', label: '蚵仔煎' }, { value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }], value: '' } } } </script>

#### 禁用状态 ####

选择器不可用状态。  
![20200826143746637.png_pic_center][]  
为el-select设置disabled属性，则整个选择器不可用。

<template>
      <el-select v-model="value" disabled placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </template>
      
    <script> export default { data() { return { options: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }, { value: '选项3', label: '蚵仔煎' }, { value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }], value: '' } } } </script>

#### 可清空单选 ####

包含清空按钮，可将选择器清空为初始状态。  
![20200826144337686.png_pic_center][]  
为el-select设置clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选。

<template>
      <el-select v-model="value" clearable placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </template>
    
    <script> export default { data() { return { options: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }, { value: '选项3', label: '蚵仔煎' }, { value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }], value: '' } } } </script>

#### 基础多选 ####

适用性较广的基础多选，用 Tag 展示已选项。  
![20200826144902355.png_pic_center][]  
为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。

<template>
      <el-select v-model="value1" multiple placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    
      <el-select v-model="value2" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </template>
    
    <script> export default { data() { return { options: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }, { value: '选项3', label: '蚵仔煎' }, { value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }], value1: [], value2: [] } } } </script>

#### 自定义模板 ####

可以自定义备选项，将自定义的 HTML 模板插入el-option的 slot 中即可。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2][]

<template>
      <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
          <span style="float: left">{
       { item.label }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{
       { item.value }}</span>
        </el-option>
      </el-select>
    </template>
    
    <script> export default { data() { return { cities: [{ value: 'Beijing', label: '北京' }, { value: 'Shanghai', label: '上海' }, { value: 'Nanjing', label: '南京' }, { value: 'Chengdu', label: '成都' }, { value: 'Shenzhen', label: '深圳' }, { value: 'Guangzhou', label: '广州' }], value: '' } } } </script>

#### 分组 ####

备选项进行分组展示，使用el-option-group对备选项进行分组，它的label属性为分组名。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3][]

<template>
      <el-select v-model="value" placeholder="请选择">
        <el-option-group v-for="group in options" :key="group.label" :label="group.label">
          <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-option-group>
      </el-select>
    </template>
    
    <script> export default { data() { return { options: [{ label: '热门城市', options: [{ value: 'Shanghai', label: '上海' }, { value: 'Beijing', label: '北京' }] }, { label: '城市名', options: [{ value: 'Chengdu', label: '成都' }, { value: 'Shenzhen', label: '深圳' }, { value: 'Guangzhou', label: '广州' }, { value: 'Dalian', label: '大连' }] }], value: '' } } } </script>

#### 可搜索 ####

可以利用搜索功能快速查找选项，为el-select添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个filter-method来实现。filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。  
![20200826152731414.png_pic_center][]

<template>
      <el-select v-model="value" filterable placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </template>
    
    <script> export default { data() { return { options: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }, { value: '选项3', label: '蚵仔煎' }, { value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }], value: '' } } } </script>

#### 远程搜索 ####

从服务器搜索数据，输入关键字进行查找。为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性，比如此例中的item.value。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 5][]

<template>
      <el-select v-model="value" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </template>
    
    <script> export default { data() { return { options: [], value: [], list: [], loading: false, states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"] } }, mounted() { this.list = this.states.map(item => { return { value: `value:${ item}`, label: `label:${ item}` }; }); }, methods: { remoteMethod(query) { if (query !== '') { this.loading = true; setTimeout(() => { this.loading = false; this.options = this.list.filter(item => { return item.label.toLowerCase() .indexOf(query.toLowerCase()) > -1; }); }, 200); } else { this.options = []; } } } } </script>

#### 创建条目 ####

可以创建并选中选项中不存在的条目，使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真。本例还使用了default-first-option属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 6][]

<template>
      <el-select v-model="value" multiple filterable allow-create default-first-option placeholder="请选择文章标签">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </template>
    
    <script> export default { data() { return { options: [{ value: 'HTML', label: 'HTML' }, { value: 'CSS', label: 'CSS' }, { value: 'JavaScript', label: 'JavaScript' }], value: [] } } } </script>

> 如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。

#### Select Attributes ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value / v-model</td> 
   <td>绑定值</td> 
   <td>boolean / string / number</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>multiple</td> 
   <td>是否多选</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>是否禁用</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>value-key</td> 
   <td>作为 value 唯一标识的键名，绑定值为对象类型时必填</td> 
   <td>string</td> 
   <td>—</td> 
   <td>value</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>输入框尺寸</td> 
   <td>string</td> 
   <td>medium/small/mini</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>clearable</td> 
   <td>是否可以清空选项</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>collapse-tags</td> 
   <td>多选时是否将选中值按文字的形式展示</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>multiple-limit</td> 
   <td>多选时用户最多可以选择的项目数，为 0 则不限制</td> 
   <td>number</td> 
   <td>—</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>select input 的 name 属性</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>autocomplete</td> 
   <td>select input 的 autocomplete 属性</td> 
   <td>string</td> 
   <td>—</td> 
   <td>off</td> 
  </tr> 
  <tr> 
   <td>auto-complete</td> 
   <td>下个主版本弃用</td> 
   <td>string</td> 
   <td>—</td> 
   <td>off</td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td>占位符</td> 
   <td>string</td> 
   <td>—</td> 
   <td>请选择</td> 
  </tr> 
  <tr> 
   <td>filterable</td> 
   <td>是否可搜索</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>allow-create</td> 
   <td>是否允许用户创建新条目，需配合 filterable 使用</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>filter-method</td> 
   <td>自定义搜索方法</td> 
   <td>function</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>remote</td> 
   <td>是否为远程搜索</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>remote-method</td> 
   <td>远程搜索方法</td> 
   <td>function</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>loading</td> 
   <td>是否正在从远程获取数据</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>loading-text</td> 
   <td>远程加载时显示的文字</td> 
   <td>string</td> 
   <td>—</td> 
   <td>加载中</td> 
  </tr> 
  <tr> 
   <td>no-match-text</td> 
   <td>搜索条件无匹配时显示的文字，也可以使用slot="empty"设置</td> 
   <td>string</td> 
   <td>—</td> 
   <td>无匹配数据</td> 
  </tr> 
  <tr> 
   <td>no-data-text</td> 
   <td>选项为空时显示的文字，也可以使用slot="empty"设置</td> 
   <td>string</td> 
   <td>—</td> 
   <td>无数据</td> 
  </tr> 
  <tr> 
   <td>popper-class</td> 
   <td>Select 下拉框的类名</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>reserve-keyword</td> 
   <td>多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>default-first-option</td> 
   <td>在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用</td> 
   <td>boolean</td> 
   <td>-</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>popper-append-to-body</td> 
   <td>是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false</td> 
   <td>boolean</td> 
   <td>-</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>automatic-dropdown</td> 
   <td>对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单</td> 
   <td>boolean</td> 
   <td>-</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

#### Select Events ####

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>change</td> 
   <td>选中值发生变化时触发</td> 
   <td>目前的选中值</td> 
  </tr> 
  <tr> 
   <td>visible-change</td> 
   <td>下拉框出现/隐藏时触发</td> 
   <td>出现则为 true，隐藏则为 false</td> 
  </tr> 
  <tr> 
   <td>remove-tag</td> 
   <td>多选模式下移除tag时触发</td> 
   <td>移除的tag值</td> 
  </tr> 
  <tr> 
   <td>clear</td> 
   <td>可清空的单选模式下用户点击清空按钮时触发</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>blur</td> 
   <td>当 input 失去焦点时触发</td> 
   <td>(event: Event)</td> 
  </tr> 
  <tr> 
   <td>focus</td> 
   <td>当 input 获得焦点时触发</td> 
   <td>(event: Event)</td> 
  </tr> 
 </tbody> 
</table>

#### Select Slots ####

<table> 
 <thead> 
  <tr> 
   <th>name</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>—</td> 
   <td>Option 组件列表</td> 
  </tr> 
  <tr> 
   <td>prefix</td> 
   <td>Select 组件头部内容</td> 
  </tr> 
  <tr> 
   <td>empty</td> 
   <td>无选项时的列表</td> 
  </tr> 
 </tbody> 
</table>

#### Option Group Attributes ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>label</td> 
   <td>分组的组名</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>是否将该分组下所有选项置为禁用</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

#### Option Attributes ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td>选项的值</td> 
   <td>string/number/object</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td>选项的标签，若不设置则默认与 value 相同</td> 
   <td>string/number</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>是否禁用该选项</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

#### Methods ####

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>focus</td> 
   <td>使 input 获取焦点</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>blur</td> 
   <td>使 input 失去焦点，并隐藏下拉框</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>

## 2、Cascader 级联选择器 ##

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。

#### 基础用法 ####

有两种触发子菜单的方式。只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 7][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 8][]

<div class="block">
      <span class="demonstration">默认 click 触发子菜单</span>
      <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
    </div>
    <div class="block">
      <span class="demonstration">hover 触发子菜单</span>
      <el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange"></el-cascader>
    </div>
    
    <script> export default { data() { return { value: [], options: [{ value: 'zhinan', label: '指南', children: [{ value: 'shejiyuanze', label: '设计原则', children: [{ value: 'yizhi', label: '一致' }, { value: 'fankui', label: '反馈' }, { value: 'xiaolv', label: '效率' }, { value: 'kekong', label: '可控' }] }, { value: 'daohang', label: '导航', children: [{ value: 'cexiangdaohang', label: '侧向导航' }, { value: 'dingbudaohang', label: '顶部导航' }] }] }, { value: 'zujian', label: '组件', children: [{ value: 'basic', label: 'Basic', children: [{ value: 'layout', label: 'Layout 布局' }, { value: 'color', label: 'Color 色彩' }, { value: 'typography', label: 'Typography 字体' }, { value: 'icon', label: 'Icon 图标' }, { value: 'button', label: 'Button 按钮' }] }, { value: 'form', label: 'Form', children: [{ value: 'radio', label: 'Radio 单选框' }, { value: 'checkbox', label: 'Checkbox 多选框' }, { value: 'input', label: 'Input 输入框' }, { value: 'input-number', label: 'InputNumber 计数器' }, { value: 'select', label: 'Select 选择器' }, { value: 'cascader', label: 'Cascader 级联选择器' }, { value: 'switch', label: 'Switch 开关' }, { value: 'slider', label: 'Slider 滑块' }, { value: 'time-picker', label: 'TimePicker 时间选择器' }, { value: 'date-picker', label: 'DatePicker 日期选择器' }, { value: 'datetime-picker', label: 'DateTimePicker 日期时间选择器' }, { value: 'upload', label: 'Upload 上传' }, { value: 'rate', label: 'Rate 评分' }, { value: 'form', label: 'Form 表单' }] }, { value: 'data', label: 'Data', children: [{ value: 'table', label: 'Table 表格' }, { value: 'tag', label: 'Tag 标签' }, { value: 'progress', label: 'Progress 进度条' }, { value: 'tree', label: 'Tree 树形控件' }, { value: 'pagination', label: 'Pagination 分页' }, { value: 'badge', label: 'Badge 标记' }] }, { value: 'notice', label: 'Notice', children: [{ value: 'alert', label: 'Alert 警告' }, { value: 'loading', label: 'Loading 加载' }, { value: 'message', label: 'Message 消息提示' }, { value: 'message-box', label: 'MessageBox 弹框' }, { value: 'notification', label: 'Notification 通知' }] }, { value: 'navigation', label: 'Navigation', children: [{ value: 'menu', label: 'NavMenu 导航菜单' }, { value: 'tabs', label: 'Tabs 标签页' }, { value: 'breadcrumb', label: 'Breadcrumb 面包屑' }, { value: 'dropdown', label: 'Dropdown 下拉菜单' }, { value: 'steps', label: 'Steps 步骤条' }] }, { value: 'others', label: 'Others', children: [{ value: 'dialog', label: 'Dialog 对话框' }, { value: 'tooltip', label: 'Tooltip 文字提示' }, { value: 'popover', label: 'Popover 弹出框' }, { value: 'card', label: 'Card 卡片' }, { value: 'carousel', label: 'Carousel 走马灯' }, { value: 'collapse', label: 'Collapse 折叠面板' }] }] }, { value: 'ziyuan', label: '资源', children: [{ value: 'axure', label: 'Axure Components' }, { value: 'sketch', label: 'Sketch Templates' }, { value: 'jiaohu', label: '组件交互文档' }] }] }; }, methods: { handleChange(value) { console.log(value); } } }; </script>

#### 禁用选项 ####

通过在数据源中设置 disabled 字段来声明该选项是禁用的。本例中，options指定的数组中的第一个元素含有disabled: true键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的disabled字段是否为true，如果你的数据中表示禁用含义的字段名不为disabled，可以通过props.disabled属性来指定（详见下方 API 表格）。当然，value、label和children这三个字段名也可以通过同样的方式指定。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 9][]

<el-cascader :options="options"></el-cascader>
    <script> export default { data() { return { options: [{ value: 'zhinan', label: '指南', disabled: true, children: [{ value: 'shejiyuanze', label: '设计原则', children: [{ value: 'yizhi', label: '一致' }, ... </script>

#### 可清空 ####

通过 clearable 设置输入框可清空。  
![20200826165004343.png_pic_center][]

<el-cascader :options="options" clearable></el-cascader>

#### 仅显示最后一级 ####

可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。属性show-all-levels定义了是否显示完整的路径，将其赋值为false则仅显示最后一级。  
![20200826165200852.png_pic_center][]

<el-cascader :options="options" :show-all-levels="false"></el-cascader>

#### 多选 ####

可通过 props.multiple = true 来开启多选模式。在开启多选模式后，默认情况下会展示所有已选中的选项的Tag，你可以使用collapse-tags来折叠Tag。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 10][]

<div class="block">
      <span class="demonstration">默认显示所有Tag</span>
      <el-cascader :options="options" :props="props" clearable></el-cascader>
    </div>
    <div class="block">
      <span class="demonstration">折叠展示Tag</span>
      <el-cascader :options="options" :props="props" collapse-tags clearable></el-cascader>
    </div>
    
    <script> export default { data() { return { props: { multiple: true }, options: [{ value: 1, label: '东南', children: [{ value: 2, label: '上海', children: [ { value: 3, label: '普陀' }, { value: 4, label: '黄埔' }, { value: 5, label: '徐汇' } ] }, { value: 7, label: '江苏', children: [ { value: 8, label: '南京' }, { value: 9, label: '苏州' }, { value: 10, label: '无锡' } ] }, { value: 12, label: '浙江', children: [ { value: 13, label: '杭州' }, { value: 14, label: '宁波' }, { value: 15, label: '嘉兴' } ] }] }, { value: 17, label: '西北', children: [{ value: 18, label: '陕西', children: [ { value: 19, label: '西安' }, { value: 20, label: '延安' } ] }, { value: 21, label: '新疆维吾尔族自治区', children: [ { value: 22, label: '乌鲁木齐' }, { value: 23, label: '克拉玛依' } ] }] }] }; } }; </script>

#### 选择任意一级选项 ####

在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。可通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 11][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 12][]

<div class="block">
      <span class="demonstration">单选选择任意一级选项</span>
      <el-cascader :options="options" :props="{ checkStrictly: true }" clearable></el-cascader>
    </div>
    <div class="block">
      <span class="demonstration">多选选择任意一级选项</span>
      <el-cascader :options="options" :props="{ multiple: true, checkStrictly: true }" clearable></el-cascader>
    </div>

#### 动态加载 ####

当选中某一级时，动态加载该级下的选项。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 13][]  
通过lazy开启动态加载，并通过lazyload来设置加载数据源的方法。lazyload方法有两个参数，第一个参数node为当前点击的节点，第二个resolve为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 (默认字段为leaf，可通过props.leaf修改)，否则会简单的以有无子节点来判断是否为叶子节点。

<el-cascader :props="props"></el-cascader>
    
    <script> let id = 0; export default { data() { return { props: { lazy: true, lazyLoad (node, resolve) { const { level } = node; setTimeout(() => { const nodes = Array.from({ length: level + 1 }) .map(item => ({ value: ++id, label: `选项${ id}`, leaf: level >= 2 })); // 通过调用resolve将子节点数据返回，通知组件数据加载完成 resolve(nodes); }, 1000); } } }; } }; </script>

#### 可搜索 ####

可以快捷地搜索选项并选择。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 14][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 15][]  
将filterable赋值为true即可打开搜索功能，默认会匹配节点的label或所有父节点的label(由show-all-levels决定)中包含输入值的选项。你也可以用filter-method自定义搜索逻辑，接受一个函数，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中。

<div class="block">
      <span class="demonstration">单选可搜索</span>
      <el-cascader placeholder="试试搜索：指南" :options="options" filterable></el-cascader>
    </div>
    <div class="block">
      <span class="demonstration">多选可搜索</span>
      <el-cascader placeholder="试试搜索：指南" :options="options" :props="{ multiple: true }" filterable></el-cascader>
    </div>

#### 自定义节点内容 ####

可以自定义备选项的节点内容。可以通过scoped slot对级联选择器的备选项的节点内容进行自定义，scoped slot会传入两个字段 node 和 data，分别表示当前节点的 Node 对象和数据。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 16][]

<el-cascader :options="options">
      <template slot-scope="{ node, data }">
        <span>{
       { data.label }}</span>
        <span v-if="!node.isLeaf"> ({
       { data.children.length }}) </span>
      </template>
    </el-cascader>

#### 级联面板 ####

级联面板是级联选择器的核心组件，与级联选择器一样，有单选、多选、动态加载等多种功能。和级联选择器一样，通过options来指定选项，也可通过props来设置多选、动态加载等功能，具体详情见下方API表格。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 17][]

<el-cascader-panel :options="options"></el-cascader-panel>

#### Cascader Attributes ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value / v-model</td> 
   <td>选中项绑定值</td> 
   <td>-</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>可选项数据源，键名可通过 Props 属性配置</td> 
   <td>array</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>props</td> 
   <td>配置选项，具体见下表</td> 
   <td>object</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>尺寸</td> 
   <td>string</td> 
   <td>medium / small / mini</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td>输入框占位文本</td> 
   <td>string</td> 
   <td>—</td> 
   <td>请选择</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>是否禁用</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>clearable</td> 
   <td>是否支持清空选项</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>show-all-levels</td> 
   <td>输入框中是否显示选中值的完整路径</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>collapse-tags</td> 
   <td>多选模式下是否折叠Tag</td> 
   <td>boolean</td> 
   <td>-</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>separator</td> 
   <td>选项分隔符</td> 
   <td>string</td> 
   <td>—</td> 
   <td>斜杠’ / ’</td> 
  </tr> 
  <tr> 
   <td>filterable</td> 
   <td>是否可搜索选项</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>filter-method</td> 
   <td>自定义搜索逻辑，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中</td> 
   <td>function(node, keyword)</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>debounce</td> 
   <td>搜索关键词输入的去抖延迟，毫秒</td> 
   <td>number</td> 
   <td>—</td> 
   <td>300</td> 
  </tr> 
  <tr> 
   <td>before-filter</td> 
   <td>筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选</td> 
   <td>function(value)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>popper-class</td> 
   <td>自定义浮层类名</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

#### Cascader Events ####

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>change</td> 
   <td>当选中节点变化时触发</td> 
   <td>选中节点的值</td> 
  </tr> 
  <tr> 
   <td>expand-change</td> 
   <td>当展开节点发生变化时触发</td> 
   <td>各父级选项值组成的数组</td> 
  </tr> 
  <tr> 
   <td>blur</td> 
   <td>当失去焦点时触发</td> 
   <td>(event: Event)</td> 
  </tr> 
  <tr> 
   <td>focus</td> 
   <td>当获得焦点时触发</td> 
   <td>(event: Event)</td> 
  </tr> 
  <tr> 
   <td>visible-change</td> 
   <td>下拉框出现/隐藏时触发</td> 
   <td>出现则为 true，隐藏则为 false</td> 
  </tr> 
  <tr> 
   <td>remove-tag</td> 
   <td>在多选模式下，移除Tag时触发</td> 
   <td>移除的Tag对应的节点的值</td> 
  </tr> 
 </tbody> 
</table>

#### Cascader Methods ####

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>getCheckedNodes</td> 
   <td>获取选中的节点</td> 
   <td>(leafOnly) 是否只是叶子节点，默认值为 false</td> 
  </tr> 
 </tbody> 
</table>

#### Cascader Slots ####

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>-</td> 
   <td>自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据</td> 
  </tr> 
  <tr> 
   <td>empty</td> 
   <td>无匹配选项时的内容</td> 
  </tr> 
 </tbody> 
</table>

#### CascaderPanel Attributes ####

#### CascaderPanel Events ####

#### CascaderPanel Methods ####

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>getCheckedNodes</td> 
   <td>获取选中的节点数组</td> 
   <td>(leafOnly) 是否只是叶子节点，默认值为 false</td> 
  </tr> 
  <tr> 
   <td>clearCheckedNodes</td> 
   <td>清空选中的节点</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

#### CascaderPanel Slots ####

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>-</td> 
   <td>自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据</td> 
  </tr> 
 </tbody> 
</table>

#### Props ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>expandTrigger</td> 
   <td>次级菜单的展开方式</td> 
   <td>string</td> 
   <td>click / hover</td> 
   <td>‘click’</td> 
  </tr> 
  <tr> 
   <td>multiple</td> 
   <td>是否多选</td> 
   <td>boolean</td> 
   <td>-</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>checkStrictly</td> 
   <td>是否严格的遵守父子节点不互相关联</td> 
   <td>boolean</td> 
   <td>-</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>emitPath</td> 
   <td>在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值</td> 
   <td>boolean</td> 
   <td>-</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>lazy</td> 
   <td>是否动态加载子节点，需与 lazyLoad 方法结合使用</td> 
   <td>boolean</td> 
   <td>-</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>lazyLoad</td> 
   <td>加载动态数据的方法，仅在 lazy 为 true 时有效</td> 
   <td>function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用)</td> 
   <td>-</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>指定选项的值为选项对象的某个属性值</td> 
   <td>string</td> 
   <td>—</td> 
   <td>‘value’</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td>指定选项标签为选项对象的某个属性值</td> 
   <td>string</td> 
   <td>—</td> 
   <td>‘label’</td> 
  </tr> 
  <tr> 
   <td>children</td> 
   <td>指定选项的子选项为选项对象的某个属性值</td> 
   <td>string</td> 
   <td>—</td> 
   <td>‘children’</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>指定选项的禁用为选项对象的某个属性值</td> 
   <td>string</td> 
   <td>—</td> 
   <td>‘disabled’</td> 
  </tr> 
  <tr> 
   <td>leaf</td> 
   <td>指定选项的叶子节点的标志位为选项对象的某个属性值</td> 
   <td>string</td> 
   <td>—</td> 
   <td>‘leaf’</td> 
  </tr> 
 </tbody> 
</table>

## 3、Switch 开关 ##

表示两种相互对立的状态间的切换，多用于触发「开/关」。

#### 基本用法 ####

![20200826210031928.png_pic_center][]  
绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。

<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
    </el-switch>
    
    <script> export default { data() { return { value: true } } }; </script>

#### 文字描述 ####

![20200826210204173.png_pic_center][]  
使用active-text属性与inactive-text属性来设置开关的文字描述。

<el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费">
    </el-switch>
    <el-switch style="display: block" v-model="value2" active-color="#13ce66" inactive-color="#ff4949" active-text="按月付费" inactive-text="按年付费">
    </el-switch>
    
    <script> export default { data() { return { value1: true, value2: true } } }; </script>

#### 扩展的 value 类型 ####

![20200826210411938.png_pic_center][]  
设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。

<el-tooltip :content="'Switch value: ' + value" placement="top">
      <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" active-value="100" inactive-value="0">
      </el-switch>
    </el-tooltip>
    
    <script> export default { data() { return { value: '100' } } }; </script>

#### 禁用状态 ####

![20200826210604100.png_pic_center][]  
设置disabled属性，接受一个Boolean，设置true即可禁用。

<el-switch v-model="value1" disabled>
    </el-switch>
    <el-switch v-model="value2" disabled>
    </el-switch>
    <script> export default { data() { return { value1: true, value2: false } } }; </script>

#### Attributes ####

#### Events ####

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>change</td> 
   <td>switch 状态发生变化时的回调函数</td> 
   <td>新状态的值</td> 
  </tr> 
 </tbody> 
</table>

#### Methods ####

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>focus</td> 
   <td>使 Switch 获取焦点</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>

## 4、Slider 滑块 ##

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

#### 基础用法 ####

在拖动滑块时，显示当前值。通过设置绑定值自定义滑块的初始值。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 18][]

<template>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-slider v-model="value1"></el-slider>
      </div>
      <div class="block">
        <span class="demonstration">自定义初始值</span>
        <el-slider v-model="value2"></el-slider>
      </div>
      <div class="block">
        <span class="demonstration">隐藏 Tooltip</span>
        <el-slider v-model="value3" :show-tooltip="false"></el-slider>
      </div>
      <div class="block">
        <span class="demonstration">格式化 Tooltip</span>
        <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
      </div>
      <div class="block">
        <span class="demonstration">禁用</span>
        <el-slider v-model="value5" disabled></el-slider>
      </div>
    </template>
    
    <script> export default { data() { return { value1: 0, value2: 50, value3: 36, value4: 48, value5: 42 } }, methods: { formatTooltip(val) { return val / 100; } } } </script>

#### 离散值 ####

选项可以是离散的。改变step的值可以改变步长，通过设置show-stops属性可以显示间断点。  
![20200826212124857.png_pic_center][]

<template>
      <div class="block">
        <span class="demonstration">不显示间断点</span>
        <el-slider v-model="value1" :step="10">
        </el-slider>
      </div>
      <div class="block">
        <span class="demonstration">显示间断点</span>
        <el-slider v-model="value2" :step="10" show-stops>
        </el-slider>
      </div>
    </template>
    
    <script> export default { data() { return { value1: 0, value2: 0 } } } </script>

#### 带有输入框 ####

通过输入框设置精确数值。设置show-input属性会在右侧显示一个输入框。  
![20200826212333738.png_pic_center][]

<template>
      <div class="block">
        <el-slider v-model="value" show-input>
        </el-slider>
      </div>
    </template>
    
    <script> export default { data() { return { value: 0 } } } </script>

#### 范围选择 ####

支持选择某一数值范围。设置range即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值。  
![20200826212453325.png_pic_center][]

<template>
      <div class="block">
        <el-slider v-model="value" range show-stops :max="10">
        </el-slider>
      </div>
    </template>
    
    <script> export default { data() { return { value: [4, 8] } } } </script>

#### 竖向模式 ####

设置vertical可使 Slider 变成竖向模式，此时必须设置高度height属性。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 19][]

<template>
      <div class="block">
        <el-slider v-model="value" vertical height="200px">
        </el-slider>
      </div>
    </template>
    
    <script> export default { data() { return { value: 0 } } } </script>

#### 展示标记 ####

![20200826212744201.png_pic_center][]  
设置 marks 属性可以展示标记。

<template>
      <div class="block">
        <el-slider v-model="value" range :marks="marks">
        </el-slider>
      </div>
    </template>
    
    <script> export default { data() { return { value: [30, 60], marks: { 0: '0°C', 8: '8°C', 37: '37°C', 50: { style: { color: '#1989FA' }, label: this.$createElement('strong', '50%') } } } } } </script>

#### Attributes ####

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

#### Events ####

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>change</td> 
   <td>值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）</td> 
   <td>改变后的值</td> 
  </tr> 
  <tr> 
   <td>input</td> 
   <td>数据改变时触发（使用鼠标拖曳时，活动过程实时触发）</td> 
   <td>改变后的值</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ab6a1d79306a41daaf5eb9201539844d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/d5d90a48783d49eeb79e95f753cbd917.png
[20200826143746637.png_pic_center]: /images/20221123/7b472b36400d49ea809014af131ddc7f.png
[20200826144337686.png_pic_center]: /images/20221123/1e8fa19ae67243dbba0ad5a41a1548b8.png
[20200826144902355.png_pic_center]: /images/20221123/a4b21dea48ce4515bbc687c7a07b5dba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/a7111c44d0054c2c96c2332a6c80d827.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/fc6bd7947e984fe8b8254c59e3554867.png
[20200826152731414.png_pic_center]: /images/20221123/15cf5aaf362e4bed92ea8eb0a0548ed8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/80db4cab321e49dc933c1b92a52d1e4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/9ab693410fd549f5bffd2b95e5200da3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/3be48a6b0010425c9a10fb9e26495d60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/bf00e8af55dc4d79a2d17a52da5ddd7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/f6638f034a3545c88ba3ea2359761bfb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/bef75ff4f0b140b7b344fc3dfc8002e9.png
[20200826165004343.png_pic_center]: /images/20221123/7cf616f47ea24c67a021c75a0e091cd4.png
[20200826165200852.png_pic_center]: /images/20221123/315a22e20699425aa06c1a490fa2b6c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/825bd2f01de24a57a1b0255dbf526276.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/8a103e183e7d4bc0912bc10cc1b2847d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221123/70600406893f47519933a94aa41d3f02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221123/1996b7e1e7704a3f94c013a8575c6855.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221123/4518979493e14f3cbfffe9c7d6008b64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221123/bfa95197b59a4684a6f01731bb76daad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20221123/a2427d2d9cee4cffa3c52b3b90bd886e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 17]: /images/20221123/df55bb1ff80a470cbc8f4caa73c24d6b.png
[20200826210031928.png_pic_center]: /images/20221123/3c7d140eb9cc44689c5da09bfb667995.png
[20200826210204173.png_pic_center]: /images/20221123/5f928c2784d349b0a7ecbfc5526b8992.png
[20200826210411938.png_pic_center]: /images/20221123/97273f6ac557494e88a7a2a5ef080b16.png
[20200826210604100.png_pic_center]: /images/20221123/b54aa9a3c05049658177689f997cff74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 18]: /images/20221123/baeb146d34094de0a6715f8a55f5ace3.png
[20200826212124857.png_pic_center]: /images/20221123/3104e564b939438e88c525880e45aec5.png
[20200826212333738.png_pic_center]: /images/20221123/2f69c6b984874c5a9a9b6ac7f9433138.png
[20200826212453325.png_pic_center]: /images/20221123/07e8bb8eec6c4081a62b7b1928c057a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 19]: /images/20221123/7afc312372d343318458170d97b1841a.png
[20200826212744201.png_pic_center]: /images/20221123/06e5f0e38e97401081d1b309a123dc0d.png