[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:
neverland
2017-10-26 08:38:13 -05:00
committed by GitHub
parent 0cae221d5c
commit a7d8379514
10 changed files with 191 additions and 299 deletions
+18 -50
View File
@@ -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 | - |