【愚公系列】《循序渐进Vue.js 3.x前端开发实践》048-Element Plus选择器组件示例

🚀前言

在构建现代化 web 应用时，选择器组件无疑是与用户交互的重要工具。无论是单一选择、多个选择，还是复杂的层级选择，选择器都能够帮助用户高效地从大量选项中做出决策。Element Plus 作为一款专为 Vue 3 设计的 UI 组件库，提供了一系列功能强大且灵活的选择器组件，让开发者能够轻松实现多样化的选择需求。

本篇文章将带你深入探索 Element Plus 中的选择器组件，包括下拉选择器（Select）、级联选择器（Cascader）、时间选择器（TimePicker）等。我们将通过具体的代码示例，展示这些组件的基本用法、属性配置和常见的应用场景，帮助你快速上手并在项目中灵活运用。

🚀一、Element Plus选择器组件示例

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

const time = ref([])
const date = ref([])
const color = ref("")
</script>

<template>
<el-time-picker
  :is-range="true"
  v-model="time"
  range-separator="~"
  :arrow-control="true"
  start-placeholder="开始时间"
  end-placeholder="结束时间"
>
</el-time-picker>
<div>{{ time }}</div>
<el-date-picker
  v-model="date"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  >
</el-date-picker>
<div>{{ date }}</div>
<el-color-picker :show-alpha="true" v-model="color"></el-color-picker>
<div>{{ color }}</div>
</template>

🔎1.<script setup> 部分

import { ref } from 'vue';

const time = ref([]);   // 用于绑定时间选择器的值
const date = ref([]);   // 用于绑定日期选择器的值
const color = ref("");  // 用于绑定颜色选择器的值

• ref()：Vue 3 的 Composition API 中，ref() 用于创建响应式数据。这里我们定义了 3 个响应式变量：
  • time：绑定时间选择器的值，初始值是一个空数组，表示选择的时间范围。
  • date：绑定日期选择器的值，初始值是一个空数组，表示选择的日期范围。
  • color：绑定颜色选择器的值，初始值是空字符串，表示选择的颜色。

🔎2. <template> 部分

🦋2.1 时间选择器 (el-time-picker)

<el-time-picker
  :is-range="true"
  v-model="time"
  range-separator="~"
  :arrow-control="true"
  start-placeholder="开始时间"
  end-placeholder="结束时间">
</el-time-picker>
<div>{{ time }}</div>

• v-model="time"：与 time 变量双向绑定，表示选择的时间范围。time 会是一个包含开始时间和结束时间的数组。
• :is-range="true"：启用时间范围选择功能，即允许用户选择一个时间段（开始时间和结束时间）。
• range-separator="~"：设置开始时间和结束时间之间的分隔符，这里使用的是 "~"（例如：09:00 ~ 18:00）。
• :arrow-control="true"：启用时间选择器的上下箭头控件，用户可以通过箭头按钮调整时间。
• start-placeholder="开始时间" 和 end-placeholder="结束时间"：设置时间选择框中的提示文字，分别用于开始时间和结束时间的输入框。

<div>{{ time }}</div>：这个 div 会显示用户选择的时间范围，即 time 数组中的值。例如，选择的时间是 ["09:00", "18:00"]，则会显示这个数组。

🦋2.2 日期选择器 (el-date-picker)

<el-date-picker
  v-model="date"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期">
</el-date-picker>
<div>{{ date }}</div>

• v-model="date"：与 date 变量双向绑定，表示选择的日期范围。date 会是一个包含开始日期和结束日期的数组。
• type="daterange"：指定日期选择器为日期范围选择模式，用户可以选择一个开始日期和结束日期。
• range-separator="至"：设置开始日期和结束日期之间的分隔符，这里使用的是 "至"（例如：2025-01-01 至 2025-01-31）。
• start-placeholder="开始日期" 和 end-placeholder="结束日期"：设置日期选择框中的提示文字，分别用于开始日期和结束日期的输入框。

<div>{{ date }}</div>：这个 div 会显示用户选择的日期范围，即 date 数组中的值。例如，选择的日期是 ["2025-01-01", "2025-01-31"]，则会显示这个数组。

🦋2.3 颜色选择器 (el-color-picker)

<el-color-picker
  :show-alpha="true"
  v-model="color">
</el-color-picker>
<div>{{ color }}</div>

• :show-alpha="true"：启用显示透明度（alpha）通道的功能，允许用户选择带有透明度的颜色。
• v-model="color"：与 color 变量双向绑定，表示用户选择的颜色。当用户选择颜色时，color 变量的值会更新为选中的颜色，通常是一个十六进制的颜色值（如 #ff0000）。

<div>{{ color }}</div>：这个 div 会显示用户选择的颜色值，即 color 字符串的值。例如，选择的颜色是 "#ff0000"，则会显示这个颜色值。

🔎3. 总结

1. 时间选择器 (el-time-picker)：

   • 允许用户选择一个时间范围。
   • v-model="time" 绑定时间值为一个数组，包含开始时间和结束时间。
   • 配置了时间范围分隔符、箭头控件以及开始和结束时间的提示文字。

2. 日期选择器 (el-date-picker)：

   • 允许用户选择一个日期范围。
   • v-model="date" 绑定日期值为一个数组，包含开始日期和结束日期。
   • 配置了日期范围分隔符、日期的提示文字等。

3. 颜色选择器 (el-color-picker)：

   • 允许用户选择颜色，支持透明度通道（alpha）。
   • v-model="color" 绑定颜色值，通常返回十六进制颜色值。

这些组件通过 v-model 实现了与 Vue 响应式数据的双向绑定，因此当用户选择时间、日期或颜色时，组件的值会自动更新到响应式变量中，从而触发视图的更新。