ElementPlus Slider 滑塊

通過(guò)拖動(dòng)滑塊在一個(gè)固定區(qū)間內(nèi)進(jìn)行選擇

基礎(chǔ)用法

在拖動(dòng)滑塊時(shí)，顯示當(dāng)前值

通過(guò)設(shè)置綁定值自定義滑塊的初始值

<template>
  <div class="block">
    <span class="demonstration">默認(rèn)</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>

?離散值

選項(xiàng)可以是離散的

改變step的值可以改變步長(zhǎng)，通過(guò)設(shè)置show-stops屬性可以顯示間斷點(diǎn)

<template>
  <div class="block">
    <span class="demonstration">不顯示間斷點(diǎn)</span>
    <el-slider v-model="value1" :step="10"> </el-slider>
  </div>
  <div class="block">
    <span class="demonstration">顯示間斷點(diǎn)</span>
    <el-slider v-model="value2" :step="10" show-stops> </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: 0,
        value2: 0,
      }
    },
  }
</script>

帶有輸入框

通過(guò)輸入框設(shè)置精確數(shù)值

設(shè)置show-input屬性會(huì)在右側(cè)顯示一個(gè)輸入框

<template>
  <div class="block">
    <el-slider v-model="value" show-input> </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0,
      }
    },
  }
</script>

范圍選擇

支持選擇某一數(shù)值范圍

設(shè)置range即可開(kāi)啟范圍選擇，此時(shí)綁定值是一個(gè)數(shù)組，其元素分別為最小邊界值和最大邊界值

<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>

豎向模式

設(shè)置vertical可使 Slider 變成豎向模式，此時(shí)必須設(shè)置高度height屬性

<template>
  <div class="block">
    <el-slider v-model="value" vertical height="200px"> </el-slider>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0,
      }
    },
  }
</script>

展示標(biāo)記

設(shè)置 marks 屬性可以展示標(biāo)記

<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: '50%',
          },
        },
      }
    },
  }
</script>

Attributes

參數(shù)	說(shuō)明	類(lèi)型	可選值	默認(rèn)值
model-value / v-model	綁定值	number	—	0
min	最小值	number	—	0
max	最大值	number	—	100
disabled	是否禁用	boolean	—	false
step	步長(zhǎng)	number	—	1
show-input	是否顯示輸入框，僅在非范圍選擇時(shí)有效	boolean	—	false
show-input-controls	在顯示輸入框的情況下，是否顯示輸入框的控制按鈕	boolean	—	true
input-size	輸入框的尺寸	string	large / medium / small / mini	small
show-stops	是否顯示間斷點(diǎn)	boolean	—	false
show-tooltip	是否顯示 tooltip	boolean	—	true
format-tooltip	格式化 tooltip message	function(value)	—	—
range	是否為范圍選擇	boolean	—	false
vertical	是否豎向模式	boolean	—	false
height	Slider 高度，豎向模式時(shí)必填	string	—	—
label	屏幕閱讀器標(biāo)簽	string	—	—
debounce	輸入時(shí)的去抖延遲，毫秒，僅在show-input等于 true 時(shí)有效	number	—	300
tooltip-class	tooltip 的自定義類(lèi)名	string	—	—
marks	標(biāo)記， key 的類(lèi)型必須為 number 且取值在閉區(qū)間 [min, max] 內(nèi)，每個(gè)標(biāo)記可以單獨(dú)設(shè)置樣式	object	—	—

Events