feat: refine autofill user experience for Chrome

ecomfe · Apr 1, 2019 · 668736d · 668736d
1 parent 7dd089b
commit 668736d
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 9 deletions.
diff --git a/packages/veui-theme-one/components/input.less b/packages/veui-theme-one/components/input.less
@@ -19,7 +19,7 @@
   .veui-transition(border-color, color, box-shadow);
 
   &-autofill {
-    background-color: #faffbd;
+    background-color: @veui-autofill-color;
   }
 
   .veui-field > & {
@@ -46,6 +46,7 @@
 
   &-input {
     display: block;
+    position: relative;
     overflow: hidden;
     width: 100%;
     height: 100%;

diff --git a/packages/veui-theme-one/components/searchbox.less b/packages/veui-theme-one/components/searchbox.less
@@ -11,7 +11,6 @@
   .veui-input {
     width: 100%;
     vertical-align: top;
-    background-color: transparent;
     overflow: visible;
   }
 

diff --git a/packages/veui-theme-one/variables.less b/packages/veui-theme-one/variables.less
@@ -101,9 +101,12 @@
 @veui-link-color-weak: @veui-text-color-weak;
 @veui-link-color-aux: @veui-text-color-aux;
 
+/* Autofill color */
+@veui-autofill-color: #e8f0fe;
+
 /* Font settings */
-@veui-font-family: "Helvetica Neue", Arial, "PingFang SC", STHeiti,
-  "Microsoft YaHei", SimHei, sans-serif;
+@veui-font-family: 'Helvetica Neue', Arial, 'PingFang SC', STHeiti,
+  'Microsoft YaHei', SimHei, sans-serif;
 
 @veui-font-size-large: 16px;
 @veui-font-size-normal: 14px;

diff --git a/packages/veui/demo/cases/Input.vue b/packages/veui/demo/cases/Input.vue
@@ -215,7 +215,7 @@ export default {
         if (!matched) {
           return
         }
-        [digits, unit] = matched.slice(1)
+        ;[digits, unit] = matched.slice(1)
         digits = parseFloat(digits)
         if (isNaN(digits)) {
           return

diff --git a/packages/veui/src/components/Input.vue b/packages/veui/src/components/Input.vue
@@ -143,6 +143,11 @@ export default {
       } else {
         this.localValue = val
       }
+    },
+    autofill (val) {
+      if (val) {
+        this.$emit('autofill')
+      }
     }
   },
   mounted () {
@@ -153,7 +158,9 @@ export default {
   methods: {
     handleInput ($event) {
       try {
-        this.autofill = !!this.$el.querySelector(':-webkit-autofill')
+        setTimeout(() => {
+          this.autofill = !!this.$el.querySelector(':-webkit-autofill')
+        })
       } catch (e) {}
 
       // 分2种情况

diff --git a/packages/veui/src/components/Searchbox.vue b/packages/veui/src/components/Searchbox.vue
@@ -155,7 +155,11 @@ export default {
       return pick(this, ['ui', ...without(SHARED_PROPS, 'value')])
     },
     realExpanded () {
-      return !!(this.expanded && this.realSuggestions && this.realSuggestions.length)
+      return !!(
+        this.expanded &&
+        this.realSuggestions &&
+        this.realSuggestions.length
+      )
     },
     valueProperty () {
       if (typeof this.replaceOnSelect !== 'string') {
@@ -190,7 +194,9 @@ export default {
       return includes(this.suggestTriggers, 'submit')
     },
     inputPopup () {
-      return (this.hasFocusSuggestMode || this.hasInputSuggestMode) ? 'listbox' : null
+      return this.hasFocusSuggestMode || this.hasInputSuggestMode
+        ? 'listbox'
+        : null
     },
     submitPopup () {
       return this.hasSubmitSuggestMode ? 'listbox' : null
@@ -260,7 +266,8 @@ export default {
         this.disallowSuggest()
       }
     },
-    activate () { // for label activation
+    activate () {
+      // for label activation
       if (this.realDisabled || this.realReadonly) {
         return
       }