mirror of
				https://gitee.com/vant-contrib/vant.git
				synced 2025-10-27 01:32:10 +08:00 
			
		
		
		
	[Improvement] Picker: add props to custom button text (#548)
This commit is contained in:
		
							parent
							
								
									5c39921742
								
							
						
					
					
						commit
						d8dc44a780
					
				| @ -71,7 +71,7 @@ export default { | |||||||
| 
 | 
 | ||||||
| ### Event | ### Event | ||||||
| 
 | 
 | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | save | Triggered when click save button | content:Form content | | | save | Triggered when click save button | content:Form content | | ||||||
| | delete | Triggered when click delete | content:Form content | | | delete | Triggered when click delete | content:Form content | | ||||||
|  | |||||||
| @ -63,7 +63,7 @@ export default { | |||||||
| 
 | 
 | ||||||
| ### Event | ### Event | ||||||
| 
 | 
 | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | add | Triggered when click add button | - | | | add | Triggered when click add button | - | | ||||||
| | edit | Triggered when click edit button | item: address object,index | | | edit | Triggered when click edit button | item: address object,index | | ||||||
|  | |||||||
| @ -147,7 +147,7 @@ export default { | |||||||
| 
 | 
 | ||||||
| ### ContactList Event | ### ContactList Event | ||||||
| 
 | 
 | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | add | Triggered when click add button | - | | | add | Triggered when click add button | - | | ||||||
| | edit | Triggered when click edit button | item: contact object,index | | | edit | Triggered when click edit button | item: contact object,index | | ||||||
| @ -163,7 +163,7 @@ export default { | |||||||
| 
 | 
 | ||||||
| ### ContactEdit Event | ### ContactEdit Event | ||||||
| 
 | 
 | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | save | Triggered when click save button | content:contact info | | | save | Triggered when click save button | content:contact info | | ||||||
| | delete | Triggered when click delete button | content:contact info | | | delete | Triggered when click delete button | content:contact info | | ||||||
|  | |||||||
| @ -91,7 +91,7 @@ export default { | |||||||
| 
 | 
 | ||||||
| ### CouponList Event | ### CouponList Event | ||||||
| 
 | 
 | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | change | Triggered when change chosen coupon | index: index of chosen coupon | | | change | Triggered when change chosen coupon | index: index of chosen coupon | | ||||||
| | exchange | Triggered when exchange coupon | code: exchange code | | | exchange | Triggered when exchange coupon | code: exchange code | | ||||||
|  | |||||||
| @ -64,7 +64,7 @@ export default { | |||||||
| 
 | 
 | ||||||
| ### Event | ### Event | ||||||
| 
 | 
 | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | click-left | Triggered when click left button | - | | | click-left | Triggered when click left button | - | | ||||||
| | click-right | Triggered when click right button | - | | | click-right | Triggered when click right button | - | | ||||||
| @ -53,6 +53,6 @@ Vue.use(NoticeBar); | |||||||
| 
 | 
 | ||||||
| ### Event | ### Event | ||||||
| 
 | 
 | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | click | Triggered when click notice bar | - | | | click | Triggered when click notice bar | - | | ||||||
|  | |||||||
| @ -75,7 +75,7 @@ export default { | |||||||
| 
 | 
 | ||||||
| ### Event | ### Event | ||||||
| 
 | 
 | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | input | Triggered when keydown | key: Content of the key | | | input | Triggered when keydown | key: Content of the key | | ||||||
| | delete | Triggered when press delete key | - | | | delete | Triggered when press delete key | - | | ||||||
|  | |||||||
| @ -64,6 +64,6 @@ export default { | |||||||
| 
 | 
 | ||||||
| ### Event | ### Event | ||||||
| 
 | 
 | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | change | Triggered on page change | - | | | change | Triggered on page change | - | | ||||||
|  | |||||||
| @ -61,6 +61,6 @@ export default { | |||||||
| 
 | 
 | ||||||
| ### Event | ### Event | ||||||
| 
 | 
 | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | focus | Triggered when input get focused | - | | | focus | Triggered when input get focused | - | | ||||||
|  | |||||||
| @ -121,10 +121,22 @@ export default { | |||||||
| | columns | Columns data | `Array` | `[]` | - | | | columns | Columns data | `Array` | `[]` | - | | ||||||
| | show-toolbar | Whether to show toolbar | `Boolean` | `false` | - | | | show-toolbar | Whether to show toolbar | `Boolean` | `false` | - | | ||||||
| | title | Toolbar title | `String` | `''` | - | | | title | Toolbar title | `String` | `''` | - | | ||||||
|  | | confirm-button-text | Text of confirm button | `String` | `Confirm` | - | | ||||||
|  | | cancel-button-text | Text of cancel button | `String` | `Cancel` | - | | ||||||
| | item-height | Option height | `Number` | `44` | - | | | item-height | Option height | `Number` | `44` | - | | ||||||
| | visibile-column-count | Count of visible columns | `Number` | `5` | - | | | visibile-column-count | Count of visible columns | `Number` | `5` | - | | ||||||
| | value-key | Key of option text | `String` | `text` | - | | | value-key | Key of option text | `String` | `text` | - | | ||||||
| 
 | 
 | ||||||
|  | ### Event | ||||||
|  | Picker events will pass different parameters according to the columns are single or multiple | ||||||
|  | 
 | ||||||
|  | | Event | Description | Arguments | | ||||||
|  | |-----------|-----------|-----------| | ||||||
|  | | confirm | Triggered when click confirm button | Single column:current value,current index<br>Multiple columns:current values,current indexes | | ||||||
|  | | cancel | Triggered when click cancel button | Single column:current value,current index<br>Multiple columns:current values,current indexes | | ||||||
|  | | change | Triggered when current option changed | Single column:current value,current index<br>Multiple columns:current values,column index | | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
| ### Data struct of columns | ### Data struct of columns | ||||||
| 
 | 
 | ||||||
| | key | Description | | | key | Description | | ||||||
|  | |||||||
| @ -67,7 +67,7 @@ Search support all native properties of input tag,such as `maxlength`、`place | |||||||
| ### Event | ### Event | ||||||
| Search support all native events of input tag,such as `focus`、`blur`、`keypress` | Search support all native events of input tag,such as `focus`、`blur`、`keypress` | ||||||
| 
 | 
 | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | cancel | Triggered when click cancel button | - | | | cancel | Triggered when click cancel button | - | | ||||||
| | search | Triggered when confirm search | - | | | search | Triggered when confirm search | - | | ||||||
|  | |||||||
| @ -75,7 +75,7 @@ Vue.use(Sku); | |||||||
| 
 | 
 | ||||||
| ### Event | ### Event | ||||||
| 
 | 
 | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | add-cart | Triggered when click cart button | data: Object | | | add-cart | Triggered when click cart button | data: Object | | ||||||
| | buy-clicked | Triggered when click buy button | data: Object | | | buy-clicked | Triggered when click buy button | data: Object | | ||||||
|  | |||||||
| @ -74,7 +74,7 @@ Use slot to add custom contents. | |||||||
| 
 | 
 | ||||||
| ### Event | ### Event | ||||||
| 
 | 
 | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | submit | Triggerd when click submit button | - | | | submit | Triggerd when click submit button | - | | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -57,6 +57,6 @@ export default { | |||||||
| 
 | 
 | ||||||
| ### Event | ### Event | ||||||
| 
 | 
 | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | change | Triggered when current swipe change | index: index of current swipe | | | change | Triggered when current swipe change | index: index of current swipe | | ||||||
|  | |||||||
| @ -59,6 +59,6 @@ use `loading` property to keep component in loading state | |||||||
| 
 | 
 | ||||||
| ### Event | ### Event | ||||||
| 
 | 
 | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | change | triggered when the on-off state is changed | checked: switch is on or not | | | change | triggered when the on-off state is changed | checked: switch is on or not | | ||||||
| @ -129,7 +129,7 @@ In sticky mode, the tab will be fixed to top when scroll to top | |||||||
| 
 | 
 | ||||||
| ### Tabs Event | ### Tabs Event | ||||||
| 
 | 
 | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | click | Triggered when click tab | index:index of current tab | | | click | Triggered when click tab | index:index of current tab | | ||||||
| | disabled | Triggered when click disabled tab | index:index of current tab | | | disabled | Triggered when click disabled tab | index:index of current tab | | ||||||
|  | |||||||
| @ -69,7 +69,7 @@ export default { | |||||||
| 
 | 
 | ||||||
| ### Tabbar Event | ### Tabbar Event | ||||||
| 
 | 
 | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | change | Triggered when change active tab | active: index of current tab | | | change | Triggered when change active tab | active: index of current tab | | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -54,7 +54,7 @@ export default { | |||||||
| | active-id | Id of selected item | `Number` | `0` | - | | | active-id | Id of selected item | `Number` | `0` | - | | ||||||
| 
 | 
 | ||||||
| #### Event | #### Event | ||||||
| | Event | Description | Attribute | | | Event | Description | Arguments | | ||||||
| |-----------|-----------|-----------| | |-----------|-----------|-----------| | ||||||
| | navclick | triggered when parent node is selected |  index: index of selected parent | | | navclick | triggered when parent node is selected |  index: index of selected parent | | ||||||
| | itemclick | triggered when item is selected | data: selected item | | | itemclick | triggered when item is selected | data: selected item | | ||||||
|  | |||||||
| @ -123,10 +123,22 @@ export default { | |||||||
| | columns | 对象数组,配置每一列显示的数据 | `Array` | `[]` | - | | | columns | 对象数组,配置每一列显示的数据 | `Array` | `[]` | - | | ||||||
| | show-toolbar | 是否显示顶部栏 | `Boolean` | `false` | - | | | show-toolbar | 是否显示顶部栏 | `Boolean` | `false` | - | | ||||||
| | title | 顶部栏标题 | `String` | `''` | - | | | title | 顶部栏标题 | `String` | `''` | - | | ||||||
|  | | confirm-button-text | 确认按钮文字 | `String` | `完成` | - | | ||||||
|  | | cancel-button-text | 取消按钮文字 | `String` | `取消` | - | | ||||||
| | item-height | 选项高度 | `Number` | `44` | - | | | item-height | 选项高度 | `Number` | `44` | - | | ||||||
| | visibile-column-count | 可见的选项个数 | `Number` | `5` | - | | | visibile-column-count | 可见的选项个数 | `Number` | `5` | - | | ||||||
| | value-key | 选项对象中,文字对应的 key | `String` | `text` | - | | | value-key | 选项对象中,文字对应的 key | `String` | `text` | - | | ||||||
| 
 | 
 | ||||||
|  | ### Event | ||||||
|  | Picker 组件的事件会根据 columns 是单列或多列返回不同的参数 | ||||||
|  | 
 | ||||||
|  | | 事件名 | 说明 | 参数 | | ||||||
|  | |-----------|-----------|-----------| | ||||||
|  | | confirm | 点击完成按钮时触发 | 单列:选中值,选中值对应的索引<br>多列:所有列选中值,所有列选中值对应的索引 | | ||||||
|  | | cancel | 点击取消按钮时触发 | 单列:选中值,选中值对应的索引<br>多列:所有列选中值,所有列选中值对应的索引 | | ||||||
|  | | change | 选项改变时触发 | 单列:选中值,选中值对应的索引<br>多列:所有列选中值,当前列对应的索引 | | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
| ### Columns 数据结构 | ### Columns 数据结构 | ||||||
| 当传入多列数据时,`columns`为一个对象数组,数组中的每一个对象配置每一列,每一列有以下`key` | 当传入多列数据时,`columns`为一个对象数组,数组中的每一个对象配置每一列,每一列有以下`key` | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -2,8 +2,8 @@ | |||||||
|   <div class="van-picker"> |   <div class="van-picker"> | ||||||
|     <div class="van-picker__toolbar van-hairline--top-bottom" v-if="showToolbar"> |     <div class="van-picker__toolbar van-hairline--top-bottom" v-if="showToolbar"> | ||||||
|       <slot> |       <slot> | ||||||
|         <div class="van-picker__cancel" @click="emit('cancel')">{{ $t('cancel') }}</div> |         <div class="van-picker__cancel" @click="emit('cancel')">{{ cancelButtonText || $t('cancel') }}</div> | ||||||
|         <div class="van-picker__confirm" @click="emit('confirm')">{{ $t('confirm') }}</div> |         <div class="van-picker__confirm" @click="emit('confirm')">{{ confirmButtonText || $t('confirm') }}</div> | ||||||
|         <div class="van-picker__title" v-if="title" v-text="title" /> |         <div class="van-picker__title" v-if="title" v-text="title" /> | ||||||
|       </slot> |       </slot> | ||||||
|     </div> |     </div> | ||||||
| @ -38,6 +38,10 @@ export default create({ | |||||||
| 
 | 
 | ||||||
|   props: { |   props: { | ||||||
|     title: String, |     title: String, | ||||||
|  |     showToolbar: Boolean, | ||||||
|  |     confirmButtonText: String, | ||||||
|  |     cancelButtonText: String, | ||||||
|  |     visibileColumnCount: Number, | ||||||
|     valueKey: { |     valueKey: { | ||||||
|       type: String, |       type: String, | ||||||
|       default: 'text' |       default: 'text' | ||||||
| @ -46,8 +50,6 @@ export default create({ | |||||||
|       type: Number, |       type: Number, | ||||||
|       default: 44 |       default: 44 | ||||||
|     }, |     }, | ||||||
|     showToolbar: Boolean, |  | ||||||
|     visibileColumnCount: Number, |  | ||||||
|     columns: { |     columns: { | ||||||
|       type: Array, |       type: Array, | ||||||
|       default: () => [] |       default: () => [] | ||||||
|  | |||||||
| @ -68,6 +68,7 @@ export default create({ | |||||||
|       const currentValue = +this.currentValue; |       const currentValue = +this.currentValue; | ||||||
|       return min === currentValue || (currentValue - step) < min || this.disabled; |       return min === currentValue || (currentValue - step) < min || this.disabled; | ||||||
|     }, |     }, | ||||||
|  | 
 | ||||||
|     isPlusDisabled() { |     isPlusDisabled() { | ||||||
|       const max = +this.max; |       const max = +this.max; | ||||||
|       const step = +this.step; |       const step = +this.step; | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user