feat: 优化选择器组件的右侧图标展示，大小跟随前面的文字大小而变化

data-room-ui/packages/BasicComponents/Select/index.vue

@@ -2,13 +2,14 @@
   <el-select
     :key="config.code"
     v-model="value"
-    :popper-class="'basic-component-select selct-popper-' + config.code"
-    :class="['basic-component-select', `selct-${config.code}`]"
+    :popper-class="'basic-component-select select-popper-' + config.code"
+    :class="['basic-component-select', `select-${config.code}`]"
     :placeholder="`请选择${placeholder || newPlaceholder}`"
     filterable
     clearable
     @visible-change="visibleChange"
     @change="selectChange"
+    @mouseenter.native="mouseenter"
   >
     <el-option
       v-for="(option, key) in optionData"
@@ -121,16 +122,18 @@ export default {
     changeStyle (config) {
       this.innerConfig = config
       // 选择器元素
-      const selectInputEl = document.querySelector(`.selct-${config.code} .el-input__inner`)
-      console.log(selectInputEl)
+      const selectInputEl = document.querySelector(`.select-${config.code} .el-input__inner`)
       // 背景颜色
       selectInputEl.style.backgroundColor = config.customize.backgroundColor
       // 字体大小
       selectInputEl.style.fontSize = config.customize.fontSize + 'px'
       // 字体颜色
       selectInputEl.style.color = config.customize.fontColor
+      // 下拉图标
+      const selectDropdownIcon = document.querySelector(`.select-${config.code} .el-icon-arrow-up`)
+      selectDropdownIcon.style.fontSize = config.customize.fontSize + 'px'
       // 选择器下拉框元素
-      const selectDropdownEl = document.querySelector(`.selct-${config.code} .el-select-dropdown`)
+      const selectDropdownEl = document.querySelector(`.select-${config.code} .el-select-dropdown`)
       // 箭头背景颜色和下拉框背景颜色一致
       if (selectDropdownEl) {
         // 下拉框无边框
@@ -146,29 +149,29 @@ export default {
     visibleChange (val) {
       if (val) {
         // 修改下拉框背景颜色，让下拉框背景颜色和箭头背景颜色一致
-        const selectDropdownEl = document.querySelector(`.selct-popper-${this.innerConfig.code}`)
+        const selectDropdownEl = document.querySelector(`.select-popper-${this.innerConfig.code}`)
         selectDropdownEl.style.color = this.innerConfig.customize.dropDownBackgroundColor
         // 空状态
-        const selectDropdownEmptyEl = document.querySelector(`.selct-popper-${this.innerConfig.code} .el-select-dropdown__empty`)
+        const selectDropdownEmptyEl = document.querySelector(`.select-popper-${this.innerConfig.code} .el-select-dropdown__empty`)
         if (selectDropdownEmptyEl) {
           selectDropdownEmptyEl.style.backgroundColor = this.innerConfig.customize.dropDownBackgroundColor
         }
         // 下拉项hover颜色
-        const selectDropdownItemEl = document.querySelectorAll(`.selct-popper-${this.innerConfig.code} .el-select-dropdown__item`)
+        const selectDropdownItemEl = document.querySelectorAll(`.select-popper-${this.innerConfig.code} .el-select-dropdown__item`)
         // 给--dropDownHoverFontColor 和 --dropDownHoverBackgroundColor 赋值
         selectDropdownItemEl.forEach(item => {
           item.style.setProperty('--dropDownHoverFontColor', this.innerConfig.customize.dropDownHoverFontColor)
           item.style.setProperty('--dropDownHoverBackgroundColor', this.innerConfig.customize.dropDownHoverBackgroundColor)
         })
         // 激活项
-        const selectDropdownItemSelectedEl = document.querySelectorAll(`.selct-popper-${this.innerConfig.code} .el-select-dropdown__item.selected`)
+        const selectDropdownItemSelectedEl = document.querySelectorAll(`.select-popper-${this.innerConfig.code} .el-select-dropdown__item.selected`)
         selectDropdownItemSelectedEl.forEach(item => {
           item.style.color = this.innerConfig.customize.activeFontColor
           item.style.backgroundColor = this.innerConfig.customize.activeBackgroundColor
         })
       }
       // 不是激活项的还是使用背景颜色
-      const selectDropdownItemEl = document.querySelectorAll(`.selct-popper-${this.innerConfig.code} .el-select-dropdown__item`)
+      const selectDropdownItemEl = document.querySelectorAll(`.select-popper-${this.innerConfig.code} .el-select-dropdown__item`)
       selectDropdownItemEl.forEach(item => {
         // 检查是否是激活项，不是则使用背景颜色
         if (!item.classList.contains('selected')) {
@@ -176,6 +179,17 @@ export default {
           item.style.backgroundColor = this.innerConfig.customize.dropDownBackgroundColor
         }
       })
+    },
+    mouseenter () {
+      if (this.value) {
+        setTimeout(() => {
+        // 清空图标
+          const selectDropdownCloseIcon = document.querySelector(`.select-${this.innerConfig.code} .el-icon-circle-close`)
+          if (selectDropdownCloseIcon) {
+            selectDropdownCloseIcon.style.fontSize = this.innerConfig.customize.fontSize + 'px'
+          }
+        }, 30)
+      }
     }
   }
 
@@ -204,9 +218,15 @@ export default {
 .basic-component-select {
   width: 100%;
   height: 100%;
+
   ::v-deep .el-input {
     height: 100% !important;
-
+    .el-select__caret{
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
     //  选择器输入框样式
     .el-input__inner {
       height: 100% !important;