1 | import { ComponentType } from 'react'
|
2 | import { StandardProps, CommonEventFunction } from './common'
|
3 |
|
4 | interface PickerViewProps extends StandardProps {
|
5 |
|
6 | /** 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。
|
7 | * @supported weapp, swan, alipay, tt, rn
|
8 | */
|
9 | value?: number[]
|
10 |
|
11 | /** 设置选择器中间选中框的样式
|
12 | * @supported weapp, swan, alipay, tt, rn
|
13 | */
|
14 | indicatorStyle?: string
|
15 |
|
16 | /** 设置选择器中间选中框的类名
|
17 | * @supported weapp, swan, alipay
|
18 | */
|
19 | indicatorClass?: string
|
20 |
|
21 | /** 设置蒙层的样式
|
22 | * @supported weapp, swan, alipay, tt
|
23 | */
|
24 | maskStyle?: string
|
25 |
|
26 | /** 设置蒙层的类名
|
27 | * @supported weapp, swan, alipay
|
28 | */
|
29 | maskClass?: string
|
30 |
|
31 | /** 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。
|
32 | * @supported weapp
|
33 | * @default false
|
34 | */
|
35 | immediateChange?: boolean
|
36 |
|
37 | /** 当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始)
|
38 | * @supported weapp, swan, alipay, tt, rn
|
39 | */
|
40 | onChange?: CommonEventFunction<PickerViewProps.onChangeEventDetail>
|
41 |
|
42 | /** 当滚动选择开始时候触发事件
|
43 | * @supported weapp
|
44 | */
|
45 | onPickStart?: CommonEventFunction
|
46 |
|
47 | /** 当滚动选择结束时候触发事件
|
48 | * @supported weapp
|
49 | */
|
50 | onPickEnd?: CommonEventFunction
|
51 | }
|
52 |
|
53 | declare namespace PickerViewProps {
|
54 | interface onChangeEventDetail {
|
55 | value: number[]
|
56 | }
|
57 | }
|
58 |
|
59 | /** 嵌入页面的滚动选择器
|
60 | * 其中只可放置 picker-view-column 组件,其它节点不会显示
|
61 | * @classification forms
|
62 | * @supported weapp, swan, alipay, tt, h5, rn
|
63 | * @example_react
|
64 | * ```tsx
|
65 | * export default class Picks extends Component {
|
66 | *
|
67 | * constructor () {
|
68 | * super(...arguments)
|
69 | * const date = new Date()
|
70 | * const years = []
|
71 | * const months = []
|
72 | * const days = []
|
73 | * for (let i = 1990; i <= date.getFullYear(); i++) {
|
74 | * years.push(i)
|
75 | * }
|
76 | * for (let i = 1; i <= 12; i++) {
|
77 | * months.push(i)
|
78 | * }
|
79 | * for (let i = 1; i <= 31; i++) {
|
80 | * days.push(i)
|
81 | * }
|
82 | * this.state = {
|
83 | * years: years,
|
84 | * year: date.getFullYear(),
|
85 | * months: months,
|
86 | * month: 2,
|
87 | * days: days,
|
88 | * day: 2,
|
89 | * value: [9999, 1, 1]
|
90 | * }
|
91 | * }
|
92 | *
|
93 | * onChange = e => {
|
94 | * const val = e.detail.value
|
95 | * this.setState({
|
96 | * year: this.state.years[val[0]],
|
97 | * month: this.state.months[val[1]],
|
98 | * day: this.state.days[val[2]],
|
99 | * value: val
|
100 | * })
|
101 | * }
|
102 | *
|
103 | * render() {
|
104 | * return (
|
105 | * <View>
|
106 | * <View>{this.state.year}年{this.state.month}月{this.state.day}日</View>
|
107 | * <PickerView indicatorStyle='height: 50px;' style='width: 100%; height: 300px;' value={this.state.value} onChange={this.onChange}>
|
108 | * <PickerViewColumn>
|
109 | * {this.state.years.map(item => {
|
110 | * return (
|
111 | * <View>{item}年</View>
|
112 | * );
|
113 | * })}
|
114 | * </PickerViewColumn>
|
115 | * <PickerViewColumn>
|
116 | * {this.state.months.map(item => {
|
117 | * return (
|
118 | * <View>{item}月</View>
|
119 | * )
|
120 | * })}
|
121 | * </PickerViewColumn>
|
122 | * <PickerViewColumn>
|
123 | * {this.state.days.map(item => {
|
124 | * return (
|
125 | * <View>{item}日</View>
|
126 | * )
|
127 | * })}
|
128 | * </PickerViewColumn>
|
129 | * </PickerView>
|
130 | * </View>
|
131 | * )
|
132 | * }
|
133 | * }
|
134 | * ```
|
135 | * @example_vue
|
136 | * ```html
|
137 | * <template>
|
138 | * <view class="taro-example">
|
139 | * <view>{{year}}年{{month}}月{{day}}日</view>
|
140 | * <picker-view indicator-style="height: 30px;" style="width: 100%; height: 300px;" :value="value" `@change="onChange">
|
141 | * <picker-view-column>
|
142 | * <view v-for="(item, index) in years" :key="index">{{item}}年</view>
|
143 | * </picker-view-column>
|
144 | * <picker-view-column>
|
145 | * <view v-for="(item, index) in months" :key="index">{{item}}月</view>
|
146 | * </picker-view-column>
|
147 | * <picker-view-column>
|
148 | * <view v-for="(item, index) in days" :key="index">{{item}}日</view>
|
149 | * </picker-view-column>
|
150 | * </picker-view>
|
151 | * </view>
|
152 | * </template>
|
153 | *
|
154 | * <script>
|
155 | * export default {
|
156 | * name: "Index",
|
157 | * data() {
|
158 | * const date = new Date()
|
159 | * const years = []
|
160 | * const months = []
|
161 | * const days = []
|
162 | * for (let i = 1990; i <= date.getFullYear(); i++) {
|
163 | * years.push(i)
|
164 | * }
|
165 | * for (let i = 1; i <= 12; i++) {
|
166 | * months.push(i)
|
167 | * }
|
168 | * for (let i = 1; i <= 31; i++) {
|
169 | * days.push(i)
|
170 | * }
|
171 | * return {
|
172 | * years: years,
|
173 | * year: date.getFullYear(),
|
174 | * months: months,
|
175 | * month: 2,
|
176 | * days: days,
|
177 | * day: 2,
|
178 | * value: [3, 1, 1]
|
179 | * }
|
180 | * },
|
181 | *
|
182 | * methods: {
|
183 | * onChange: function(e) {
|
184 | * const val = e.detail.value
|
185 | * console.log(val)
|
186 | * this.year = this.years[val[0]]
|
187 | * this.month = this.months[val[1]]
|
188 | * this.day = this.days[val[2]]
|
189 | * }
|
190 | * }
|
191 | * }
|
192 | * </script>
|
193 | * ```
|
194 | * @see https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html
|
195 | */
|
196 | declare const PickerView: ComponentType<PickerViewProps>
|
197 |
|
198 | export { PickerView, PickerViewProps }
|