Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(picker): picker组件支持传入“确定”、“取消”按钮的文案（H5） #1383

Closed
wants to merge 1 commit into from
Closed

feat(picker): picker组件支持传入“确定”、“取消”按钮的文案（H5） #1383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions docs/components/forms/picker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ sidebar_label: Picker
| √ | √ | √ | onChange | EventHandle || value 改变时触发 change 事件，event.detail = value: value |
| √ | √ | √ | onCancel | EventHandle| | 取消选择或点遮罩层收起 picker 时触发 |
| √ | √ | √ | disabled | Boolean | false | 是否禁用 |
| | √ | | changeText | String | 确定 | 确定按钮文案 |
| | √ | | cancelText | String | 取消 | 取消按钮文案 |

##### 多列选择器：mode = multiSelector

Expand All @@ -29,6 +31,8 @@ sidebar_label: Picker
| √ | √ | √ | onColumnchange | EventHandle | | 某一列的值改变时触发 columnchange 事件，event.detail = column: column, value: value，column 的值表示改变了第几列（下标从 0 开始），value 的值表示变更值的下标 |
| √ | √ | √ | onCancel | EventHandle | | 取消选择时触发 |
| √ | √ | √ | disabled | Boolean | false | 是否禁用 |
| | √ | | changeText | String | 确定 | 确定按钮文案 |
| | √ | | cancelText | String | 取消 | 取消按钮文案 |

##### 时间选择器：mode = time

Expand All @@ -42,6 +46,8 @@ sidebar_label: Picker
| √ | √ | √ | onChange | EventHandle | | value 改变时触发 change 事件，event.detail = value: value |
| √ | √ | √ | onCancel | EventHandle | | 取消选择或点遮罩层收起 picker 时触发 |
| √ | √ | x (IOS 支持) | disabled | Boolean | false | 是否禁用 |
| | √ | | changeText | String | 确定 | 确定按钮文案 |
| | √ | | cancelText | String | 取消 | 取消按钮文案 |

##### 日期选择器：mode = date

Expand All @@ -56,6 +62,8 @@ sidebar_label: Picker
| √ | √ | √ | onChange | EventHandle | | value 改变时触发 change 事件，event.detail = value: value |
| √ | √ | √ | onCancel | EventHandle | | 取消选择或点遮罩层收起 picker 时触发 |
| √ | √ | √ | disabled | Boolean | false | 是否禁用 |
| | √ | | changeText | String | 确定 | 确定按钮文案 |
| | √ | | cancelText | String | 取消 | 取消按钮文案 |

> fields 有效值：

Expand Down
8 changes: 5 additions & 3 deletions packages/taro-components/src/components/picker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
* @property {EventHandle} onChange value 改变时触发 change 事件，event.detail = {value: value}
* @property {Boolean} disabled 是否禁用
* @property {EventHandle} onCancel 取消选择或点遮罩层收起 picker 时触发
* @property {String} changeText 确定按钮的文案
* @property {String} cancelText 取消按钮的文案
*/
import Nerv from 'nervjs'
import PickerGroup from './picker-group'
Expand Down Expand Up @@ -582,7 +584,7 @@ export default class Picker extends Nerv.Component {
pickerGroup = getSelector()
}

const { name = '' } = this.props
const { name = '', changeText = '确定', cancelText = '取消' } = this.props

return (
<div className={this.props.className}>
Expand All @@ -591,10 +593,10 @@ export default class Picker extends Nerv.Component {
<div style={shouldDivHidden} className={clsSlider}>
<div className='weui-picker__hd'>
<div className='weui-picker__action' onClick={onCancel}>
取消
{cancelText}
</div>
<div className='weui-picker__action' onClick={onChange}>
确定
{changeText}
</div>
</div>
<div className='weui-picker__bd'>{pickerGroup}</div>
Expand Down
8 changes: 8 additions & 0 deletions packages/taro-components/types/Picker.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@ interface PickerStandardProps extends StandardProps, FormItemProps {
* 取消选择或点遮罩层收起 picker 时触发
*/
onCancel?: BaseEventFunction
/**
* 确定按钮文案
*/
changeText?: string
/**
* 取消按钮文案
*/
cancelText?: string
}

interface PickerSelectorProps extends PickerStandardProps {
Expand Down