Skip to content

Commit 668736d

Browse files
committed
feat: refine autofill user experience for Chrome
1 parent 7dd089b commit 668736d

File tree

6 files changed

+26
-9
lines changed

6 files changed

+26
-9
lines changed

packages/veui-theme-one/components/input.less

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
.veui-transition(border-color, color, box-shadow);
2020

2121
&-autofill {
22-
background-color: #faffbd;
22+
background-color: @veui-autofill-color;
2323
}
2424

2525
.veui-field > & {
@@ -46,6 +46,7 @@
4646

4747
&-input {
4848
display: block;
49+
position: relative;
4950
overflow: hidden;
5051
width: 100%;
5152
height: 100%;

packages/veui-theme-one/components/searchbox.less

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
.veui-input {
1212
width: 100%;
1313
vertical-align: top;
14-
background-color: transparent;
1514
overflow: visible;
1615
}
1716

packages/veui-theme-one/variables.less

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,9 +101,12 @@
101101
@veui-link-color-weak: @veui-text-color-weak;
102102
@veui-link-color-aux: @veui-text-color-aux;
103103

104+
/* Autofill color */
105+
@veui-autofill-color: #e8f0fe;
106+
104107
/* Font settings */
105-
@veui-font-family: "Helvetica Neue", Arial, "PingFang SC", STHeiti,
106-
"Microsoft YaHei", SimHei, sans-serif;
108+
@veui-font-family: 'Helvetica Neue', Arial, 'PingFang SC', STHeiti,
109+
'Microsoft YaHei', SimHei, sans-serif;
107110

108111
@veui-font-size-large: 16px;
109112
@veui-font-size-normal: 14px;

packages/veui/demo/cases/Input.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@ export default {
215215
if (!matched) {
216216
return
217217
}
218-
[digits, unit] = matched.slice(1)
218+
;[digits, unit] = matched.slice(1)
219219
digits = parseFloat(digits)
220220
if (isNaN(digits)) {
221221
return

packages/veui/src/components/Input.vue

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,11 @@ export default {
143143
} else {
144144
this.localValue = val
145145
}
146+
},
147+
autofill (val) {
148+
if (val) {
149+
this.$emit('autofill')
150+
}
146151
}
147152
},
148153
mounted () {
@@ -153,7 +158,9 @@ export default {
153158
methods: {
154159
handleInput ($event) {
155160
try {
156-
this.autofill = !!this.$el.querySelector(':-webkit-autofill')
161+
setTimeout(() => {
162+
this.autofill = !!this.$el.querySelector(':-webkit-autofill')
163+
})
157164
} catch (e) {}
158165
159166
// 分2种情况

packages/veui/src/components/Searchbox.vue

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,11 @@ export default {
155155
return pick(this, ['ui', ...without(SHARED_PROPS, 'value')])
156156
},
157157
realExpanded () {
158-
return !!(this.expanded && this.realSuggestions && this.realSuggestions.length)
158+
return !!(
159+
this.expanded &&
160+
this.realSuggestions &&
161+
this.realSuggestions.length
162+
)
159163
},
160164
valueProperty () {
161165
if (typeof this.replaceOnSelect !== 'string') {
@@ -190,7 +194,9 @@ export default {
190194
return includes(this.suggestTriggers, 'submit')
191195
},
192196
inputPopup () {
193-
return (this.hasFocusSuggestMode || this.hasInputSuggestMode) ? 'listbox' : null
197+
return this.hasFocusSuggestMode || this.hasInputSuggestMode
198+
? 'listbox'
199+
: null
194200
},
195201
submitPopup () {
196202
return this.hasSubmitSuggestMode ? 'listbox' : null
@@ -260,7 +266,8 @@ export default {
260266
this.disallowSuggest()
261267
}
262268
},
263-
activate () { // for label activation
269+
activate () {
270+
// for label activation
264271
if (this.realDisabled || this.realReadonly) {
265272
return
266273
}

0 commit comments

Comments
 (0)