el-slider详解

el-slider 是 Element Plus 框架中的一个滑块组件，用于选择数值范围内的值。它可以支持单点和双点选择，并提供多种自定义选项。

一。 el-slider 属性详解

1. value / v-model:

   • 类型: Number | Array
   • 用途: 绑定值。
   • 默认值: 0

2. min:

   • 类型: Number
   • 用途: 最小值。
   • 默认值: 0

3. max:

   • 类型: Number
   • 用途: 最大值。
   • 默认值: 100

4. step:

   • 类型: Number
   • 用途: 步长。
   • 默认值: 1

5. show-stops:

   • 类型: Boolean
   • 用途: 是否显示间断点。
   • 默认值: false

6. range:

   • 类型: Boolean
   • 用途: 是否为双点选择。
   • 默认值: false

7. disabled:

   • 类型: Boolean
   • 用途: 是否禁用。
   • 默认值: false

8. vertical:

   • 类型: Boolean
   • 用途: 是否垂直方向。
   • 默认值: false

9. height:

   • 类型: String
   • 用途: 垂直方向时的高度。

10. debounce:

    • 类型: Number
    • 用途: 输入值的去抖延迟，单位为毫秒。
    • 默认值: 0

11. tooltip-class:

    • 类型: String
    • 用途: 自定义提示框的类名。

12. marks:

    • 类型: Object
    • 用途: 标记点。

13. format-tooltip:

    • 类型: Function
    • 用途: 格式化 tooltip 显示的内容。

14. input-size:

    • 类型: String
    • 用途: 输入框尺寸，可选值为 medium、small、mini。

15. show-input-controls:

    • 类型: Boolean
    • 用途: 是否显示输入框的控制按钮。
    • 默认值: true

16. show-input:

    • 类型: Boolean
    • 用途: 是否显示输入框。
    • 默认值: false

二。 el-slider 事件详解

1. input:

   • 类型: Function
   • 用途: 绑定值变化时触发的事件。
   • 参数: value

2. change:

   • 类型: Function
   • 用途: 用户停止拖动滑块时触发的事件。
   • 参数: value

三。 el-slider 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 滑块的内容。

四。示例代码

<template>
  <div>
    <h2>Slider 示例</h2>

    <!-- 基本用法 -->
    <el-slider v-model="value1"></el-slider>

    <!-- 设置最小值和最大值 -->
    <el-slider v-model="value2" :min="10" :max="50"></el-slider>

    <!-- 设置步长 -->
    <el-slider v-model="value3" :step="10"></el-slider>

    <!-- 显示间断点 -->
    <el-slider v-model="value4" :show-stops="true"></el-slider>

    <!-- 双点选择 -->
    <el-slider v-model="value5" range></el-slider>

    <!-- 禁用状态 -->
    <el-slider v-model="value6" disabled></el-slider>

    <!-- 垂直方向 -->
    <el-slider v-model="value7" vertical height="200px"></el-slider>

    <!-- 自定义提示框内容 -->
    <el-slider v-model="value8" :format-tooltip="formatTooltip"></el-slider>

    <!-- 显示输入框 -->
    <el-slider v-model="value9" show-input></el-slider>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const value1 = ref(30)
const value2 = ref(30)
const value3 = ref(30)
const value4 = ref(30)
const value5 = ref([20, 50])
const value6 = ref(30)
const value7 = ref(30)
const value8 = ref(30)
const value9 = ref(30)

const formatTooltip = (value) => {
  return `${value}%`
}
</script>

五。 代码解释

1. 基本用法:

   • 使用 el-slider 组件并绑定值。

   • <el-slider v-model="value1"></el-slider>
     

2. 设置最小值和最大值:

   • 设置 min 和 max 属性来限制滑块的范围。

   • <el-slider v-model="value2" :min="10" :max="50"></el-slider>
     

3. 设置步长:

   • 使用 step 属性设置滑块的步长。

   • 
     <el-slider v-model="value3" :step="10"></el-slider>
     

4. 显示间断点:

   • 使用 show-stops 属性显示间断点。

   • <el-slider v-model="value4" :show-stops="true"></el-slider>
     

5. 双点选择:

   • 使用 range 属性启用双点选择。

   • <el-slider v-model="value5" range></el-slider>
     

6. 禁用状态:

   • 使用 disabled 属性禁用滑块。

   • <el-slider v-model="value6" disabled></el-slider>
     

7. 垂直方向:

   • 使用 vertical 属性设置滑块为垂直方向，并设置高度。

   • <el-slider v-model="value7" vertical height="200px"></el-slider>
     

8. 自定义提示框内容:

   • 使用 format-tooltip 属性自定义提示框的内容。

   • <el-slider v-model="value8" :format-tooltip="formatTooltip"></el-slider>
     

9. 显示输入框:

   • 使用 show-input 属性显示输入框。

   • <el-slider v-model="value9" show-input></el-slider>