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