[Doc] english document of all action components (#260)
* [bugfix] CouponList always show empty info * [bugfix] add click feedback of buttons in components * [Doc] add custom theme document * [new feature] Notice bar support more props * [bugfix] PullRefresh test cases * [bugfix] unused NoticeBar style * [bugfix] Swipe width calc error * [Doc] english document of all action components
This commit is contained in:
@@ -1,4 +1,6 @@
|
||||
<script>
|
||||
import { Toast } from 'packages/index';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -10,18 +12,6 @@ export default {
|
||||
currentDate2: null,
|
||||
currentDate3: null
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker) {
|
||||
console.log(picker);
|
||||
},
|
||||
handlePickerCancel() {
|
||||
console.log('picker cancel');
|
||||
},
|
||||
handlePickerConfirm() {
|
||||
console.log('picker confirm');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -48,8 +38,7 @@ Vue.component(DatetimePicker.name, DatetimePicker);
|
||||
:max-hour="maxHour"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
@change="handlePickerChange">
|
||||
</van-datetime-picker>
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
@@ -62,20 +51,14 @@ export default {
|
||||
maxDate: new Date(2019, 10, 1),
|
||||
currentDate: new Date(2018, 0, 1)
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker) {
|
||||
console.log(picker);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 选择日期
|
||||
#### Date Picker
|
||||
|
||||
:::demo 选择日期
|
||||
:::demo Date Picker
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate2"
|
||||
@@ -83,14 +66,13 @@ export default {
|
||||
:min-hour="minHour"
|
||||
:max-hour="maxHour"
|
||||
:min-date="minDate"
|
||||
@change="handlePickerChange">
|
||||
</van-datetime-picker>
|
||||
/>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 选择时间
|
||||
#### Time Picker
|
||||
|
||||
:::demo 选择时间
|
||||
:::demo Time Picker
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate3"
|
||||
@@ -98,8 +80,7 @@ export default {
|
||||
:min-hour="minHour"
|
||||
:max-hour="maxHour"
|
||||
:min-date="minDate"
|
||||
@change="handlePickerChange">
|
||||
</van-datetime-picker>
|
||||
/>
|
||||
```
|
||||
:::
|
||||
|
||||
@@ -108,30 +89,17 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | - |
|
||||
| type | 组件类型 | String | 'datetime' | 'datetime', 'date', 'time' |
|
||||
| minDate | 可选的最小日期 | Date | 十年前的 1 月 1 日 | - |
|
||||
| maxDate | 可选的最大日期 | Date | 十年后的 12 月 31 日 | - |
|
||||
| minHour | 可选的最小小时 | Number | 0 | - |
|
||||
| maxHour | 可选的最大小时 | Number | 23 | - |
|
||||
| type | Picker type | `String` | 'datetime' | 'date', 'time' |
|
||||
| minDate | Min date | `Date` | Ten years ago on January 1 | - |
|
||||
| maxDate | Max date | `Date` | Ten years later on December 31 | - |
|
||||
| minHour | Min hour | `Number` | `0` | - |
|
||||
| maxHour | Max hour | `Number` | `23` | - |
|
||||
| visibileColumnCount | Count of columns to show | `Number` | `5` | - |
|
||||
|
||||
### Event
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当值变化时触发的事件 | picker 实例 |
|
||||
| confirm | 点击完成按钮时触发的事件 | 当前 value |
|
||||
| cancel | 点击取消按钮时触发的事件 | - |
|
||||
|
||||
### change事件
|
||||
|
||||
在`change`事件中,可以获取到`picker`实例,对`picker`进行相应的更新等操作:
|
||||
|
||||
| 函数 | Description |
|
||||
|-----------|-----------|
|
||||
| getColumnValue(index) | 获取对应列中选中的值 |
|
||||
| setColumnValue(index, value) | 设置对应列中选中的值 |
|
||||
| getColumnValues(index) | 获取对应列中所有的备选值 |
|
||||
| setColumnValues(index, values) | 设置对应列中所有的备选值 |
|
||||
| getValues() | 获取所有列中被选中的值,返回一个数组 |
|
||||
| setValues(values) | `values`为一个数组,设置所有列中被选中的值 |
|
||||
| change | Triggered when value changed | picker: picker instance |
|
||||
| confirm | Triggered when click confirm button | value: current value |
|
||||
| cancel | Triggered when click cancel button | - |
|
||||
|
||||
Reference in New Issue
Block a user