element-plus el-date-picker

要修改 element-plus 的 el-date-picker 样式，可以使用以下两种方法： 1. 使用全局样式覆盖默认样式 在全局样式中添加以下代码，即可修改 el-date-picker 的样式： ```css /* 修改日期选择器的宽度 */ .el-date-picker { width: 200px; } /* 修改日期选择器中的日期单元格的背景色 */ .el-date-table td.available:hover, .el-date-table td.current { background-color: #f0f0f0; } ``` 2. 使用自定义主题 element-plus 提供了自定义主题的功能，可以通过修改主题变量来改变组件的样式。具体步骤如下： 1. 在项目中创建一个 `element-variables.scss` 文件，并在其中定义需要修改的主题变量，例如： ```scss $--color-primary: #409EFF; $--border-radius-base: 4px; ``` 2. 在 `main.js` 中引入 `element-variables.scss` 文件，并使用 `ElThemeProvider` 组件将应用包裹起来，例如： ```js import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import './element-variables.scss'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` 3. 在组件中使用自定义主题，例如： ```html <template> <el-date-picker v-model="date" :picker-options="pickerOptions"></el-date-picker> </template> <script> export default { data() { return { date: '', pickerOptions: { shortcuts: [{ text: '最近一周', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', [start, end]); } }, { text: '最近一个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit('pick', [start, end]); } }] } }; } };</script> <style scoped> /* 修改日期选择器的宽度 */ .el-date-picker { width: 200px; } /* 修改日期选择器中的日期单元格的背景色 */ .el-date-table td.available:hover, .el-date-table td.current { background-color: #f0f0f0; } </style> ```

### 自定义Element Plus `el-date-picker` 组件的背景色 为了实现对 Element Plus 的 `el-date-picker` 组件背景颜色的自定义，可以采用多种方法来确保样式能够正确应用并覆盖默认样式。以下是具体的方法： #### 方法一：通过SCSS变量覆盖 如果项目中使用了 SCSS 并且已经安装了 Element Plus 主题编译工具，则可以通过重写主题中的 SCSS 变量来进行全局样式的调整。 ```scss // home.scss 文件内添加如下代码 @import "~element-plus/packages/theme-chalk/src/date-picker"; $--date-picker-background-color: #002450; $--picker-border-color: #1384b4; @include b(datePicker) { @include e(picker-panel) { color: #fff; // 设置当前面板的月份字体为白色 background: $--date-picker-background-color !important; border: 1px solid $--picker-border-color; &__icon-btn { color: #ffffff; } &__header-label { color: #ffffff; } .el-date-table th { color: #ffffff; } } } ``` 这种方法利用了 Element Plus 提供的主题定制功能，使得更改更加优雅且易于维护[^1]。 #### 方法二：直接在CSS/SCSS中覆写类名 当不想依赖于特定构建工具链时，可以直接在项目的 CSS 或者 SCSS 文件里针对 `.el-date-picker` 类及其子元素编写更具体的样式规则，并加上 `!important` 来提高优先级以确保这些新样式能生效。 ```scss /* 在home.scss文件中 */ .el-date-picker, .el-popper.is-customized { --el-bg-color-overlay: rgba(0, 36, 80, 0.9); /* 半透明背景色 */ } .el-date-picker.el-picker-panel { color: #fff; background: var(--el-bg-color-overlay); border: 1px solid #1384b4; .el-picker-panel__icon-btn { color: #ffffff; } .el-date-picker__header-label { color: #ffffff; } .el-date-table th { color: #ffffff; } } ``` 这里不仅设置了基础的选择器还加入了带有前缀 `-is-customized` 的选择器用于处理可能出现的不同层次结构下的背景色问题[^2]。 #### 方法三：局部作用域内的特殊日期样式 对于某些特殊情况比如想要改变某个特定时间点的颜色而不影响整个控件外观的情况下，可以在 HTML 结构基础上进一步细化 CSS Selectors: ```html <!-- 假设这是模板部分 --> <template> <!-- ... --> </template> <style scoped lang="scss"> td.available.current.stopColor span { background-color: rgb(248, 6, 6)!important; color: #FFFFFF!important; } td.available.current.okColor span { background-color: #07BF08!important; color: #FFFFFF!important; } </style> ``` 此片段展示了如何为目标日期单元格设置不同的背景色和文字颜色，适用于需要高亮显示重要日子的应用场景[^3]。 #### 修改占位符颜色 最后，关于输入框内部提示文字即 placeholder 颜色也可以按照下面的方式进行修改： ```scss .form-items { .el-input__inner, .el-date-editor .el-range-input { color: #409eff; &:placeholder-shown::before { content: attr(data-placeholder); display: inline-block; opacity: 0.5; transition: all ease-in-out 0.3s; } ::placeholder { color: #606266; } :-ms-input-placeholder { color: #606266; } ::-moz-placeholder { color: #606266; } :-moz-placeholder { color: #606266; } ::-webkit-input-placeholder { color: #606266; } } } ``` 这段代码确保了不同浏览器环境下都能正常渲染预期的文字颜色[^4]。