diff --git a/src/field/README.md b/src/field/README.md index a6673e8cf..a6850bbe1 100644 --- a/src/field/README.md +++ b/src/field/README.md @@ -100,7 +100,7 @@ export default { ### Error Info -Use `error` or `error-message` to show error info +Use `error` or `error-message` to show error info. ```html @@ -123,7 +123,7 @@ Use `error` or `error-message` to show error info ### Insert Button -Use button slot to insert button +Use button slot to insert button. ```html @@ -135,7 +135,7 @@ Use button slot to insert button ### Format Value -Use `formatter` prop to format the input value +Use `formatter` prop to format the input value. ```html `focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` | | clickable | 是否开启点击反馈 | _boolean_ | `false` | | is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` | | autofocus | 是否自动聚焦,iOS 系统不支持该属性 | _boolean_ | `false` | diff --git a/src/field/index.js b/src/field/index.js index e09db69b2..abf59cb12 100644 --- a/src/field/index.js +++ b/src/field/index.js @@ -69,6 +69,10 @@ export default createComponent({ type: Boolean, default: null, }, + clearTrigger: { + type: String, + default: 'focus', + }, formatTrigger: { type: String, default: 'onChange', @@ -109,13 +113,14 @@ export default createComponent({ computed: { showClear() { - return ( - this.clearable && - this.focused && - this.value !== '' && - isDef(this.value) && - !this.readonly - ); + if (this.clearable && !this.readonly) { + const hasValue = isDef(this.value) && this.value !== ''; + const trigger = + this.clearTrigger === 'always' || + (this.clearTrigger === 'focus' && this.focused); + + return hasValue && trigger; + } }, showError() { diff --git a/src/field/test/__snapshots__/index.spec.js.snap b/src/field/test/__snapshots__/index.spec.js.snap index 3ef7f9596..2c46a57c9 100644 --- a/src/field/test/__snapshots__/index.spec.js.snap +++ b/src/field/test/__snapshots__/index.spec.js.snap @@ -9,7 +9,7 @@ exports[`arrow-direction prop 1`] = ` `; -exports[`clearable 1`] = ` +exports[`clearable prop 1`] = `
@@ -17,7 +17,7 @@ exports[`clearable 1`] = `
`; -exports[`clearable 2`] = ` +exports[`clearable prop 2`] = `
diff --git a/src/field/test/index.spec.js b/src/field/test/index.spec.js index 8f3a087c8..08d23757f 100644 --- a/src/field/test/index.spec.js +++ b/src/field/test/index.spec.js @@ -184,7 +184,7 @@ test('maxlength', async () => { expect(wrapper.emitted('input')[0][0]).toEqual('123'); }); -test('clearable', () => { +test('clearable prop', () => { const wrapper = mount(Field, { propsData: { value: 'test', @@ -202,6 +202,18 @@ test('clearable', () => { expect(wrapper.emitted('clear')[0][0]).toBeTruthy(); }); +test('clear-trigger prop', () => { + const wrapper = mount(Field, { + propsData: { + value: 'test', + clearable: true, + clearTrigger: 'always', + }, + }); + + expect(wrapper.contains('.van-field__clear')).toBeTruthy(); +}); + test('render input slot', () => { const wrapper = mount(Field, { scopedSlots: {