mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
feat(field): expand click area support (#5479)
This commit is contained in:
landluck
GitHub
parent
f26de0cbb0
commit
f197c5f3c3
@ -29,14 +29,15 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-cell__title title-class"
|
||||
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
|
||||
>
|
||||
<wx-view
|
||||
<wx-label
|
||||
class="label-class van-field__label"
|
||||
for=""
|
||||
slot="title"
|
||||
>
|
||||
|
||||
地区
|
||||
|
||||
</wx-view>
|
||||
</wx-label>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
@ -60,6 +61,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{true}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder="请选择地区"
|
||||
@ -138,14 +140,15 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-cell__title title-class"
|
||||
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
|
||||
>
|
||||
<wx-view
|
||||
<wx-label
|
||||
class="label-class van-field__label"
|
||||
for=""
|
||||
slot="title"
|
||||
>
|
||||
|
||||
地区
|
||||
|
||||
</wx-view>
|
||||
</wx-label>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
@ -169,6 +172,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{true}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder="请选择地区"
|
||||
@ -247,14 +251,15 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-cell__title title-class"
|
||||
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
|
||||
>
|
||||
<wx-view
|
||||
<wx-label
|
||||
class="label-class van-field__label"
|
||||
for=""
|
||||
slot="title"
|
||||
>
|
||||
|
||||
地区
|
||||
|
||||
</wx-view>
|
||||
</wx-label>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
@ -278,6 +283,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{true}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder="请选择地区"
|
||||
@ -356,14 +362,15 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-cell__title title-class"
|
||||
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
|
||||
>
|
||||
<wx-view
|
||||
<wx-label
|
||||
class="label-class van-field__label"
|
||||
for=""
|
||||
slot="title"
|
||||
>
|
||||
|
||||
地区
|
||||
|
||||
</wx-view>
|
||||
</wx-label>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
@ -387,6 +394,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{true}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder="请选择地区"
|
||||
|
||||
@ -30,14 +30,15 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-cell__title title-class"
|
||||
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
|
||||
>
|
||||
<wx-view
|
||||
<wx-label
|
||||
class="label-class van-field__label"
|
||||
for=""
|
||||
slot="title"
|
||||
>
|
||||
|
||||
评分
|
||||
|
||||
</wx-view>
|
||||
</wx-label>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
@ -167,6 +168,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{false}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder=""
|
||||
@ -210,14 +212,15 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-cell__title title-class"
|
||||
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
|
||||
>
|
||||
<wx-view
|
||||
<wx-label
|
||||
class="label-class van-field__label"
|
||||
for=""
|
||||
slot="title"
|
||||
>
|
||||
|
||||
滑块
|
||||
|
||||
</wx-view>
|
||||
</wx-label>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
@ -282,6 +285,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{false}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder=""
|
||||
@ -386,14 +390,15 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-cell__title title-class"
|
||||
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
|
||||
>
|
||||
<wx-view
|
||||
<wx-label
|
||||
class="label-class van-field__label"
|
||||
for=""
|
||||
slot="title"
|
||||
>
|
||||
|
||||
评分
|
||||
|
||||
</wx-view>
|
||||
</wx-label>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
@ -523,6 +528,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{false}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder=""
|
||||
@ -566,14 +572,15 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-cell__title title-class"
|
||||
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
|
||||
>
|
||||
<wx-view
|
||||
<wx-label
|
||||
class="label-class van-field__label"
|
||||
for=""
|
||||
slot="title"
|
||||
>
|
||||
|
||||
滑块
|
||||
|
||||
</wx-view>
|
||||
</wx-label>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
@ -638,6 +645,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{false}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder=""
|
||||
|
||||
@ -240,13 +240,17 @@ Page({
|
||||
|
||||
相关的讨论可以查看[微信开放社区](https://developers.weixin.qq.com/community/search?query=input%20%E6%89%8B%E5%86%99%E8%BE%93%E5%85%A5&page=1&block=1&random=1567079239098)。
|
||||
|
||||
### 如何扩大点击区域？点击 label、错误信息 都能聚焦唤起键盘呢？
|
||||
|
||||
升级至 1.10.21 版本及以上，配置 `name` 属性即可
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| name | 在表单内提交时的标识符。可以通过配置 `name` 来扩大点击区域 | _string_ | - |
|
||||
| label | 输入框左侧文本 | _string_ | - |
|
||||
| size | 单元格大小，可选值为 `large` | _string_ | - |
|
||||
| value | 当前输入的值 | _string \| number_ | - |
|
||||
|
||||
@ -16,9 +16,9 @@
|
||||
custom-class="custom-class van-field"
|
||||
>
|
||||
<slot name="left-icon" slot="icon" />
|
||||
<view wx:if="{{ label }}" class="label-class {{ utils.bem('field__label', { disabled }) }}" slot="title">
|
||||
<label for="{{ name }}" wx:if="{{ label }}" class="label-class {{ utils.bem('field__label', { disabled }) }}" slot="title">
|
||||
{{ label }}
|
||||
</view>
|
||||
</label>
|
||||
<slot wx:else name="label" slot="title" />
|
||||
<view class="{{ utils.bem('field__body', [type]) }}">
|
||||
<view class="{{ utils.bem('field__control', [inputAlign, 'custom']) }}" bindtap="onClickInput">
|
||||
@ -47,10 +47,10 @@
|
||||
<slot name="button" />
|
||||
</view>
|
||||
</view>
|
||||
<view wx:if="{{ showWordLimit && maxlength }}" class="van-field__word-limit">
|
||||
<label for="{{ name }}" wx:if="{{ showWordLimit && maxlength }}" class="van-field__word-limit">
|
||||
<view class="{{ utils.bem('field__word-num', { full: value.length >= maxlength }) }}">{{ value.length >= maxlength ? maxlength : value.length }}</view>/{{ maxlength }}
|
||||
</view>
|
||||
<view wx:if="{{ errorMessage }}" class="{{ utils.bem('field__error-message', [errorMessageAlign, { disabled, error }]) }}">
|
||||
</label>
|
||||
<label for="{{ name }}" wx:if="{{ errorMessage }}" class="{{ utils.bem('field__error-message', [errorMessageAlign, { disabled, error }]) }}">
|
||||
{{ errorMessage }}
|
||||
</view>
|
||||
</label>
|
||||
</van-cell>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<input
|
||||
id="{{ name }}"
|
||||
class="{{ utils.bem('field__control', [inputAlign, { disabled, error }]) }} input-class"
|
||||
type="{{ type }}"
|
||||
focus="{{ focus }}"
|
||||
|
||||
@ -52,6 +52,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{false}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder="请输入用户名"
|
||||
@ -115,14 +116,15 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-cell__title title-class"
|
||||
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
|
||||
>
|
||||
<wx-view
|
||||
<wx-label
|
||||
class="label-class van-field__label"
|
||||
for=""
|
||||
slot="title"
|
||||
>
|
||||
|
||||
用户名
|
||||
|
||||
</wx-view>
|
||||
</wx-label>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
@ -146,6 +148,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{false}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder="请输入用户名"
|
||||
@ -200,14 +203,15 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-cell__title title-class"
|
||||
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
|
||||
>
|
||||
<wx-view
|
||||
<wx-label
|
||||
class="label-class van-field__label"
|
||||
for=""
|
||||
slot="title"
|
||||
>
|
||||
|
||||
密码
|
||||
|
||||
</wx-view>
|
||||
</wx-label>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
@ -231,6 +235,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{false}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{true}}"
|
||||
placeholder="请输入密码"
|
||||
@ -301,14 +306,15 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-cell__title title-class"
|
||||
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
|
||||
>
|
||||
<wx-view
|
||||
<wx-label
|
||||
class="label-class van-field__label van-field__label--disabled"
|
||||
for=""
|
||||
slot="title"
|
||||
>
|
||||
|
||||
用户名
|
||||
|
||||
</wx-view>
|
||||
</wx-label>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
@ -332,6 +338,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{true}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder=""
|
||||
@ -392,14 +399,15 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-cell__title title-class"
|
||||
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
|
||||
>
|
||||
<wx-view
|
||||
<wx-label
|
||||
class="label-class van-field__label"
|
||||
for=""
|
||||
slot="title"
|
||||
>
|
||||
|
||||
用户名
|
||||
|
||||
</wx-view>
|
||||
</wx-label>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
@ -423,6 +431,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{false}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder="请输入用户名"
|
||||
@ -466,14 +475,15 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-cell__title title-class"
|
||||
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
|
||||
>
|
||||
<wx-view
|
||||
<wx-label
|
||||
class="label-class van-field__label"
|
||||
for=""
|
||||
slot="title"
|
||||
>
|
||||
|
||||
手机号
|
||||
|
||||
</wx-view>
|
||||
</wx-label>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
@ -497,6 +507,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{false}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder="请输入手机号"
|
||||
@ -521,13 +532,14 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-field__button"
|
||||
/>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
<wx-label
|
||||
class="van-field__error-message"
|
||||
for=""
|
||||
>
|
||||
|
||||
手机号格式错误
|
||||
|
||||
</wx-view>
|
||||
</wx-label>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-cell>
|
||||
@ -564,14 +576,15 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-cell__title title-class"
|
||||
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
|
||||
>
|
||||
<wx-view
|
||||
<wx-label
|
||||
class="label-class van-field__label"
|
||||
for=""
|
||||
slot="title"
|
||||
>
|
||||
|
||||
用户名
|
||||
|
||||
</wx-view>
|
||||
</wx-label>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
@ -595,6 +608,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{false}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder="请输入用户名"
|
||||
@ -657,14 +671,15 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-cell__title title-class"
|
||||
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
|
||||
>
|
||||
<wx-view
|
||||
<wx-label
|
||||
class="label-class van-field__label"
|
||||
for=""
|
||||
slot="title"
|
||||
>
|
||||
|
||||
留言
|
||||
|
||||
</wx-view>
|
||||
</wx-label>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
@ -688,6 +703,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
fixed="{{false}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
placeholder="请输入留言"
|
||||
placeholderClass="van-field__placeholder"
|
||||
@ -751,14 +767,15 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
class="van-cell__title title-class"
|
||||
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
|
||||
>
|
||||
<wx-view
|
||||
<wx-label
|
||||
class="label-class van-field__label"
|
||||
for=""
|
||||
slot="title"
|
||||
>
|
||||
|
||||
短信验证码
|
||||
|
||||
</wx-view>
|
||||
</wx-label>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
@ -782,6 +799,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{false}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder="请输入短信验证码"
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<textarea
|
||||
id="{{ name }}"
|
||||
class="{{ utils.bem('field__control', [inputAlign, type, { disabled, error }]) }} input-class"
|
||||
fixed="{{ fixed }}"
|
||||
focus="{{ focus }}"
|
||||
|
||||
@ -77,6 +77,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{false}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder="请输入搜索关键词"
|
||||
@ -187,6 +188,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{false}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder="请输入搜索关键词"
|
||||
@ -305,6 +307,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{false}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder="请输入搜索关键词"
|
||||
@ -411,6 +414,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{true}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder="请输入搜索关键词"
|
||||
@ -517,6 +521,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{false}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder="请输入搜索关键词"
|
||||
@ -630,6 +635,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
disabled="{{false}}"
|
||||
focus="{{false}}"
|
||||
holdKeyboard="{{false}}"
|
||||
id=""
|
||||
maxlength="{{-1}}"
|
||||
password="{{false}}"
|
||||
placeholder="请输入搜索关键词"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user