iov-design 2.15.17 → 2.15.18

package/packages/select/src/select.vue

@@ -8,7 +8,7 @@
       class="el-select__tags"
       v-if="multiple"
       ref="tags"
-      :style="{ 'max-width': inputWidth - 32 + 'px', width: '100%' }">
+      :style="{ 'max-width': inputWidth - 32 + 'px', width: '100%', left: tagsLeft }">
       <span class="el-tag__group" v-if="collapseTags && selected.length">
         <el-tag
           :closable="!selectDisabled"
@@ -338,7 +338,8 @@
         currentPlaceholder: '',
         menuVisibleOnFocus: false,
         isOnComposition: false,
-        isSilentBlur: false
+        isSilentBlur: false,
+        tagsLeft: 0
       };
     },
 
@@ -649,6 +650,19 @@
         }
       },
 
+      resetTagsLeft() {
+        this.$nextTick(() => {
+          const prefixLabel = this.$el.querySelector('.el-input-group__prefix-label');
+          if (prefixLabel) {
+            const style = prefixLabel && window.getComputedStyle(prefixLabel);
+            const width = +(style.width.replace(/px/, ''));
+            const paddingLeft = +(style.paddingLeft.replace(/px/, ''));
+            const paddingRight = +(style.paddingRight.replace(/px/, ''));
+            this.tagsLeft = (width + paddingLeft + paddingRight) + 'px';
+          }
+        });
+      },
+
       resetInputState(e) {
         if (e.keyCode !== 8) this.toggleLastOptionHitState(false);
         this.inputLength = this.$refs.input.value.length * 15 + 20;
@@ -660,6 +674,12 @@
         this.$nextTick(() => {
           if (!this.$refs.reference) return;
           let inputChildNodes = this.$refs.reference.$el.childNodes;
+          // 兼容input组件多加了一层el-input-group__inner
+          Array.from(inputChildNodes).find(child => {
+            if (child && child.classList && child.classList.contains('el-input-group__inner')) {
+              inputChildNodes = child.childNodes;
+            }
+          });
           let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
           const tags = this.$refs.tags;
           const tagsHeight = tags ? Math.round(tags.getBoundingClientRect().height) : 0;
@@ -812,7 +832,10 @@
 
       handleResize() {
         this.resetInputWidth();
-        if (this.multiple) this.resetInputHeight();
+        if (this.multiple) {
+          this.resetInputHeight();
+          this.resetTagsLeft();
+        }
       },
 
       checkDefaultFirstOption() {

package/packages/theme-chalk/src/input.scss

@@ -465,6 +465,7 @@
     border-radius: $--input-border-radius;
     height: $--input-height - 2px;
     line-height: $--input-height - 2px;
+    box-sizing: border-box;
 
     &:focus {
       outline: none;

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

@@ -130,7 +130,7 @@
     position: absolute;
     line-height: normal;
     white-space: normal;
-    z-index: $--index-normal;
+    z-index: 3;
     top: 50%;
     transform: translateY(-50%);
     display: flex;

package/src/index.js

@@ -212,7 +212,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.15.17',
+  version: '2.15.18',
   locale: locale.use,
   i18n: locale.i18n,
   install,