View UI组件库-更改下拉选样式

改样式估计是前端最烦的事了.

一.需求分析

项目中遇到一个见怪不怪的需求如下图

一个带自定义背景图的下拉框,

那么想实现这个效果,

无非两种方法

要么自己纯手写下拉层级框,要么就是套用组件修修补补

本次用的依旧是View UI 配合vue2使用的版本

二.构建实现

具体我这次的思路就是将组件库中的Select组件下拉选嵌套进这个背景图中,具体实现代码基本上涉及样式击穿,部分代码如下

      .ivu-select,
      .ivu-cascader,
      .ivu-input-wrapper,
      .ivu-date-picker {
        ::v-deep .ivu-select-selection,
        ::v-deep .ivu-input {
          background: rgba(38, 71, 137, 0.1);
          border: 1px solid #3ea2ff;
          border: none;
          font-size: 14px;
          font-family: SiYuanHeiTi, sans-serif;
          font-weight: 400;
          color: #ffffff;
          height: 28px;
        }
        ::v-deep .ivu-select-input {
          color: #ffffff;
        }
        ::v-deep .ivu-select-placeholder,
        ::v-deep .ivu-select-item,
        ::v-deep .ivu-icon,
        ::v-deep .ivu-cascader-menu-item,
        ::v-deep .ivu-input::-webkit-input-placeholder {
          color: #ffffff;
        }
        ::v-deep .ivu-input::-ms-input-placeholder {
          color: #ffffff;
        }

        ::v-deep .ivu-input::-moz-input-placeholder {
          color: #ffffff;
        }

        ::v-deep .ivu-select-dropdown {
          background: rgba(34, 106, 195, 0.9);
          color: #ffffff;
        }

        ::v-deep .ivu-select-item-focus,
        ::v-deep .ivu-cascader-menu-item-active,
        ::v-deep .ivu-select-item-selected,
        ::v-deep .ivu-select-item-selected:hover,
        ::v-deep .ivu-cascader-menu-item:hover,
        ::v-deep .ivu-select-item:hover {
          background: rgba(56, 149, 238, 0.9);
          color: #ffffff;
        }
        ::v-deep input::-webkit-input-placeholder {
          /* WebKit browsers */
          color: #ffffff;
        }
        ::v-deep .ivu-date-picker-cells {
          min-width: 210px;
        }
        ::v-deep .ivu-date-picker-cells-cell-range:before {
          background: rgba(45, 140, 240, 0.5);
        }
        ::v-deep .ivu-date-picker-cells-cell:hover {
          background-color: #2d8cf0;
          em {
            background-color: #2d8cf0;
          }
        }
        ::v-deep .ivu-cascader-label {
          //可搜索级联样式
          color: #ffffff;
        }
        ::v-deep .ivu-cascader-label:focus {
          border: none;
        }
      }

以上代码是一些库中样式的击穿css,大家有需要的话可以对号入座.

但是现在问题来了,我具体最终实现的效果如下图所示

就是点击选择的时候,这个聚焦框实在是没找到地方给取消掉,以为是focus,还是没翻到0.0

有经验的小伙伴欢迎评论指教一波哈0.0