fix(components): [el-select] optimize prefix size & selected style (#6267)

* fix(components): [el-select] optimize prefix size & selected style

* fix: implement icon by mask

* chore: adjust multiple demo width

docs/examples/select/multiple.vue

@@ -1,5 +1,10 @@
 <template>
-  <el-select v-model="value1" multiple placeholder="Select">
+  <el-select
+    v-model="value1"
+    multiple
+    placeholder="Select"
+    style="width: 240px"
+  >
     <el-option
       v-for="item in options"
       :key="item.value"
@@ -13,7 +18,7 @@
     v-model="value2"
     multiple
     collapse-tags
-    style="margin-left: 20px"
+    style="margin-left: 20px; width: 240px"
     placeholder="Select"
   >
     <el-option

packages/components/select-v2/src/select.vue

@@ -22,7 +22,7 @@
       :transition="`${nsSelectV2.namespace.value}-zoom-in-top`"
       trigger="click"
       :persistent="persistent"
-      @show="handleMenuEnter"
+      @before-show="handleMenuEnter"
       @hide="states.inputValue = states.displayInputValue"
     >
       <template #default>

packages/components/select/src/select.vue

@@ -31,10 +31,10 @@
           >
             <span
               v-if="collapseTags && selected.length"
-              :style="{
-                marginLeft:
-                  prefixWidth && selected.length ? `${prefixWidth}px` : '',
-              }"
+              :class="[
+                nsSelect.b('tags-wrapper'),
+                { 'has-prefix': prefixWidth && selected.length },
+              ]"
             >
               <el-tag
                 :closable="!selectDisabled && !selected[0].isDisabled"
@@ -65,10 +65,10 @@
             <!-- <div> -->
             <transition v-if="!collapseTags" @after-leave="resetInputHeight">
               <span
-                :style="{
-                  marginLeft:
-                    prefixWidth && selected.length ? `${prefixWidth}px` : '',
-                }"
+                :class="[
+                  nsSelect.b('tags-wrapper'),
+                  { 'has-prefix': prefixWidth && selected.length },
+                ]"
               >
                 <el-tag
                   v-for="item in selected"

packages/theme-chalk/src/common/var.scss

@@ -381,6 +381,16 @@ $select-dropdown: map.merge(
   $select-dropdown
 );
 
+$select-tags-prefix-padding: () !default;
+$select-tags-prefix-padding: map.merge(
+  (
+    'large': 8px,
+    'default': 6px,
+    'small': 4px,
+  ),
+  $select-tags-prefix-padding
+);
+
 // Alert
 // css3 var in packages/theme-chalk/src/alert.scss
 $alert: () !default;

packages/theme-chalk/src/select-dropdown.scss

@@ -3,6 +3,27 @@
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
 
+$checked-icon: "data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E";
+
+@mixin checked-icon {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 20px;
+  border-top: none;
+  border-right: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: map.get($select-option, 'selected-text-color');
+  mask: url('#{$checked-icon}') no-repeat;
+  mask-size: 100% 100%;
+  -webkit-mask: url('#{$checked-icon}') no-repeat;
+  -webkit-mask-size: 100% 100%;
+  transform: translateY(-50%);
+  width: 12px;
+  height: 12px;
+}
+
 @include b(select-dropdown) {
   z-index: calc(var(--el-index-top) + 1);
   border-radius: var(--el-border-radius-base);
@@ -17,21 +38,18 @@
         background-color: map.get($select-option, 'hover-background');
       }
 
-      & .el-icon {
-        position: absolute;
-        right: 20px;
-        top: 0;
-        height: inherit;
-        font-size: 12px;
-
-        svg {
-          height: inherit;
-          vertical-align: middle;
-        }
+      &::after {
+        @include checked-icon;
       }
     }
   }
 
+  & .#{$namespace}-select-dropdown__option-item.is-selected {
+    &::after {
+      @include checked-icon;
+    }
+  }
+
   .#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list {
     padding: 0;
   }

packages/theme-chalk/src/select.scss

@@ -24,9 +24,20 @@
     );
   }
 
+  .#{$namespace}-select-tags-wrapper {
+    &.has-prefix {
+      margin-left: map.get($select-tags-prefix-padding, 'default');
+    }
+  }
+
   @each $size in (large, small) {
     @include m($size) {
       line-height: map.get($input-height, $size);
+      .#{$namespace}-select-tags-wrapper {
+        &.has-prefix {
+          margin-left: map.get($select-tags-prefix-padding, $size);
+        }
+      }
     }
   }