当前位置:   article > 正文

Vue3之element-plus选择器(el-select)的样式修改【已解决】_vue3 select 美化

vue3 select 美化

基于CSDN的三步走,到哪步能用了就停手:

第一步:在`el-select`添加属性`mySelectStyle`(名称可自定义)。详细连接如下:

Vue3:修改下拉框el-select的样式-CSDN博客

懒得跳转过去的朋友直接看

代码摘要:
  1. <el-select
  2. v-model="value"
  3. placeholder="请选择"
  4. popper-class="mySelectStyle">
  5. //popper-class='内容可自定义'
  6. <el-option />
  7. </el-select>

第二步:在`style`中使用`::deep`或`/deep/`,结果发现不生效。详细连接如下:

Vue中的Element-plus的Select选择器下拉框样式如果自定义修改(popper-append-to-body(已废弃)的平替popper-class属性的解决方法)-CSDN博客

【注意:此代码为我这不生效的代码】 

代码摘要
  1. <style lang="less">
  2. //下拉框标题文本label
  3. ::v-deep .el-form-item__label{
  4. color: #fff;
  5. font-weight: 100;
  6. }
  7. //选择框
  8. ::v-deep .el-input__wrapper{
  9. background-color: rgba(26, 84, 128,0.5);
  10. width:130px;
  11. }
  12. //下拉框文字
  13. /deep/ .el-input__inner{
  14. color:#e1dcdc;
  15. }
  16. //下拉框背景色
  17. .el-popper.is-light.mySelectStyle {
  18. background-color: rgba(0, 136, 255, 0.1) !important;
  19. border: 1px solid #254277 !important;
  20. }
  21. //下拉框的链接小方块
  22. .mySelectStyle.el-popper[data-popper-placement^=bottom] .el-popper__arrow::before {
  23. background: rgba(0, 136, 255, 0.1) !important;
  24. border: 1px solid #254277 !important;
  25. }
  26. .mySelectStyle.el-popper[data-popper-placement^=top] .el-popper__arrow::before {
  27. background: #254277 !important;
  28. border: 1px solid #254277 !important;
  29. }
  30. //鼠标移动上去的选中色
  31. .mySelectStyle {
  32. .el-select-dropdown__item.hover,
  33. .el-select-dropdown__item:hover {
  34. background: #2A77C6 !important;
  35. }
  36. //下拉框的文本颜色
  37. .el-select-dropdown__item {
  38. color: #B3BCCE !important;
  39. }
  40. //选中之后的颜色
  41. .el-select-dropdown__item.selected {
  42. background: #2A77C6 !important;
  43. }
  44. }
  45. </style>
 效果如图


第三步:通过不同的style,解决了不生效的情况,但是不确定是否会与其他样式冲突。

详细链接如下:

Vue3中样式渗透:deep()为什么无效_vue3 deep-CSDN博客 

将deep单独写在一个style内并加上scoped,成功的生效了

代码摘要:
  1. <style lang="less" scoped>
  2. :deep(.el-input__wrapper) {
  3. background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
  4. box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  5. }
  6. :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
  7. box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important;
  8. }
  9. :deep(.el-select .el-input.is-focus .el-input__wrapper) {
  10. box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important;
  11. }
  12. :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
  13. background: #0b3571;
  14. }
  15. :deep(.el-select .el-input__wrapper) {
  16. background: #0b3571;
  17. }
  18. </style>
  19. <style lang="less">
  20. //下拉框的背景色
  21. .el-select-dropdown__item {
  22. background: #254277 !important;
  23. }
  24. //下拉框的链接小方块
  25. .el-select-dropdown__item.is-active {
  26. background: #2A77C6 !important;
  27. }
  28. //鼠标移动上去的选中色
  29. .el-select-dropdown__item.hover,
  30. //下拉框背景色
  31. .el-popper.is-light.mySelectStyle {
  32. background-color: rgba(0, 136, 255, 0.1) !important;
  33. border: 1px solid #254277 !important;
  34. }
  35. //下拉框的链接小方块
  36. .mySelectStyle.el-popper[data-popper-placement^=bottom] .el-popper__arrow::before {
  37. background: rgba(0, 136, 255, 0.1) !important;
  38. border: 1px solid #254277 !important;
  39. }
  40. .mySelectStyle.el-popper[data-popper-placement^=top] .el-popper__arrow::before {
  41. background: #254277 !important;
  42. border: 1px solid #254277 !important;
  43. }
  44. //鼠标移动上去的选中色
  45. .mySelectStyle {
  46. .el-select-dropdown__item.hover,
  47. .el-select-dropdown__item:hover {
  48. background: #2A77C6 !important;
  49. }
  50. //下拉框的文本颜色
  51. .el-select-dropdown__item {
  52. color: #B3BCCE !important;
  53. }
  54. //选中之后的颜色
  55. .el-select-dropdown__item.selected {
  56. background: #2A77C6 !important;
  57. }
  58. }
  59. </style>
效果如图

 


完整代码,可直接复制为组件使用(需全局安装element-plus):

  1. <template>
  2. <el-form-item label="统计频度">
  3. <el-select v-model="value" value-key="id" placeholder="请选择" popper-class="mySelectStyle" clearable filterable>
  4. <el-option v-for="item in option" :key="item.id" :label="item.label" :value="item.value"
  5. :disabled="item.disabled" />
  6. </el-select>
  7. </el-form-item>
  8. </template>
  9. <script lang="ts">
  10. import { ref, reactive, defineComponent } from 'vue'
  11. export default defineComponent({
  12. name: 'MySelect',
  13. props: {
  14. value: {
  15. type: String,
  16. default: ''
  17. },
  18. option: {
  19. type: Array,
  20. default: () => []
  21. }
  22. },
  23. setup(props) {
  24. const value = ref(props.value)
  25. const option = reactive(props.option)
  26. return {
  27. value,
  28. option
  29. }
  30. }
  31. })
  32. </script>
  33. <style lang="less" scoped>
  34. :deep(.el-input__wrapper) {
  35. background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
  36. box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  37. }
  38. :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
  39. box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important;
  40. }
  41. :deep(.el-select .el-input.is-focus .el-input__wrapper) {
  42. box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important;
  43. }
  44. :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
  45. background: #0b3571;
  46. }
  47. :deep(.el-select .el-input__wrapper) {
  48. background: #0b3571;
  49. }
  50. </style>
  51. <style lang="less">
  52. //下拉框的背景色
  53. .el-select-dropdown__item {
  54. background: #254277 !important;
  55. }
  56. //下拉框的链接小方块
  57. .el-select-dropdown__item.is-active {
  58. background: #2A77C6 !important;
  59. }
  60. //鼠标移动上去的选中色
  61. .el-select-dropdown__item.hover,
  62. //下拉框背景色
  63. .el-popper.is-light.mySelectStyle {
  64. background-color: rgba(0, 136, 255, 0.1) !important;
  65. border: 1px solid #254277 !important;
  66. }
  67. //下拉框的链接小方块
  68. .mySelectStyle.el-popper[data-popper-placement^=bottom] .el-popper__arrow::before {
  69. background: rgba(0, 136, 255, 0.1) !important;
  70. border: 1px solid #254277 !important;
  71. }
  72. .mySelectStyle.el-popper[data-popper-placement^=top] .el-popper__arrow::before {
  73. background: #254277 !important;
  74. border: 1px solid #254277 !important;
  75. }
  76. //鼠标移动上去的选中色
  77. .mySelectStyle {
  78. .el-select-dropdown__item.hover,
  79. .el-select-dropdown__item:hover {
  80. background: #2A77C6 !important;
  81. }
  82. //下拉框的文本颜色
  83. .el-select-dropdown__item {
  84. color: #B3BCCE !important;
  85. }
  86. //选中之后的颜色
  87. .el-select-dropdown__item.selected {
  88. background: #2A77C6 !important;
  89. }
  90. }
  91. </style>

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

闽ICP备14008679号