vue中的自定义主题datepicker元素-ui

Question

我有一个网站，用户可以选择date_range，所以我使用日期选择器元素-ui。但是 datepicker 默认主题，我如何在 vue 中更改它。

Answer 1

目前Element-UI不提供高度自定义主题的功能，只提供简单的自定义尺寸和颜色。

但是，您可以通过以下配置自定义样式：

popper-class - 自定义 class DatePicker 下拉列表的名称

picker-options - 您可以通过使用 [=15= 创建一个 picker-options 对象来设置自定义 class 名称]属性.

您可以使用自定义 class 覆盖默认样式。

示例：

// template
<el-date-picker v-model="value1"
                type="date"
                popper-class="custom-date-picker"
                placeholder="Pick a day">
</el-date-picker>

// css
.custom-date-picker{
  .el-date-picker__header{
    // custom header style here
  }
}

Answer 2

这对我有用，Element Plus with Vue 3!
在App.vue

<style lang="scss">
 .el-date-editor {
   --el-date-editor-width: 40% !important;
 }
</style>

Answer 3

您只需在标签内添加样式，例如

<el-date-picker  v-model="value1"
            type="date"
            popper-class="custom-date-picker"
            placeholder="Pick a day"
       -->  style="width: 100%" />

vue中的自定义主题datepicker元素-ui

Custom theme datepicker element-ui in vue

css

element-ui

vue-cli-3