vue 与elementui时间样式的修改踩坑流程

在 Vue 中使用 Element UI 时，修改时间选择器的样式通常涉及到自定义 CSS。

直接覆盖 CSS 类： 您可以直接在全局 CSS 文件中覆盖 Element UI 的默认样式。例如，要修改时间选择器的字体颜色，您可以添加如下 CSS：

.el-time-panel__content {
    color: #您喜欢的颜色;
}

使用深度选择器： 在 Vue 单文件组件中，您可以使用 /deep/ 或 ::v-deep 选择器来覆盖 Element UI 组件的样式。例如：

<style scoped>
.your-custom-class /deep/ .el-time-panel__content {
    color: #您喜欢的颜色;
}
</style>

使用内联样式： 对于简单的样式修改，您可以直接在模板中使用内联样式。例如：

<el-time-picker
    style="color: #您喜欢的颜色;"
    ...其他属性...
></el-time-picker>

JavaScript 动态样式： 如果您需要根据某些条件动态更改样式，可以在计算属性或方法中设置样式并绑定到元素上。例如：

<el-time-picker
    :style="customStyle"
    ...其他属性...
></el-time-picker>


export default {
    computed: {
        customStyle() {
            return {
                color: this.isNightMode ? '#夜间模式颜色' : '#日间模式颜色'
            };
        }
    }
}