fix(ui/input): fix the wrong style of input

varletjs · Jul 29, 2021 · 0cd5752 · 0cd5752
1 parent fffbb41
commit 0cd5752
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 22 deletions.
diff --git a/packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap
@@ -111,7 +111,9 @@ exports[`test form with input 1`] = `
   <div class=\\"var-input var--box\\">
     <div class=\\"var-input__controller var-input--disabled\\">
       <div class=\\"var-input__icon\\"></div>
-      <div class=\\"var-input__wrap\\"><input class=\\"var-input__input var-input--disabled\\" autocomplete=\\"off\\" id=\\"var-input-3\\" disabled=\\"\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-3\\"></label></div>
+      <div class=\\"var-input__wrap\\">
+        <!--v-if--><input class=\\"var-input__input var-input--disabled\\" autocomplete=\\"new-password\\" id=\\"var-input-3\\" disabled=\\"\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-3\\"></label>
+      </div>
       <div class=\\"var-input__icon\\">
         <!--v-if-->
       </div>
@@ -131,7 +133,9 @@ exports[`test form with input 2`] = `
   <div class=\\"var-input var--box\\">
     <div class=\\"var-input__controller\\">
       <div class=\\"var-input__icon\\"></div>
-      <div class=\\"var-input__wrap\\"><input class=\\"var-input__input\\" autocomplete=\\"off\\" id=\\"var-input-3\\" disabled=\\"\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-3\\"></label></div>
+      <div class=\\"var-input__wrap\\">
+        <!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-3\\" disabled=\\"\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-3\\"></label>
+      </div>
       <div class=\\"var-input__icon\\">
         <!--v-if-->
       </div>
@@ -151,7 +155,9 @@ exports[`test form with input 3`] = `
   <div class=\\"var-input var--box\\">
     <div class=\\"var-input__controller var-input--error\\">
       <div class=\\"var-input__icon\\"></div>
-      <div class=\\"var-input__wrap\\"><input class=\\"var-input__input var-input--caret-error\\" autocomplete=\\"off\\" id=\\"var-input-3\\" disabled=\\"\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-3\\"></label></div>
+      <div class=\\"var-input__wrap\\">
+        <!--v-if--><input class=\\"var-input__input var-input--caret-error\\" autocomplete=\\"new-password\\" id=\\"var-input-3\\" disabled=\\"\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-3\\"></label>
+      </div>
       <div class=\\"var-input__icon\\">
         <!--v-if-->
       </div>
@@ -174,7 +180,9 @@ exports[`test form with input 4`] = `
   <div class=\\"var-input var--box\\">
     <div class=\\"var-input__controller\\">
       <div class=\\"var-input__icon\\"></div>
-      <div class=\\"var-input__wrap\\"><input class=\\"var-input__input\\" autocomplete=\\"off\\" id=\\"var-input-3\\" disabled=\\"\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-3\\"></label></div>
+      <div class=\\"var-input__wrap\\">
+        <!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-3\\" disabled=\\"\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-3\\"></label>
+      </div>
       <div class=\\"var-input__icon\\">
         <!--v-if-->
       </div>

diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue
@@ -16,10 +16,11 @@
       </div>
 
       <div class="var-input__wrap" :class="[!hint ? 'var-input--non-hint' : null]">
+        <input class="var-input__autocomplete" v-if="type === 'password'" />
         <component
           class="var-input__input"
           ref="el"
-          autocomplete="off"
+          autocomplete="new-password"
           :is="textarea ? 'textarea' : 'input'"
           :id="id"
           :disabled="formDisabled || disabled || formReadonly || readonly"

diff --git a/packages/varlet-ui/src/input/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/input/__tests__/__snapshots__/index.spec.js.snap
@@ -4,7 +4,9 @@ exports[`test input clear 1`] = `
 "<div class=\\"var-input var--box\\">
   <div class=\\"var-input__controller\\">
     <div class=\\"var-input__icon\\"></div>
-    <div class=\\"var-input__wrap\\"><input class=\\"var-input__input\\" autocomplete=\\"off\\" id=\\"var-input-58\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder var-input--placeholder-hint\\" for=\\"var-input-58\\"></label></div>
+    <div class=\\"var-input__wrap\\">
+      <!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-58\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder var-input--placeholder-hint\\" for=\\"var-input-58\\"></label>
+    </div>
     <div class=\\"var-input__icon\\"><i class=\\"var-icon var-icon--set var-icon-close-circle var-input__clear-icon\\" style=\\"transition: all 0ms; font-size: 14px;\\" var-input-cover=\\"\\"></i></div>
   </div>
   <div class=\\"var-input__line\\">
@@ -21,7 +23,9 @@ exports[`test input example 1`] = `
 <div class=\\"var-input var--box\\">
   <div class=\\"var-input__controller\\">
     <div class=\\"var-input__icon\\"></div>
-    <div class=\\"var-input__wrap\\"><input class=\\"var-input__input\\" autocomplete=\\"off\\" id=\\"var-input-3\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-3\\">请输入文本</label></div>
+    <div class=\\"var-input__wrap\\">
+      <!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-3\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-3\\">请输入文本</label>
+    </div>
     <div class=\\"var-input__icon\\">
       <!--v-if-->
     </div>
@@ -37,7 +41,9 @@ exports[`test input example 1`] = `
 <div class=\\"var-input var--box\\">
   <div class=\\"var-input__controller\\">
     <div class=\\"var-input__icon var-input--non-hint\\"></div>
-    <div class=\\"var-input__wrap var-input--non-hint\\"><input class=\\"var-input__input\\" autocomplete=\\"off\\" id=\\"var-input-7\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder var-input--placeholder-non-hint\\" for=\\"var-input-7\\">请输入文本</label></div>
+    <div class=\\"var-input__wrap var-input--non-hint\\">
+      <!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-7\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder var-input--placeholder-non-hint\\" for=\\"var-input-7\\">请输入文本</label>
+    </div>
     <div class=\\"var-input__icon var-input--non-hint\\">
       <!--v-if-->
     </div>
@@ -51,7 +57,9 @@ exports[`test input example 1`] = `
 <div class=\\"var-input var--box\\">
   <div class=\\"var-input__controller\\">
     <div class=\\"var-input__icon\\"></div>
-    <div class=\\"var-input__wrap\\"><textarea class=\\"var-input__input var-input--textarea\\" autocomplete=\\"off\\" id=\\"var-input-11\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"></textarea><label class=\\"var-input__textarea-placeholder\\" for=\\"var-input-11\\">请输入文本</label></div>
+    <div class=\\"var-input__wrap\\">
+      <!--v-if--><textarea class=\\"var-input__input var-input--textarea\\" autocomplete=\\"new-password\\" id=\\"var-input-11\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"></textarea><label class=\\"var-input__textarea-placeholder\\" for=\\"var-input-11\\">请输入文本</label>
+    </div>
     <div class=\\"var-input__icon\\">
       <!--v-if-->
     </div>
@@ -67,7 +75,9 @@ exports[`test input example 1`] = `
 <div class=\\"var-input var--box\\">
   <div class=\\"var-input__controller\\">
     <div class=\\"var-input__icon\\"></div>
-    <div class=\\"var-input__wrap\\"><input class=\\"var-input__input\\" autocomplete=\\"off\\" id=\\"var-input-15\\" type=\\"text\\" maxlength=\\"10\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-15\\">请输入文本</label></div>
+    <div class=\\"var-input__wrap\\">
+      <!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-15\\" type=\\"text\\" maxlength=\\"10\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-15\\">请输入文本</label>
+    </div>
     <div class=\\"var-input__icon\\">
       <!--v-if-->
     </div>
@@ -86,7 +96,9 @@ exports[`test input example 1`] = `
 <div class=\\"var-input var--box var-input--disabled\\">
   <div class=\\"var-input__controller var-input--disabled\\">
     <div class=\\"var-input__icon\\"></div>
-    <div class=\\"var-input__wrap\\"><input class=\\"var-input__input var-input--disabled\\" autocomplete=\\"off\\" id=\\"var-input-19\\" disabled=\\"\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-19\\">请输入文本</label></div>
+    <div class=\\"var-input__wrap\\">
+      <!--v-if--><input class=\\"var-input__input var-input--disabled\\" autocomplete=\\"new-password\\" id=\\"var-input-19\\" disabled=\\"\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-19\\">请输入文本</label>
+    </div>
     <div class=\\"var-input__icon\\">
       <!--v-if-->
     </div>
@@ -102,7 +114,9 @@ exports[`test input example 1`] = `
 <div class=\\"var-input var--box\\">
   <div class=\\"var-input__controller\\">
     <div class=\\"var-input__icon\\"></div>
-    <div class=\\"var-input__wrap\\"><input class=\\"var-input__input\\" autocomplete=\\"off\\" id=\\"var-input-23\\" disabled=\\"\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-23\\">请输入文本</label></div>
+    <div class=\\"var-input__wrap\\">
+      <!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-23\\" disabled=\\"\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-23\\">请输入文本</label>
+    </div>
     <div class=\\"var-input__icon\\">
       <!--v-if-->
     </div>
@@ -118,7 +132,9 @@ exports[`test input example 1`] = `
 <div class=\\"var-input var--box\\">
   <div class=\\"var-input__controller\\">
     <div class=\\"var-input__icon\\"></div>
-    <div class=\\"var-input__wrap\\"><input class=\\"var-input__input\\" autocomplete=\\"off\\" id=\\"var-input-27\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder var-input--placeholder-hint\\" for=\\"var-input-27\\">请输入文本</label></div>
+    <div class=\\"var-input__wrap\\">
+      <!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-27\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder var-input--placeholder-hint\\" for=\\"var-input-27\\">请输入文本</label>
+    </div>
     <div class=\\"var-input__icon\\"><i class=\\"var-icon var-icon--set var-icon-close-circle var-input__clear-icon\\" style=\\"transition: all 0ms; font-size: 14px;\\" var-input-cover=\\"\\"></i></div>
   </div>
   <div class=\\"var-input__line\\">
@@ -132,7 +148,9 @@ exports[`test input example 1`] = `
 <div class=\\"var-input var--box\\">
   <div class=\\"var-input__controller\\">
     <div class=\\"var-input__icon\\"><i class=\\"var-icon var-icon--set var-icon-plus prepend-icon\\" style=\\"transition: all 0ms;\\"></i></div>
-    <div class=\\"var-input__wrap\\"><input class=\\"var-input__input\\" autocomplete=\\"off\\" id=\\"var-input-32\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-32\\">请输入文本</label></div>
+    <div class=\\"var-input__wrap\\">
+      <!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-32\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-32\\">请输入文本</label>
+    </div>
     <div class=\\"var-input__icon\\"><i class=\\"var-icon var-icon--set var-icon-minus append-icon\\" style=\\"transition: all 0ms;\\"></i></div>
   </div>
   <div class=\\"var-input__line\\">
@@ -146,7 +164,9 @@ exports[`test input example 1`] = `
 <div class=\\"var-input var--box\\">
   <div class=\\"var-input__controller\\">
     <div class=\\"var-input__icon\\"></div>
-    <div class=\\"var-input__wrap\\"><input class=\\"var-input__input\\" autocomplete=\\"off\\" id=\\"var-input-38\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-38\\">请输入文本</label></div>
+    <div class=\\"var-input__wrap\\">
+      <!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-38\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-38\\">请输入文本</label>
+    </div>
     <div class=\\"var-input__icon\\">
       <!--v-if-->
     </div>
@@ -165,7 +185,9 @@ exports[`test input focus & blur 1`] = `
 "<div class=\\"var-input var--box\\">
   <div class=\\"var-input__controller var-input--focus\\">
     <div class=\\"var-input__icon\\"></div>
-    <div class=\\"var-input__wrap\\"><input class=\\"var-input__input\\" autocomplete=\\"off\\" id=\\"var-input-42\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder var-input--placeholder-hint\\" for=\\"var-input-42\\"></label></div>
+    <div class=\\"var-input__wrap\\">
+      <!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-42\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder var-input--placeholder-hint\\" for=\\"var-input-42\\"></label>
+    </div>
     <div class=\\"var-input__icon\\">
       <!--v-if-->
     </div>
@@ -183,7 +205,9 @@ exports[`test input focus & blur 2`] = `
 "<div class=\\"var-input var--box\\">
   <div class=\\"var-input__controller\\">
     <div class=\\"var-input__icon\\"></div>
-    <div class=\\"var-input__wrap\\"><input class=\\"var-input__input\\" autocomplete=\\"off\\" id=\\"var-input-42\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-42\\"></label></div>
+    <div class=\\"var-input__wrap\\">
+      <!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-42\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-42\\"></label>
+    </div>
     <div class=\\"var-input__icon\\">
       <!--v-if-->
     </div>
@@ -201,7 +225,9 @@ exports[`test input hint to be false 1`] = `
 "<div class=\\"var-input var--box\\">
   <div class=\\"var-input__controller\\">
     <div class=\\"var-input__icon var-input--non-hint\\"></div>
-    <div class=\\"var-input__wrap var-input--non-hint\\"><input class=\\"var-input__input\\" autocomplete=\\"off\\" id=\\"var-input-54\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder var-input--placeholder-hidden var-input--placeholder-non-hint\\" for=\\"var-input-54\\"></label></div>
+    <div class=\\"var-input__wrap var-input--non-hint\\">
+      <!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-54\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder var-input--placeholder-hidden var-input--placeholder-non-hint\\" for=\\"var-input-54\\"></label>
+    </div>
     <div class=\\"var-input__icon var-input--non-hint\\">
       <!--v-if-->
     </div>
@@ -219,7 +245,9 @@ exports[`test input maxlength 1`] = `
 "<div class=\\"var-input var--box\\">
   <div class=\\"var-input__controller\\">
     <div class=\\"var-input__icon\\"></div>
-    <div class=\\"var-input__wrap\\"><input class=\\"var-input__input\\" autocomplete=\\"off\\" id=\\"var-input-50\\" type=\\"text\\" maxlength=\\"100\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder var-input--placeholder-hint\\" for=\\"var-input-50\\"></label></div>
+    <div class=\\"var-input__wrap\\">
+      <!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-50\\" type=\\"text\\" maxlength=\\"100\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder var-input--placeholder-hint\\" for=\\"var-input-50\\"></label>
+    </div>
     <div class=\\"var-input__icon\\">
       <!--v-if-->
     </div>
@@ -240,7 +268,9 @@ exports[`test input validation 1`] = `
 "<div class=\\"var-input var--box\\">
   <div class=\\"var-input__controller var-input--error\\">
     <div class=\\"var-input__icon\\"></div>
-    <div class=\\"var-input__wrap\\"><input class=\\"var-input__input var-input--caret-error\\" autocomplete=\\"off\\" id=\\"var-input-73\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder var-input--placeholder-hint\\" for=\\"var-input-73\\"></label></div>
+    <div class=\\"var-input__wrap\\">
+      <!--v-if--><input class=\\"var-input__input var-input--caret-error\\" autocomplete=\\"new-password\\" id=\\"var-input-73\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder var-input--placeholder-hint\\" for=\\"var-input-73\\"></label>
+    </div>
     <div class=\\"var-input__icon\\">
       <!--v-if-->
     </div>
@@ -261,7 +291,9 @@ exports[`test input validation 2`] = `
 "<div class=\\"var-input var--box\\">
   <div class=\\"var-input__controller\\">
     <div class=\\"var-input__icon\\"></div>
-    <div class=\\"var-input__wrap\\"><input class=\\"var-input__input\\" autocomplete=\\"off\\" id=\\"var-input-73\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-73\\"></label></div>
+    <div class=\\"var-input__wrap\\">
+      <!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-73\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder\\" for=\\"var-input-73\\"></label>
+    </div>
     <div class=\\"var-input__icon\\">
       <!--v-if-->
     </div>
@@ -279,7 +311,9 @@ exports[`test input validation 3`] = `
 "<div class=\\"var-input var--box\\">
   <div class=\\"var-input__controller\\">
     <div class=\\"var-input__icon\\"></div>
-    <div class=\\"var-input__wrap\\"><input class=\\"var-input__input\\" autocomplete=\\"off\\" id=\\"var-input-73\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder var-input--placeholder-hint\\" for=\\"var-input-73\\"></label></div>
+    <div class=\\"var-input__wrap\\">
+      <!--v-if--><input class=\\"var-input__input\\" autocomplete=\\"new-password\\" id=\\"var-input-73\\" type=\\"text\\" rows=\\"8\\" style=\\"resize: none;\\"><label class=\\"var-input__placeholder var-input--placeholder-hint\\" for=\\"var-input-73\\"></label>
+    </div>
     <div class=\\"var-input__icon\\">
       <!--v-if-->
     </div>

diff --git a/packages/varlet-ui/src/input/input.less b/packages/varlet-ui/src/input/input.less
@@ -85,6 +85,15 @@
     font-size: var(--input-placeholder-size);
   }
 
+  &__autocomplete {
+    width: 0;
+    height: 0;
+    padding: 0;
+    border: none;
+    outline: none;
+    font-size: 0;
+  }
+
   &__input {
     width: 100%;
     height: 32px;