Skip to content

C
cube-ui

DiDi / cube-ui
10 个月 前同步成功

通知 34
Star 9078
Fork 1508
C
cube-ui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 d5bf695c 编写于 作者: A AmyFoxFN
浏览文件
操作

update cascade-picker, picker docs

上级 47e7b5c1
隐藏空白更改
内联 并排
Showing with 8 addition and 236 deletion
document/components/docs/en-US/cascade-picker.md
浏览文件 @ d5bf695c
......@@ -6,7 +6,7 @@
- Basic usage
Comparing to `Picker`, the required structure of props data is different for `CascadePicker`. The data structure of `Picker` is a two-dimensional array, and each column corresponds to an array. As in `CascadePicker`, there is a tree, that each item of first column has a `children` property which contains the counterpart data of following columns. Here is an example.
Comparing to `Picker`, the required structure of props data is different for `CascadePicker`. The data structure of `Picker` is a two-dimensional array, and each column corresponds to an array. As in `CascadePicker`, there is a tree, that each item of first column has a `children` property which contains the corresponding data of following columns. Here is an example.
```html
<cube-button @click="showCascadePicker">Cascade Picker</cube-button>
......@@ -67,7 +67,7 @@
}
}
```
When first column is on `Fruit`, the options of second column are `Apple` and `Orange`. And so on, when second column is on `Orange`, the options of third column are `Three` and `Four`.
When the first column goes to `Fruit`, the data of second column are `Apple` and `Orange`. And when the second column goes to on `Orange`, the data of third column are `Three` and `Four`.
- Province-city-area Picker
......@@ -110,7 +110,7 @@
- Date Picker
It's same to date picker. Just construct the cascading data. Besides, we have written a [DatePicker component in example](https://github.com/didi/cube-ui/blob/dev/example/components/date-picker.vue), which could help you constructing the cascading data with start date and end date.
As same as province-city-area picker, you just need to construct the cascading data. Besides, we have written a [DatePicker component in example](https://github.com/didi/cube-ui/blob/dev/example/components/date-picker.vue), which could help you constructing the cascading data with start date and end date.
```html
<cube-button @click="showDatePicker">Date Picker</cube-button>
......@@ -175,7 +175,7 @@
}
}
```
One more thing, although `setData` is available when visible. But considering user experience, it is demand to maintain the number of column unchanging when the picker is visible.
One more thing, although `setData` is available when visible. But considering user experience, you can't change the number of column when the picker is visible.
### Props configuration
......@@ -183,7 +183,7 @@
| - | - | - | - | - |
| title | title | String | '' | - |
| data | the cascading data used to init option items | Array | [] | - |
| selectIndex | the index of the selected item, corresponding content will be displayed when picker shows | Array | [] | [1] |
| selectedIndex | the index of the selected item, corresponding content will be displayed when picker shows | Array | [] | [1] |
* `data` sub configuration
......
document/components/docs/en-US/picker.md
浏览文件 @ d5bf695c
......@@ -88,76 +88,6 @@
`data` receives an array, whose length determines the columns of `picker`.
- Linkage Picker
```html
<cube-button @click="showPicker">Linkage Picker</cube-button>
```
```js
import { provinceList, cityList, areaList } from '../data/area'
export default {
data () {
return {
tempIndex: [0, 0, 0]
}
},
mounted () {
this.picker = this.$createPicker({
title: 'Linkage Picker',
data: this.linkageData,
onChange: (i, newIndex) => {
if (newIndex !== this.tempIndex[i]) {
for (let j = 2; j > i; j--) {
this.tempIndex.splice(j, 1, 0)
this.linkagePicker.scrollTo(j, 0)
}
this.tempIndex.splice(i, 1, newIndex)
this.linkagePicker.setData(this.linkageData, this.tempIndex)
}
},
onSelect: (selectedVal, selectedIndex, selectedText) => {
this.$createDialog({
type: 'warn',
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/>
- index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
icon: 'cubeic-alert'
}).show()
},
onCancel: () => {
this.$createToast({
type: 'correct',
txt: 'Picker canceled',
time: 1000
}).show()
}
})
},
watch: {
linkageData() {
this.picker.refresh()
}
},
computed: {
linkageData() {
const provinces = provinceList
const cities = cityList[provinces[this.tempIndex[0]].value]
const areas = areaList[cities[this.tempIndex[1]].value]
return [provinces, cities, areas]
}
},
methods: {
showPicker () {
this.picker.show()
}
}
}
```
By monitoring the `change` event triggered by each roller and invoke `setData` method to dynamicly set values of associated rollers to accomplish linkage selectors.
- Instance method `setData`
```html
......@@ -202,50 +132,6 @@
```
Instance method `setData` accepts two parameters, both of whom are arrays. The first is data that the roller displays and the second is indexs of selected values.
- Extended component: Date Picker
Besides use directly, we could extend many common pickers based on the raw Picker, such as Date Picker and Time Picker. As for Extended pickers, the method of API calling is also recommended. Take Date Picker as an example, We wrote a post-packaging Date Picker component ([source code](https://github.com/didi/cube-ui/blob/dev/example/components/date-picker.vue)) at first. And after `createAPI` for this component, it could be used as following.
```html
<cube-button @click="showDatePicker">Date Picker</cube-button>
```
```js
import Vue from 'vue'
import createAPI from '@/modules/create-api'
import DatePicker from 'example/components/date-picker.vue'
createAPI(Vue, DatePicker, ['select', 'cancel'], false)
export default {
mounted () {
this.datePicker = this.$createDatePicker({
min: [2008, 8, 8],
max: [2020, 10, 20],
onSelect: (selectedVal, selectedIndex, selectedText) => {
this.$createDialog({
type: 'warn',
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/>
- index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
icon: 'cubeic-alert'
}).show()
},
onCancel: () => {
this.$createToast({
type: 'correct',
txt: 'Picker canceled',
time: 1000
}).show()
}
})
},
methods: {
showDatePicker () {
this.datePicker.show()
}
}
}
```
### Props configuration
......@@ -255,7 +141,7 @@
| data | data that passed into picker, whose length determines the columns of picker | Array | [] | - |
| cancelTxt | the text of the left button in picker | String | '取消' | - |
| confirmTxt | the text of the right button in picker | String | '确定' | - |
| selectIndex | the index of the selected value, corresponding content will be displayed when picker shows | Array | [] | [1] |
| selectedIndex | the index of the selected value, corresponding content will be displayed when picker shows | Array | [] | [1] |
* `data` sub configuration
......
document/components/docs/zh-CN/cascade-picker.md
浏览文件 @ d5bf695c
......@@ -183,7 +183,7 @@
| - | - | - | - | - |
| title | 标题 | String | '' | - |
| data | 级联选择器的树形数据，用于初始化选项 | Array | [] | - |
| selectIndex | 被选中的索引值，拉起选择器后显示这个索引值对应的内容 | Array | [] | [1] |
| selectedIndex | 被选中的索引值，拉起选择器后显示这个索引值对应的内容 | Array | [] | [1] |
* `data`子配置项
......
document/components/docs/zh-CN/picker.md
浏览文件 @ d5bf695c
......@@ -88,76 +88,6 @@
`data`字段接收一个数组，其长度决定了`picker`的列数。
- 联动选择器
```html
<cube-button @click="showPicker">Linkage Picker</cube-button>
```
```js
import { provinceList, cityList, areaList } from '../data/area'
export default {
data () {
return {
tempIndex: [0, 0, 0]
}
},
mounted () {
this.picker = this.$createPicker({
title: 'Linkage Picker',
data: this.linkageData,
onChange: (i, newIndex) => {
if (newIndex !== this.tempIndex[i]) {
for (let j = 2; j > i; j--) {
this.tempIndex.splice(j, 1, 0)
this.linkagePicker.scrollTo(j, 0)
}
this.tempIndex.splice(i, 1, newIndex)
this.linkagePicker.setData(this.linkageData, this.tempIndex)
}
},
onSelect: (selectedVal, selectedIndex, selectedText) => {
this.$createDialog({
type: 'warn',
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/>
- index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
icon: 'cubeic-alert'
}).show()
},
onCancel: () => {
this.$createToast({
type: 'correct',
txt: 'Picker canceled',
time: 1000
}).show()
}
})
},
watch: {
linkageData() {
this.picker.refresh()
}
},
computed: {
linkageData() {
const provinces = provinceList
const cities = cityList[provinces[this.tempIndex[0]].value]
const areas = areaList[cities[this.tempIndex[1]].value]
return [provinces, cities, areas]
}
},
methods: {
showPicker () {
this.picker.show()
}
}
}
```
通过监听每个滚轴触发的`change`事件，然后调用`setData`方法去动态设置相关联的滚轴的值来完成联动选择的功能。
- 实例方法 `setData`
```html
......@@ -203,50 +133,6 @@
实例方法`setData`可接受2个参数，都为数组类型。第一个参数为滚轴需要显示的数据，第二个参数为选中值的索引。
- 扩展组件：日期选择器
除了直接调用，我们还可以基于扩展 Picker 组件扩展出很多常用的选择器，如日期选择器、时间选择器。对于扩展的选择器组件，我们依然推荐以 API 的形式调用，以日期选择器为例，首先基于 Picker 组件二次封装一个 DatePicker 组件（[源码](https://github.com/didi/cube-ui/blob/dev/example/components/date-picker.vue)），然后对该组件`createAPI`后，便可如下使用。
```html
<cube-button @click="showDatePicker">Date Picker</cube-button>
```
```js
import Vue from 'vue'
import createAPI from '@/modules/create-api'
import DatePicker from 'example/components/date-picker.vue'
createAPI(Vue, DatePicker, ['select', 'cancel'], false)
export default {
mounted () {
this.datePicker = this.$createDatePicker({
min: [2008, 8, 8],
max: [2020, 10, 20],
onSelect: (selectedVal, selectedIndex, selectedText) => {
this.$createDialog({
type: 'warn',
content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/>
- index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
icon: 'cubeic-alert'
}).show()
},
onCancel: () => {
this.$createToast({
type: 'correct',
txt: 'Picker canceled',
time: 1000
}).show()
}
})
},
methods: {
showDatePicker () {
this.datePicker.show()
}
}
}
```
### Props 配置
| 参数 | 说明 | 类型 | 默认值 | 示例 |
......@@ -255,7 +141,7 @@
| data | 传入picker数据，数组的长度决定了picker的列数 | Array | [] | - |
| cancelTxt | picker左侧按钮文案 | String | '取消' | - |
| confirmTxt | picker右侧按钮文案 | String | '确定' | - |
| selectIndex | 被选中的索引值，拉起picker后显示这个索引值对应的内容 | Array | [] | [1] |
| selectedIndex | 被选中的索引值，拉起picker后显示这个索引值对应的内容 | Array | [] | [1] |
* `data`子配置项
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或