🚀前言

在现代 web 应用中，交互设计的细节往往决定了用户体验的优劣。开关（Switch）和滑块（Slider）组件作为常见的交互元素，不仅能够提升用户操作的直观性，还能增加界面的趣味性。Element Plus 作为一款专为 Vue 3 设计的 UI 组件库，提供了功能强大且易于使用的开关与滑块组件，帮助开发者轻松创建友好的用户界面。

本篇文章将深入探讨 Element Plus 中的开关与滑块组件，结合实际示例，详细讲解它们的用法和应用场景。我们将首先介绍开关组件的基本功能及其使用方法，包括如何处理状态变化和绑定数据。接着，我们将探索滑块组件，展示如何通过滑动条来选择数值，并实现范围选择等高级功能。

🚀一、Element Plus开关与滑块组件示例

<script setup>
import {ref} from  'vue'
const switch1 = ref(true)
const switch2 = ref(true)
const switch3 = ref(false)
const sliderValue = ref(0)
const sliderValue2 = ref(0)
const sliderValue3 = ref(0)
const sliderValue4 = ref(0)
const marks = {
  0: "起点",
  50: "半程啦！",
  90: {
    style: {
      color: "#ff0000",
    },
    label: "就到终点啦",
  }
}
function format(value) {
  return `${value}%`;
}
</script>

<template>
<div id="div">
<el-switch
    v-model="switch1"
    active-text="会员"
    inactive-text="非会员"
    active-color="#00FF00"
    inactive-color="#FF0000"
  ></el-switch>
</div>

<div id="div">
  <el-switch
    v-model="switch2"
    active-text="加载中"
    :loading="true"
  ></el-switch>
</div>

<div id="div">
  <el-switch
    v-model="switch3"
    inactive-text="禁用"
    :disabled="true"
  ></el-switch>
</div>

<el-slider v-model="sliderValue"></el-slider>

<el-slider v-model="sliderValue2" :format-tooltip="format"></el-slider>

<el-slider
  v-model="sliderValue3"
  :format-tooltip="format"
  :step="10"
  :show-stops="true"
></el-slider>

<el-slider v-model="sliderValue4" :marks="marks"></el-slider>
</template>

🔎1. <script setup> 部分

import { ref } from 'vue';

// 定义响应式变量，分别用于绑定开关和滑块的值
const switch1 = ref(true);  // 第一个开关，默认是开启状态
const switch2 = ref(true);  // 第二个开关，默认是开启状态
const switch3 = ref(false); // 第三个开关，默认是关闭状态

const sliderValue = ref(0);  // 第一个滑块的值
const sliderValue2 = ref(0); // 第二个滑块的值
const sliderValue3 = ref(0); // 第三个滑块的值
const sliderValue4 = ref(0); // 第四个滑块的值

// 定义滑块的刻度标记
const marks = {
  0: "起点",
  50: "半程啦！",
  90: {
    style: { color: "#ff0000" },  // 设置在90的位置的标记颜色
    label: "就到终点啦",
  }
};

// 格式化滑块值的方法，返回带有百分号的字符串
function format(value) {
  return `${value}%`;
}

• ref()：这里使用了 Vue 3 中的 ref() 来创建响应式变量，控制开关的状态和滑块的值。switch1、switch2 和 switch3 用于开关，sliderValue、sliderValue2、sliderValue3 和 sliderValue4 用于滑块的值。
• marks：定义了滑块的标记，其中 0 表示起点，50 表示半程，90 处有一个自定义样式和标签，显示“就到终点啦”。
• format(value)：定义了一个格式化函数，返回带有百分号的字符串，用于格式化滑块的提示信息。

🔎2. <template> 部分

<template>
  <!-- 第一个开关 -->
  <div id="div">
    <el-switch 
      v-model="switch1" 
      active-text="会员" 
      inactive-text="非会员" 
      active-color="#00FF00" 
      inactive-color="#FF0000">
    </el-switch>
  </div>

  <!-- 第二个开关，显示加载状态 -->
  <div id="div">
    <el-switch 
      v-model="switch2" 
      active-text="加载中" 
      :loading="true">
    </el-switch>
  </div>

  <!-- 第三个开关，禁用状态 -->
  <div id="div">
    <el-switch 
      v-model="switch3" 
      inactive-text="禁用" 
      :disabled="true">
    </el-switch>
  </div>

  <!-- 第一个滑块 -->
  <el-slider v-model="sliderValue"></el-slider>

  <!-- 第二个滑块，带自定义格式化函数 -->
  <el-slider v-model="sliderValue2" :format-tooltip="format"></el-slider>

  <!-- 第三个滑块，带步长和停止点 -->
  <el-slider v-model="sliderValue3" :format-tooltip="format" :step="10" :show-stops="true"></el-slider>

  <!-- 第四个滑块，带刻度标记 -->
  <el-slider v-model="sliderValue4" :marks="marks"></el-slider>
</template>

🔎3. 详细解释每个组件：

🦋3.1 第一个开关 (el-switch)

<el-switch 
  v-model="switch1" 
  active-text="会员" 
  inactive-text="非会员" 
  active-color="#00FF00" 
  inactive-color="#FF0000">
</el-switch>

• v-model="switch1"：通过双向绑定，开关的状态会被存储在 switch1 中，true 表示开，false 表示关。
• active-text="会员" 和 inactive-text="非会员"：显示开关状态时的文字，分别为 “会员” 和 “非会员”。
• active-color="#00FF00" 和 inactive-color="#FF0000"：设置开关的颜色，开启时是绿色，关闭时是红色。

🦋3.2 第二个开关 (el-switch)

<el-switch 
  v-model="switch2" 
  active-text="加载中" 
  :loading="true">
</el-switch>

• v-model="switch2"：与 switch2 变量绑定，控制开关的状态。
• active-text="加载中"：开启时显示文字 “加载中”。
• :loading="true"：设置开关处于加载状态，通常用于表示正在进行某些操作时的状态。

🦋3.3 第三个开关 (el-switch)

<el-switch 
  v-model="switch3" 
  inactive-text="禁用" 
  :disabled="true">
</el-switch>

• v-model="switch3"：与 switch3 变量绑定，控制开关的状态。
• inactive-text="禁用"：关闭时显示文字 “禁用”。
• :disabled="true"：设置为禁用状态，即无法进行任何操作。

🦋3.4 第一个滑块 (el-slider)

<el-slider v-model="sliderValue"></el-slider>

• v-model="sliderValue"：与 sliderValue 变量绑定，控制滑块的值。sliderValue 的值会随着用户拖动滑块而变化。

🦋3.5 第二个滑块 (el-slider)

<el-slider v-model="sliderValue2" :format-tooltip="format"></el-slider>

• :format-tooltip="format"：为滑块添加了一个自定义的格式化函数，format 会格式化滑块的提示信息，显示为类似 50% 的格式。

🦋3.6 第三个滑块 (el-slider)

<el-slider v-model="sliderValue3" :format-tooltip="format" :step="10" :show-stops="true"></el-slider>

• :step="10"：设置滑块的步长为 10，意味着用户只能选择 10 的倍数。
• :show-stops="true"：启用显示停止点，滑块的标记将显示在各个步长的位置。

🦋3.7 第四个滑块 (el-slider)

<el-slider v-model="sliderValue4" :marks="marks"></el-slider>

• :marks="marks"：将之前定义的 marks 传递给滑块，显示自定义的刻度标记。比如，0 位置显示 “起点”，50 位置显示 “半程啦！”，90 位置显示 “就到终点啦”。

🔎4. 总结

这段代码实现了几个常见的 UI 控件的功能：

1. el-switch：开关组件，支持设置开关的文本、颜色、加载状态、禁用状态等。
2. el-slider：滑块组件，支持设置滑块的步长、刻度标记、格式化提示信息、显示停止点等。

这些控件通过 Vue 3 的 v-model 实现了与响应式变量的双向绑定，当用户交互时，变量的值会被更新，进而触发视图的变化。这些组件可以用来处理各种交互，例如表单输入、状态切换等。