【愚公系列】《循序渐进Vue.js 3.x前端开发实践》047-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>

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}%`;
}

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

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

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

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

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