当前位置:   article > 正文

关于el-date-picker组件修改输入框以及下拉框的样式_el-date-picker样式修改

el-date-picker样式修改

因为业务需求,从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>
// 这里需要注意的是:不要在<style>里面写 scoped
<style lang="scss" >
// 这里是下拉框的样式,需要修改什么样式,就直接通过浏览器查看你要改的样式,然后就改就行
.popperClass {

  //图标样式
  .el-icon {
    color: #fff;
  }

  //头部样式
  .el-date-picker__header-label {
    color: #fff;
    font-size: 18px;
  }

  // 星期样式
  .el-date-table th {
    color: #fff;
  }
  // 时间选择器层样式
  .el-picker-panel {
    z-index: 2007;
    color: #fff;
    background: rgba(30, 84, 128, 0.8);
    border: 1px solid rgba(29, 128, 218, 1);
  }
}
// 输入框的样式在这里改就行
.time-box {
  .el-input__wrapper {
    background-color: transparent;
    border-radius: 0px;
    box-shadow: none;
    // width: 50px;
  }

  .el-input__inner {
    color: #ffffff;
  }

  .el-date-editor.el-input,
  .el-date-editor.el-input__wrapper {
    width: 120px;
  }

  .el-input__wrapper:hover {
    box-shadow: none;
  }

  .el-input {
    --el-input-focus-border-color: transparent;
    --el-input-border: none;
  }

  .el-popper.is-light {
    background: #255783;
    border: 1px solid #106c94;
  }
}
// 弹出框popper层样式
.el-picker__popper.el-popper {
  background: rgba(30, 84, 128, 0.8);
  border: 1px solid rgba(29, 128, 218, 1);
  box-shadow: rgba(30, 84, 128, 0.8);
}
// 弹出框外部尖三角样式
.el-popper.is-light .el-popper__arrow::before {
  border: 1px solid rgba(29, 128, 218, 1);
  background: rgba(29, 128, 218, 1);
}
</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93

最后的效果图:
在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/码创造者/article/detail/810564
推荐阅读
相关标签
  

闽ICP备14008679号