因为业务需求,从element plus直接拿过来的组件样式和整体风格不搭,所以要修改样式,直接deep修改根本不生效,最后才发现el-date-picker组件有一个popper-class属性,通过这个属性我们就能够修改下拉框的样式,下面就直接放代码吧,希望能帮到你噢。
<template>
// 如果需要修改输入框的样式,最好在el-date-picker外套一个div,样式就在这个div下写,
// 避免污染全局的样式
<div class="time-box">
<el-date-picker
v-model="time"
type="date"
prefix-icon="CaretBottom" // 组件的前置图标可以通过这个属性修改
placeholder="请选择时间"
popper-class="popperClass" // 下拉框的样式通过该属性修改
/>
</div>
</template>
<script setup name="TimeSelect">
import { onBeforeUnmount, provide, reactive, readonly, ref } from "vue";
const time = ref(null);
</script>
// 这里需要注意的是:不要在