blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] Field: add click-left-icon event (#2605)

Browse Source
This commit is contained in:
neverland 2019-01-24 22:32:47 +08:00 committed by GitHub
parent 3e27b93351
commit 368cb51dba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 71 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/field/demo/index.vue
View File

@ -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')"
/>
<van-field
@ -151,7 +151,7 @@ export default {
.demo-field {
padding-bottom: 30px;
.van-field__icon .van-icon {
.van-field__right-icon .van-icon {
color: @blue;
}
}

11
packages/field/en-US.md
View File

@ -28,9 +28,9 @@ Use `type` prop to custom diffrent type fields.
required
clearable
label="Username"
icon="question-o"
right-icon="question-o"
placeholder="Username"
@click-icon="$toast('question')"
@click-right-icon="$toast('question')"
/>
<van-field
@ -129,8 +129,8 @@ Field support all native properties of input tag，such as `maxlength`、`placeh
| label-align | Label text align, can be set to `center` `right` | `String` | `left` |
| input-align | Input text align, can be set to `center` `right` | `String` | `left` |
| autosize | Textarea auto resize，can accpet an object,<br>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 |

31
packages/field/index.js
View File

@ -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 && (
<div slot="icon" class={bem('left-icon')} onClick={this.onClickLeftIcon}>
{slots['left-icon'] || <Icon name={this.leftIcon} />}
</div>
);
const RightIcon = showRightIcon && (
<div class={bem('right-icon')} onClick={this.onClickRightIcon}>
{slots['right-icon'] || slots.icon || <Icon name={this.rightIcon || this.icon} />}
</div>
);
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)}
<div class={bem('body')}>
{Input}
{this.showClear && <Icon name="clear" class={bem('clear')} onTouchstart={this.onClear} />}
{(slots.icon || this.icon) && (
<div class={bem('icon')} onClick={this.onClickIcon}>
{slots.icon || <Icon name={this.icon} />}
</div>
)}
{RightIcon}
{slots.button && <div class={bem('button')}>{slots.button}</div>}
</div>
{this.errorMessage && <div class={bem('error-message')}>{this.errorMessage}</div>}

15
packages/field/index.less
View File

@ -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;
}

7
packages/field/test/__snapshots__/demo.spec.js.snap
View File

@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__title"><span>用户名</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="请输入用户名" value="" class="van-field__control">
<div class="van-field__icon"><i class="van-icon van-icon-question-o" style="color:undefined;font-size:undefined;">
<div class="van-field__right-icon"><i class="van-icon van-icon-question-o" style="color:undefined;font-size:undefined;">
<!----></i></div>
</div>
</div>
@ -32,8 +32,9 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-cell-group van-hairline--top-bottom">
<div disabled="disabled" class="van-cell van-field"><i class="van-icon van-icon-contact van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----></i>
<div disabled="disabled" class="van-cell van-field">
<div class="van-field__left-icon"><i class="van-icon van-icon-contact" style="color:undefined;font-size:undefined;">
<!----></i></div>
<div class="van-cell__title"><span>用户名</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" disabled="disabled" value="输入框已禁用" class="van-field__control"></div>

8
packages/field/test/index.spec.js
View File

@ -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);
});

13
packages/field/zh-CN.md
View File

@ -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')"
/>
<van-field
@ -131,8 +131,8 @@ Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
| label-align | 文本对齐方式，可选值为 `center` `right` | `String` | `left` | 1.1.10 |
| input-align | 输入框内容对齐方式，可选值为 `center` `right` | `String` | `left` | 1.1.10 |
| autosize | 自适应内容高度，只对 textarea 有效，可传入对象,<br>如 { 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 | 自定义输入框尾部按钮 |

15
packages/search/test/__snapshots__/demo.spec.js.snap
View File

@ -4,8 +4,9 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-search" style="background:#f2f2f2;">
<div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field"><i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----></i>
<div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
<div class="van-field__left-icon"><i class="van-icon van-icon-search" style="color:undefined;font-size:undefined;">
<!----></i></div>
<div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
</div>
@ -16,8 +17,9 @@ exports[`renders demo correctly 1`] = `
<div>
<form action="/">
<div class="van-search van-search--show-action" style="background:#f2f2f2;">
<div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field"><i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----></i>
<div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
<div class="van-field__left-icon"><i class="van-icon van-icon-search" style="color:undefined;font-size:undefined;">
<!----></i></div>
<div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
</div>
@ -30,8 +32,9 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-search van-search--show-action" style="background:#f2f2f2;">
<div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field"><i class="van-icon van-icon-search van-cell__left-icon" style="color:undefined;font-size:undefined;">
<!----></i>
<div placeholder="请输入搜索关键词" class="van-cell van-cell--borderless van-field">
<div class="van-field__left-icon"><i class="van-icon van-icon-search" style="color:undefined;font-size:undefined;">
<!----></i></div>
<div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"><input type="search" placeholder="请输入搜索关键词" value="" class="van-field__control"></div>
</div>