mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
feat(Field): add clear-trigger prop (#4461)
* feat(Field): add clear-trigger prop * docs(Field): update doc * fix(Field): adjust code
This commit is contained in:
nemo-shen
GitHub
parent
583581fbee
commit
cc0df907e7
@ -213,64 +213,65 @@ Page({
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| label | 输入框左侧文本 | _string_ | - |
|
||||
| size | 单元格大小，可选值为 `large` | _string_ | - |
|
||||
| value | 当前输入的值 | _string \| number_ | - |
|
||||
| type | 可设置为任意原生类型, 如 `number` `idcard` `textarea` `digit` | _string_ | `text` |
|
||||
| fixed | 如果 type 为 `textarea` 且在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true | _boolean_ | `false` |
|
||||
| focus | 获取焦点 | _boolean_ | `false` |
|
||||
| border | 是否显示内边框 | _boolean_ | `true` |
|
||||
| disabled | 是否禁用输入框 | _boolean_ | `false` |
|
||||
| readonly | 是否只读 | _boolean_ | `false` |
|
||||
| clearable | 是否启用清除控件 | _boolean_ | `false` |
|
||||
| clickable | 是否开启点击反馈 | _boolean_ | `false` |
|
||||
| required | 是否显示表单必填星号 | _boolean_ | `false` |
|
||||
| center | 是否使内容垂直居中 | _boolean_ | `false` |
|
||||
| password | 是否是密码类型 | _boolean_ | `false` |
|
||||
| title-width | 标题宽度 | _string_ | `6.2em` |
|
||||
| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | _number_ | `-1` |
|
||||
| placeholder | 输入框为空时占位符 | _string_ | - |
|
||||
| placeholder-style | 指定 placeholder 的样式 | _string_ | - |
|
||||
| custom-style | 自定义样式 | _string_ | - |
|
||||
| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
|
||||
| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | - |
|
||||
| show-word-limit | 是否显示字数统计，需要设置`maxlength`属性 | _boolean_ | `false` |
|
||||
| error | 是否将输入内容标红 | _boolean_ | `false` |
|
||||
| error-message | 底部错误提示文案，为空时不展示 | _string_ | `''` |
|
||||
| error-message-align | 底部错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `''` |
|
||||
| input-align | 输入框内容对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
| autosize | 是否自适应内容高度，只对 textarea 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`px` | _boolean \| object_ | `false` |
|
||||
| left-icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - |
|
||||
| right-icon | 右侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - |
|
||||
| confirm-type | 设置键盘右下角按钮的文字，仅在 type='text' 时生效 | _string_ | `done` |
|
||||
| confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起，在 type='textarea' 时无效 | _boolean_ | `false` |
|
||||
| hold-keyboard | focus 时，点击页面的时候不收起键盘 | _boolean_ | `false` |
|
||||
| cursor-spacing | 输入框聚焦时底部与键盘的距离 | _number_ | `50` |
|
||||
| adjust-position | 键盘弹起时，是否自动上推页面 | _boolean_ | `true` |
|
||||
| show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效 | _boolean_ | `true` |
|
||||
| selection-start | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | _number_ | `-1` |
|
||||
| selection-end | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | _number_ | `-1` |
|
||||
| auto-focus | 自动聚焦，拉起键盘 | _boolean_ | `false` |
|
||||
| disable-default-padding | 是否去掉 iOS 下的默认内边距，只对 textarea 有效 | _boolean_ | `true` |
|
||||
| cursor | 指定 focus 时的光标位置 | _number_ | `-1` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------------- | ------- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| label | 输入框左侧文本 | _string_ | - |
|
||||
| size | 单元格大小，可选值为 `large` | _string_ | - |
|
||||
| value | 当前输入的值 | _string \| number_ | - |
|
||||
| type | 可设置为任意原生类型, 如 `number` `idcard` `textarea` `digit` | _string_ | `text` |
|
||||
| fixed | 如果 type 为 `textarea` 且在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true | _boolean_ | `false` |
|
||||
| focus | 获取焦点 | _boolean_ | `false` |
|
||||
| border | 是否显示内边框 | _boolean_ | `true` |
|
||||
| disabled | 是否禁用输入框 | _boolean_ | `false` |
|
||||
| readonly | 是否只读 | _boolean_ | `false` |
|
||||
| clearable | 是否启用清除控件 | _boolean_ | `false` |
|
||||
| clickable | 是否开启点击反馈 | _boolean_ | `false` |
|
||||
| required | 是否显示表单必填星号 | _boolean_ | `false` |
|
||||
| center | 是否使内容垂直居中 | _boolean_ | `false` |
|
||||
| password | 是否是密码类型 | _boolean_ | `false` |
|
||||
| title-width | 标题宽度 | _string_ | `6.2em` |
|
||||
| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | _number_ | `-1` |
|
||||
| placeholder | 输入框为空时占位符 | _string_ | - |
|
||||
| placeholder-style | 指定 placeholder 的样式 | _string_ | - |
|
||||
| custom-style | 自定义样式 | _string_ | - |
|
||||
| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
|
||||
| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | - |
|
||||
| show-word-limit | 是否显示字数统计，需要设置`maxlength`属性 | _boolean_ | `false` |
|
||||
| error | 是否将输入内容标红 | _boolean_ | `false` |
|
||||
| error-message | 底部错误提示文案，为空时不展示 | _string_ | `''` |
|
||||
| error-message-align | 底部错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `''` |
|
||||
| input-align | 输入框内容对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
| autosize | 是否自适应内容高度，只对 textarea 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`px` | _boolean \| object_ | `false` |
|
||||
| left-icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - |
|
||||
| right-icon | 右侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - |
|
||||
| confirm-type | 设置键盘右下角按钮的文字，仅在 type='text' 时生效 | _string_ | `done` |
|
||||
| confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起，在 type='textarea' 时无效 | _boolean_ | `false` |
|
||||
| hold-keyboard | focus 时，点击页面的时候不收起键盘 | _boolean_ | `false` |
|
||||
| cursor-spacing | 输入框聚焦时底部与键盘的距离 | _number_ | `50` |
|
||||
| adjust-position | 键盘弹起时，是否自动上推页面 | _boolean_ | `true` |
|
||||
| show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效 | _boolean_ | `true` |
|
||||
| selection-start | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | _number_ | `-1` |
|
||||
| selection-end | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | _number_ | `-1` |
|
||||
| auto-focus | 自动聚焦，拉起键盘 | _boolean_ | `false` |
|
||||
| disable-default-padding | 是否去掉 iOS 下的默认内边距，只对 textarea 有效 | _boolean_ | `true` |
|
||||
| cursor | 指定 focus 时的光标位置 | _number_ | `-1` |
|
||||
| clear-trigger `v1.8.4` | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| bind:input | 输入内容时触发 | event.detail: 当前输入值 |
|
||||
| bind:change | 输入内容时触发 | event.detail: 当前输入值 |
|
||||
| bind:confirm | 点击完成按钮时触发 | event.detail: 当前输入值 |
|
||||
| bind:click-icon | 点击尾部图标时触发 | - |
|
||||
| bind:focus | 输入框聚焦时触发 | event.detail.value: 当前输入值; <br>event.detail.height: 键盘高度 |
|
||||
| bind:blur | 输入框失焦时触发 | event.detail.value: 当前输入值; <br>event.detail.cursor: 游标位置(如果 `type` 不为 `textarea`，值为 `0`) |
|
||||
| bind:clear | 点击清空控件时触发 | - |
|
||||
| bind:click-input | 点击输入区域时触发 | - |
|
||||
| bind:linechange | 输入框行数变化时调用，只对 textarea 有效 | event.detail = { height: 0, heightRpx: 0, lineCount: 0 } |
|
||||
| bind:keyboardheightchange | 键盘高度发生变化的时候触发此事件 | event.detail = { height: height, duration: duration } |
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
| ------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
||||
| bind:input | 输入内容时触发 | event.detail: 当前输入值 |
|
||||
| bind:change | 输入内容时触发 | event.detail: 当前输入值 |
|
||||
| bind:confirm | 点击完成按钮时触发 | event.detail: 当前输入值 |
|
||||
| bind:click-icon | 点击尾部图标时触发 | - |
|
||||
| bind:focus | 输入框聚焦时触发 | event.detail.value: 当前输入值; <br>event.detail.height: 键盘高度 |
|
||||
| bind:blur | 输入框失焦时触发 | event.detail.value: 当前输入值; <br>event.detail.cursor: 游标位置(如果 `type` 不为 `textarea`，值为 `0`) |
|
||||
| bind:clear | 点击清空控件时触发 | - |
|
||||
| bind:click-input | 点击输入区域时触发 | - |
|
||||
| bind:linechange | 输入框行数变化时调用，只对 textarea 有效 | event.detail = { height: 0, heightRpx: 0, lineCount: 0 } |
|
||||
| bind:keyboardheightchange | 键盘高度发生变化的时候触发此事件 | event.detail = { height: height, duration: duration } |
|
||||
|
||||
### Slot
|
||||
|
||||
|
||||
@ -37,6 +37,10 @@ VantComponent({
|
||||
type: Boolean,
|
||||
observer: 'setShowClear',
|
||||
},
|
||||
clearTrigger: {
|
||||
type: String,
|
||||
value: 'focus',
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
@ -144,12 +148,20 @@ VantComponent({
|
||||
},
|
||||
|
||||
setShowClear() {
|
||||
const { clearable, readonly } = this.data;
|
||||
const { clearable, readonly, clearTrigger } = this.data;
|
||||
const { focused, value } = this;
|
||||
|
||||
this.setData({
|
||||
showClear: !!clearable && !!focused && !!value && !readonly,
|
||||
});
|
||||
let showClear = false;
|
||||
|
||||
if (clearable && !readonly) {
|
||||
const hasValue = !!value;
|
||||
const trigger =
|
||||
clearTrigger === 'always' || (clearTrigger === 'focus' && focused);
|
||||
|
||||
showClear = hasValue && trigger;
|
||||
}
|
||||
|
||||
this.setData({ showClear });
|
||||
},
|
||||
|
||||
noop() {},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user