diff --git a/packages/field/demo/index.vue b/packages/field/demo/index.vue index bfd4a8a68..1d086bfa1 100644 --- a/packages/field/demo/index.vue +++ b/packages/field/demo/index.vue @@ -16,9 +16,9 @@ :label="$t('username')" :placeholder="$t('usernamePlaceholder')" clearable - icon="question-o" + right-icon="question-o" required - @click-icon="$toast('question')" + @click-right-icon="$toast('question')" /> e.g. { maxHeight: 100, minHeight: 50 } | `Boolean | Object` | `false` | -| icon | Right side icon name | `String` | - | | left-icon | Left side icon name | `String` | - | +| right-icon | Right side icon name | `String` | - | ### Event @@ -138,8 +138,9 @@ Field support all native events of input tag，such as `focus`、`blur`、`keypr | Event | Description | Parameters | |------|------|------| -| click-icon | Triggered when click the icon of Field | - | | clear | Triggered when click clear icon | - | +| click-left-icon | Triggered when click the left icon of Field | - | +| click-right-icon | Triggered when click the right icon of Field | - | ### Methods @@ -156,5 +157,5 @@ Use ref to get field instance and call instance methods |------|------| | label | Custom label | | left-icon | Custom left icon | -| icon | Custom right icon | +| right-icon | Custom right icon | | button | Insert button | diff --git a/packages/field/index.js b/packages/field/index.js index 8dea035f2..2d6b0ab17 100644 --- a/packages/field/index.js +++ b/packages/field/index.js @@ -13,6 +13,7 @@ export default sfc({ props: { error: Boolean, leftIcon: String, + rightIcon: String, readonly: Boolean, clearable: Boolean, labelAlign: String, @@ -103,8 +104,14 @@ export default sfc({ this.$emit('blur', event); }, - onClickIcon() { + onClickLeftIcon() { + this.$emit('click-left-icon'); + }, + + onClickRightIcon() { + // compatible old version this.$emit('click-icon'); + this.$emit('click-right-icon'); this.onIconClick && this.onIconClick(); }, @@ -162,6 +169,20 @@ export default sfc({ render(h) { const { type, labelAlign, $slots: slots } = this; + const showLeftIcon = slots['left-icon'] || this.leftIcon; + const showRightIcon = slots['right-icon'] || slots.icon || this.rightIcon || this.icon; + + const LeftIcon = showLeftIcon && ( +
+ {slots['left-icon'] || } +
+ ); + const RightIcon = showRightIcon && ( +
+ {slots['right-icon'] || slots.icon || } +
+ ); + const inputProps = { ref: 'input', class: bem('control', this.inputAlign), @@ -192,16 +213,12 @@ export default sfc({ 'min-height': type === 'textarea' && !this.autosize })} > - {h('template', { slot: 'icon' }, slots['left-icon'])} + {LeftIcon} {h('template', { slot: 'title' }, slots.label)}
{Input} {this.showClear && } - {(slots.icon || this.icon) && ( -
- {slots.icon || } -
- )} + {RightIcon} {slots.button &&
{slots.button}
}
{this.errorMessage &&
{this.errorMessage}
} diff --git a/packages/field/index.less b/packages/field/index.less index 934dc7d47..57a6d36e8 100644 --- a/packages/field/index.less +++ b/packages/field/index.less @@ -53,7 +53,7 @@ } &__clear, - &__icon { + &__right-icon { padding: 0 10px; line-height: inherit; margin-right: -10px; @@ -64,13 +64,22 @@ font-size: 16px; } - &__icon .van-icon { + &__left-icon .van-icon, + &__right-icon .van-icon { display: block; + min-width: 1em; font-size: 16px; - color: @gray-dark; line-height: inherit; } + &__left-icon { + margin-right: 5px; + } + + &__right-icon { + color: @gray-dark; + } + &__button { padding-left: 10px; } diff --git a/packages/field/test/__snapshots__/demo.spec.js.snap b/packages/field/test/__snapshots__/demo.spec.js.snap index 25adfb120..7b2df140e 100644 --- a/packages/field/test/__snapshots__/demo.spec.js.snap +++ b/packages/field/test/__snapshots__/demo.spec.js.snap @@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
用户名
-
+
@@ -32,8 +32,9 @@ exports[`renders demo correctly 1`] = `
-
- +
+
+
用户名
diff --git a/packages/field/test/index.spec.js b/packages/field/test/index.spec.js index 92789ac45..268f38f07 100644 --- a/packages/field/test/index.spec.js +++ b/packages/field/test/index.spec.js @@ -15,13 +15,17 @@ test('click icon event', () => { const wrapper = mount(Field, { propsData: { value: 'a', - icon: 'search', + leftIcon: 'contact', + rightIcon: 'search', onIconClick } }); - wrapper.find('.van-field__icon').trigger('click'); + wrapper.find('.van-field__left-icon').trigger('click'); + wrapper.find('.van-field__right-icon').trigger('click'); expect(wrapper.emitted('click-icon')).toBeTruthy(); + expect(wrapper.emitted('click-left-icon')).toBeTruthy(); + expect(wrapper.emitted('click-right-icon')).toBeTruthy(); expect(onIconClick.mock.calls.length).toBe(1); }); diff --git a/packages/field/zh-CN.md b/packages/field/zh-CN.md index f55bf5aaa..2a86fa867 100644 --- a/packages/field/zh-CN.md +++ b/packages/field/zh-CN.md @@ -30,9 +30,9 @@ Vue.use(Field); required clearable label="用户名" - icon="question-o" + right-icon="question-o" placeholder="请输入用户名" - @click-icon="$toast('question')" + @click-right-icon="$toast('question')" /> 如 { maxHeight: 100, minHeight: 50 }，单位为 px | `Boolean | Object` | `false` | 1.0.0 | -| icon | 输入框尾部图标名称或图片链接，可选值见 Icon 组件 | `String` | - | - | -| left-icon | 输入框左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 1.1.4 | +| left-icon | 输入框左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 1.5.7 | +| right-icon | 输入框尾部图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 1.5.7 | ### Event @@ -140,8 +140,9 @@ Field 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`k | 事件 | 说明 | 回调参数 | |------|------|------| -| click-icon | 点击尾部图标时触发 | - | | clear | 点击清除按钮后触发 | - | +| click-left-icon | 点击头部图标时触发 | - | +| click-right-icon | 点击尾部图标时触发 | - | ### 方法 @@ -158,5 +159,5 @@ Field 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`k |------|------| | label | 自定义输入框标签 | | left-icon | 自定义输入框头部图标 | -| icon | 自定义输入框尾部图标 | +| right-icon | 自定义输入框尾部图标 | | button | 自定义输入框尾部按钮 | diff --git a/packages/search/test/__snapshots__/demo.spec.js.snap b/packages/search/test/__snapshots__/demo.spec.js.snap index d6ba68af4..4819f080c 100644 --- a/packages/search/test/__snapshots__/demo.spec.js.snap +++ b/packages/search/test/__snapshots__/demo.spec.js.snap @@ -4,8 +4,9 @@ exports[`renders demo correctly 1`] = `
-
- +
+
+
@@ -16,8 +17,9 @@ exports[`renders demo correctly 1`] = `
-
- +
+
+
@@ -30,8 +32,9 @@ exports[`renders demo correctly 1`] = `
-
- +
+
+