VUE3完美攻略：用popper-class属性让时间选择器更具个性

巧用 Popper.js，轻松定制 ElementUI 时间选择器样式

在构建 Vue.js 项目时，ElementUI 的时间选择器 el-date-picker 常常被用来便捷地处理日期时间输入。然而，默认的时间选择器样式可能与你的应用程序主题或设计要求不符，此时你需要对时间选择器进行样式定制。

传统方法的局限性

以往，开发人员会尝试使用诸如 /deep/、 >>> 或 ::v-deep 等穿透方法来定位时间选择器的元素，但这些方法对于时间选择器却无法奏效。这是因为时间选择器将元素直接挂载到页面中，而不是自身元素下，导致穿透方法无法触及。

完美的解决方案：Popper.js

ElementUI 的时间选择器有一个鲜为人知的属性——popper-class，它可以与 Popper.js 库配合使用，轻松实现时间选择器样式的修改。

步骤指南

1. 安装 Popper.js 库

在你的 Vue.js 项目中，确保已安装 Popper.js 库。它是一个 JavaScript 库，用于定位元素，也是 ElementUI 依赖的库之一。

2. 导入 Popper.js

在你的 Main.js 文件中，将 Popper.js 导入为一个全局组件：

import { createApp } from 'vue'
import { Popper } from '@popperjs/core'

const app = createApp(App)
app.config.globalProperties.$Popper = Popper
app.mount('#app')

3. 添加时间选择器

在你的 HTML 文件中，添加一个时间选择器：

<el-date-picker v-model="value" popper-class="my-date-picker"></el-date-picker>

4. 自定义样式

在你的 CSS 文件中，为时间选择器定义自定样式：

.my-date-picker {
  color: red;
  background-color: yellow;
}

效果展示

运行项目后，你将看到时间选择器的下拉控件已成功应用了自定义样式。

总结

利用 Popper.js 库和 ElementUI 的 popper-class 属性，你可以轻松修改 el-date-picker 下拉控件的样式，满足你的应用程序定制需求。这种方法简洁高效，无需使用复杂的 CSS 选择器。

常见问题解答

1. 为什么需要使用 Popper.js？

Popper.js 是一个 JavaScript 库，用于定位元素。ElementUI 的时间选择器将元素直接挂载到页面中，而不是自身元素下，导致传统的 CSS 穿透方法无法触及这些元素。Popper.js 可以解决这个问题，因为它可以定位时间选择器的元素。

2. 如何在 Vue.js 中导入 Popper.js？

在你的 Main.js 文件中，使用 app.config.globalProperties.$Popper = Popper 语句导入 Popper.js。

3. popper-class 属性有什么作用？

popper-class 属性允许你在时间选择器下拉控件上应用一个自定义类。这个类可以用来在 CSS 中定义样式。

4. 如何定义自定义样式？

在你的 CSS 文件中，使用 .my-date-picker {} 语法定义自定义样式。你可以在类中指定颜色、背景色等样式属性。

5. 我可以在时间选择器的其他元素上应用样式吗？

可以，你可以使用 Popper.js 提供的 .el-picker-panel {} 等类名来定位时间选择器的其他元素，并应用自定义样式。