feat(field): expand click area support (#5479)

youzan · Jul 10, 2023 · f197c5f · f197c5f
1 parent f26de0c
commit f197c5f
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 41 deletions.
diff --git a/packages/cascader/test/__snapshots__/demo.spec.ts.snap b/packages/cascader/test/__snapshots__/demo.spec.ts.snap
@@ -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="请选择地区"

diff --git a/packages/config-provider/test/__snapshots__/demo.spec.ts.snap b/packages/config-provider/test/__snapshots__/demo.spec.ts.snap
@@ -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=""

diff --git a/packages/field/README.md b/packages/field/README.md
@@ -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_ | - |

diff --git a/packages/field/index.wxml b/packages/field/index.wxml
@@ -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>
diff --git a/packages/field/input.wxml b/packages/field/input.wxml
@@ -1,4 +1,5 @@
 <input
+ id="{{ name }}"
  class="{{ utils.bem('field__control', [inputAlign, { disabled, error }]) }} input-class"
  type="{{ type }}"
  focus="{{ focus }}"