fix(ui/input ui/select): 修改input select样式

affects: @varlet/ui
varletjs · Apr 19, 2021 · 56cc7bf · 56cc7bf
1 parent a0e6f6a
commit 56cc7bf
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 38 deletions.
diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue
@@ -54,25 +54,6 @@
         >
           {{ placeholder }}
         </label>
-        <div
-          class="var-input__line"
-          :class="[
-            formDisabled || disabled ? 'var-input--line-disabled' : null,
-            errorMessage ? 'var-input--line-error' : null,
-          ]"
-          :style="{ background: !errorMessage ? blurColor : null }"
-          v-if="line"
-        >
-          <div
-            class="var-input__dot"
-            :class="[
-              isFocus ? 'var-input--spread' : null,
-              formDisabled || disabled ? 'var-input--line-disabled' : null,
-              errorMessage ? 'var-input--line-error' : null,
-            ]"
-            :style="{ background: !errorMessage ? focusColor : null }"
-          ></div>
-        </div>
       </div>
 
       <div class="var-input__icon" :class="[!hint ? 'var-input--non-hint' : null]">
@@ -89,6 +70,26 @@
       </div>
     </div>
 
+    <div
+      class="var-input__line"
+      :class="[
+        formDisabled || disabled ? 'var-input--line-disabled' : null,
+        errorMessage ? 'var-input--line-error' : null,
+      ]"
+      :style="{ background: !errorMessage ? blurColor : null }"
+      v-if="line"
+    >
+      <div
+        class="var-input__dot"
+        :class="[
+          isFocus ? 'var-input--spread' : null,
+          formDisabled || disabled ? 'var-input--line-disabled' : null,
+          errorMessage ? 'var-input--line-error' : null,
+        ]"
+        :style="{ background: !errorMessage ? focusColor : null }"
+      ></div>
+    </div>
+
     <var-form-details :error-message="errorMessage" :maxlength-text="maxlengthText" />
   </div>
 </template>

diff --git a/packages/varlet-ui/src/select/Select.vue b/packages/varlet-ui/src/select/Select.vue
@@ -75,25 +75,6 @@
           >
             {{ placeholder }}
           </label>
-          <div
-            class="var-select__line"
-            :class="[
-              formDisabled || disabled ? 'var-select--line-disabled' : null,
-              errorMessage ? 'var-select--line-error' : null,
-            ]"
-            :style="{ background: !errorMessage ? blurColor : null }"
-            v-if="line"
-          >
-            <div
-              class="var-select__dot"
-              :class="[
-                isFocus ? 'var-select--spread' : null,
-                formDisabled || disabled ? 'var-select--line-disabled' : null,
-                errorMessage ? 'var-select--line-error' : null,
-              ]"
-              :style="{ background: !errorMessage ? focusColor : null }"
-            ></div>
-          </div>
         </div>
 
         <template #menu>
@@ -110,6 +91,26 @@
       </div>
     </div>
 
+    <div
+      class="var-select__line"
+      :class="[
+        formDisabled || disabled ? 'var-select--line-disabled' : null,
+        errorMessage ? 'var-select--line-error' : null,
+      ]"
+      :style="{ background: !errorMessage ? blurColor : null }"
+      v-if="line"
+    >
+      <div
+        class="var-select__dot"
+        :class="[
+          isFocus ? 'var-select--spread' : null,
+          formDisabled || disabled ? 'var-select--line-disabled' : null,
+          errorMessage ? 'var-select--line-error' : null,
+        ]"
+        :style="{ background: !errorMessage ? focusColor : null }"
+      ></div>
+    </div>
+
     <var-form-details :error-message="errorMessage" />
   </div>
 </template>