From 7b7fc4416bd1ac5498d2ba622d66a7d7aacdb1fa Mon Sep 17 00:00:00 2001 From: AmyFoxFN Date: Wed, 29 Aug 2018 22:59:00 +0800 Subject: [PATCH] docs: picker --- document/common/stylus/md.styl | 2 +- document/components/docs/en-US/picker.md | 258 ++++++++++------------ document/components/docs/zh-CN/picker.md | 262 ++++++++++------------- example/data/picker.js | 12 +- example/pages/picker.vue | 108 +++++----- test/unit/specs/segment-picker.spec.js | 8 +- 6 files changed, 301 insertions(+), 349 deletions(-) diff --git a/document/common/stylus/md.styl b/document/common/stylus/md.styl index 5d6ac60a1..a31d5e7bb 100644 --- a/document/common/stylus/md.styl +++ b/document/common/stylus/md.styl @@ -107,7 +107,7 @@ .hljs-attr color: #fc9153 pre - margin: .8em 0 + margin: 1em 0 font-size: 12px code font-family: monaco diff --git a/document/components/docs/en-US/picker.md b/document/components/docs/en-US/picker.md index 5279e1486..41070eb58 100644 --- a/document/components/docs/en-US/picker.md +++ b/document/components/docs/en-US/picker.md @@ -1,205 +1,179 @@ ## Picker -`Picker` component supports multi-column selectors and linkage data. +`Picker` could use to implementing single or multi-column picker. -__Notice:__ Cause this component used create-api, so you should read [create-api](#/en-US/docs/create-api) first. +__Notice:__ Cause this component used create-api, so you should have basically knowledge of [create-api](#/en-US/docs/create-api) first. ### Example -- Basic usage + As for Picker, the most important thing is how to define the options. The property `data` is used to define options. It's a two-dimensional array, the first dimensional means which columns the picker has, while the second dimensional represent the options of each column. + +#### 1\) Single-column Picker + + firstly, there is an example of Single-column Picker: ```html Picker ``` ```js - const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, + const column1 = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }] + export default { - mounted () { - this.picker = this.$createPicker({ - title: 'Picker', - data: [col1Data], - onSelect: (selectedVal, selectedIndex, selectedText) => { - this.$createDialog({ - type: 'warn', - content: `Selected Item:
- value: ${selectedVal.join(', ')}
- - index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`, - icon: 'cubeic-alert' - }).show() - }, - onCancel: () => { - this.$createToast({ - type: 'correct', - txt: 'Picker canceled', - time: 1000 - }).show() - } - }) - }, methods: { - showPicker () { + showPicker() { + if (!this.picker) { + this.picker = this.$createPicker({ + title: 'Picker', + data: [column1], + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + } this.picker.show() + }, + selectHandle(selectedVal, selectedIndex, selectedText) { + this.$createDialog({ + type: 'warn', + content: `Selected Item:
- value: ${selectedVal.join(', ')}
- index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`, + icon: 'cubeic-alert' + }).show() + }, + cancelHandle() { + this.$createToast({ + type: 'correct', + txt: 'Picker canceled', + time: 1000 + }).show() } } } ``` -- Multi-column Picker +#### 2\) Multi-column Picker - `data` receives an array, whose length determines the columns of `picker`. + You can genarate Multi-column Picker by input the data of several columns. For example, here is a three-colunms picker: ```html Multi-column Picker ``` ```js - const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, + const column1 = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }] - const col2Data = [{ text: '输出', value: '输出' }, { text: '控制', value: '控制' }, - { text: '核心', value: '核心'}, { text: '爆发', value: '爆发' }, { text: '辅助', value: '辅助' }, - { text: '打野', value: '打野' }, { text: '逃生', value: '逃生' }, { text: '先手', value: '先手' }] - const col3Data = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' }, - { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }, { text: '辉耀', value: '辉耀' }, - { text: '金箍棒', value: '金箍棒' }] + const column2 = [{ text: '输出', value: '输出' }, { text: '控制', value: '控制' }, + { text: '核心', value: '核心'}, { text: '爆发', value: '爆发' }] + const column3 = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' }, + { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }] + export default { - mounted () { - this.mutiPicker = this.$createPicker({ - title: 'Multi-column Picker', - data: [col1Data, col2Data, col3Data], - onSelect: (selectedVal, selectedIndex, selectedText) => { - this.$createDialog({ - type: 'warn', - content: `Selected Item:
- value: ${selectedVal.join(', ')}
- - index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`, - icon: 'cubeic-alert' - }).show() - }, - onCancel: () => { - this.$createToast({ - type: 'correct', - txt: 'Picker canceled', - time: 1000 - }).show() - } - }) - }, methods: { showMutiPicker() { + if (!this.mutiPicker) { + this.mutiPicker = this.$createPicker({ + title: 'Multi-column Picker', + data: [column1, column2, column3], + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + } this.mutiPicker.show() + }, + selectHandle(selectedVal, selectedIndex, selectedText) { + this.$createDialog({ + type: 'warn', + content: `Selected Item:
- value: ${selectedVal.join(', ')}
- index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`, + icon: 'cubeic-alert' + }).show() + }, + cancelHandle() { + this.$createToast({ + type: 'correct', + txt: 'Picker canceled', + time: 1000 + }).show() } } } ``` -- Alias +#### 3\) Alias for the sub properties of option - You can configure the `alias` of `value` and `text`, such as, use `id` to represent `value`, `name` to represent `text`. + Sometimes, you may want to use alias to config the value and text of options, instead of `value` and `text`. Think about this, when the name origin data is `id` and `name`, you could use `id` 和 `name` to define value and text directly by using property `alias` to config the alias of `value` as `id`, `text` as `name`. ```html Use Alias ``` ```js export default { - mounted () { - this.aliasPicker = this.$createPicker({ - title: 'Use Alias', - data: [[{ id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 3, name: 'C' }]], - alias: { - value: 'id', - text: 'name' - }, - onSelect: (selectedVal, selectedIndex, selectedText) => { - this.$createDialog({ - type: 'warn', - content: `Selected Item:
- value: ${selectedVal.join(', ')}
- - index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`, - icon: 'cubeic-alert' - }).show() - }, - onCancel: () => { - this.$createToast({ - type: 'correct', - txt: 'Picker canceled', - time: 1000 - }).show() - } - }) - }, methods: { showAliasPicker() { + if (!this.aliasPicker) { + this.aliasPicker = this.$createPicker({ + title: 'Use Alias', + data: [[{ id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 3, name: 'C' }]], + alias: { + value: 'id', + text: 'name' + }, + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + } this.aliasPicker.show() + }, + selectHandle(selectedVal, selectedIndex, selectedText) { + this.$createDialog({ + type: 'warn', + content: `Selected Item:
- value: ${selectedVal.join(', ')}
- index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`, + icon: 'cubeic-alert' + }).show() + }, + cancelHandle() { + this.$createToast({ + type: 'correct', + txt: 'Picker canceled', + time: 1000 + }).show() } } } ``` -- Instance method `setData` +#### 4\) Method `$updateProps` - 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. + When you need to change some properties of Picker, you could use the method `$updateProps` to input the new properties. ```html - Use SetData + Use $updateProps ``` ```js - const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, + const column1 = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }] - const col2Data = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' }, - { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }, { text: '辉耀', value: '辉耀' }, - { text: '金箍棒', value: '金箍棒' }] - const col3Data = [{ text: '输出', value: '输出'}, { text: '控制', value: '控制' }, - { text: '核心', value: '核心' }, { text: '爆发', value: '爆发'}, { text: '辅助', value: '辅助' }] - export default { - mounted () { - this.setDataPicker = this.$createPicker({ - title: 'Use SetData', - onSelect: (selectedVal, selectedIndex, selectedText) => { - this.$createDialog({ - type: 'warn', - content: `Selected Item:
- value: ${selectedVal.join(', ')}
- - index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`, - icon: 'cubeic-alert' - }).show() - }, - onCancel: () => { - this.$createToast({ - type: 'correct', - txt: 'Picker canceled', - time: 1000 - }).show() - } - }) - }, - methods: { - showSetDataPicker () { - this.setDataPicker.setData([col1Data, col2Data, col3Data], [1, 2, 3]) - this.setDataPicker.show() - } - } - } - ``` - -- Subtitle + const column2 = [{ text: '输出', value: '输出' }, { text: '控制', value: '控制' }, + { text: '核心', value: '核心'}, { text: '爆发', value: '爆发' }] + const column3 = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' }, + { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }] - You could configure subtitle by the property `subtitle`. - - ```html - Use subtitle - ``` - ```js - const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, - { text: '幽鬼', value: '幽鬼' }] export default { - mounted () { - this.subtitlePicker = this.$createPicker({ - title: 'Picker', - subtitle: 'subtitle', - data: [col1Data], - onSelect: this.selectHandle, - onCancel: this.cancelHandle - }) - }, methods: { - showSubtitlePicker () { - this.subtitlePicker.show() + showUpdatePropsPicker() { + if (!this.updatePropsPicker) { + this.updatePropsPicker = this.$createPicker({ + title: 'Use $updateProps', + data: [column1], + selectedIndex: [0], + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + } + this.updatePropsPicker.show() + setTimeout(() => { + this.updatePropsPicker.$updateProps({ + title: 'Updated', + data: [column1, column2, column3], + selectedIndex: [1, 2, 3] + }) + }, 1000) }, selectHandle(selectedVal, selectedIndex, selectedText) { this.$createDialog({ diff --git a/document/components/docs/zh-CN/picker.md b/document/components/docs/zh-CN/picker.md index 51c649cf5..1620a2fa8 100644 --- a/document/components/docs/zh-CN/picker.md +++ b/document/components/docs/zh-CN/picker.md @@ -1,205 +1,179 @@ -## Picker组件 +## Picker 选择器 -`Picker`组件支持多列选择器及数据联动。 +`Picker` 组件也就是选择器,可以用于实现单列或多列选项的选择。 -__注:__ 由于此组件基于 create-api 实现,所以在使用之前,请确保自己了解过 [create-api](#/zh-CN/docs/create-api)。 +__注:__ 由于此组件基于 create-api 实现,所以在使用之前,请确保你基本了解过 [create-api](#/zh-CN/docs/create-api) 的用法。 ### 示例 -- 基本用法 + 对于选择器,最基本的是需要定义它可以选择的选项,定义选项的属性是 `data` ,它是一个二维数组,第一维度代表了有多少列,第二维度则代表了每列有哪些选项。 + +#### 1)单列选择器 + + 首先,是一个单列选择器的例子: ```html Picker ``` ```js - const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, + const column1 = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }] + export default { - mounted () { - this.picker = this.$createPicker({ - title: 'Picker', - data: [col1Data], - onSelect: (selectedVal, selectedIndex, selectedText) => { - this.$createDialog({ - type: 'warn', - content: `Selected Item:
- value: ${selectedVal.join(', ')}
- - index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`, - icon: 'cubeic-alert' - }).show() - }, - onCancel: () => { - this.$createToast({ - type: 'correct', - txt: 'Picker canceled', - time: 1000 - }).show() - } - }) - }, methods: { - showPicker () { + showPicker() { + if (!this.picker) { + this.picker = this.$createPicker({ + title: 'Picker', + data: [column1], + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + } this.picker.show() + }, + selectHandle(selectedVal, selectedIndex, selectedText) { + this.$createDialog({ + type: 'warn', + content: `Selected Item:
- value: ${selectedVal.join(', ')}
- index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`, + icon: 'cubeic-alert' + }).show() + }, + cancelHandle() { + this.$createToast({ + type: 'correct', + txt: 'Picker canceled', + time: 1000 + }).show() } } } ``` -- 多列选择器 +#### 2)多列选择器 - `data`字段接收一个数组,其长度决定了`picker`的列数。 + 如果传入了多列数据,则会生成相应的多列选择器。比如以下是一个三列的选择器: ```html Multi-column Picker ``` ```js - const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, + const column1 = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }] - const col2Data = [{ text: '输出', value: '输出' }, { text: '控制', value: '控制' }, - { text: '核心', value: '核心'}, { text: '爆发', value: '爆发' }, { text: '辅助', value: '辅助' }, - { text: '打野', value: '打野' }, { text: '逃生', value: '逃生' }, { text: '先手', value: '先手' }] - const col3Data = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' }, - { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }, { text: '辉耀', value: '辉耀' }, - { text: '金箍棒', value: '金箍棒' }] + const column2 = [{ text: '输出', value: '输出' }, { text: '控制', value: '控制' }, + { text: '核心', value: '核心'}, { text: '爆发', value: '爆发' }] + const column3 = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' }, + { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }] + export default { - mounted () { - this.mutiPicker = this.$createPicker({ - title: 'Multi-column Picker', - data: [col1Data, col2Data, col3Data], - onSelect: (selectedVal, selectedIndex, selectedText) => { - this.$createDialog({ - type: 'warn', - content: `Selected Item:
- value: ${selectedVal.join(', ')}
- - index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`, - icon: 'cubeic-alert' - }).show() - }, - onCancel: () => { - this.$createToast({ - type: 'correct', - txt: 'Picker canceled', - time: 1000 - }).show() - } - }) - }, methods: { showMutiPicker() { + if (!this.mutiPicker) { + this.mutiPicker = this.$createPicker({ + title: 'Multi-column Picker', + data: [column1, column2, column3], + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + } this.mutiPicker.show() + }, + selectHandle(selectedVal, selectedIndex, selectedText) { + this.$createDialog({ + type: 'warn', + content: `Selected Item:
- value: ${selectedVal.join(', ')}
- index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`, + icon: 'cubeic-alert' + }).show() + }, + cancelHandle() { + this.$createToast({ + type: 'correct', + txt: 'Picker canceled', + time: 1000 + }).show() } } } ``` -- 配置别名 +#### 3)选项的子属性别名 - 可通过`alias`属性配置`value`和`text`的别名。如,用`id`代表`value`,用`name`代表`text`。 + 有时你可能不希望以 `value` 和 `text` 去定义选项的值和文案,而用别的命名,比如当你的数据来源的命名为 `id` 和 `name` 时,你可能希望直接用 `id` 和 `name` 来定义值和文案。这个时候,你可以使用 `alias` 属性去配置。比如,配置 `value` 的别名为 `id`,`text` 的别名为 `name`。 ```html Use Alias ``` ```js export default { - mounted () { - this.aliasPicker = this.$createPicker({ - title: 'Use Alias', - data: [[{ id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 3, name: 'C' }]], - alias: { - value: 'id', - text: 'name' - }, - onSelect: (selectedVal, selectedIndex, selectedText) => { - this.$createDialog({ - type: 'warn', - content: `Selected Item:
- value: ${selectedVal.join(', ')}
- - index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`, - icon: 'cubeic-alert' - }).show() - }, - onCancel: () => { - this.$createToast({ - type: 'correct', - txt: 'Picker canceled', - time: 1000 - }).show() - } - }) - }, methods: { showAliasPicker() { - this.aliasPicker.show() - } - } - } - ``` - -- 实例方法 `setData` - - ```html - Use SetData - ``` - ```js - const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, - { text: '幽鬼', value: '幽鬼' }] - const col2Data = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' }, - { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }, { text: '辉耀', value: '辉耀' }, - { text: '金箍棒', value: '金箍棒' }] - const col3Data = [{ text: '输出', value: '输出'}, { text: '控制', value: '控制' }, - { text: '核心', value: '核心' }, { text: '爆发', value: '爆发'}, { text: '辅助', value: '辅助' }] - export default { - mounted () { - this.setDataPicker = this.$createPicker({ - title: 'Use SetData', - onSelect: (selectedVal, selectedIndex, selectedText) => { - this.$createDialog({ - type: 'warn', - content: `Selected Item:
- value: ${selectedVal.join(', ')}
- - index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`, - icon: 'cubeic-alert' - }).show() - }, - onCancel: () => { - this.$createToast({ - type: 'correct', - txt: 'Picker canceled', - time: 1000 - }).show() + if (!this.aliasPicker) { + this.aliasPicker = this.$createPicker({ + title: 'Use Alias', + data: [[{ id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 3, name: 'C' }]], + alias: { + value: 'id', + text: 'name' + }, + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) } - }) - }, - methods: { - showSetDataPicker () { - this.setDataPicker.setData([col1Data, col2Data, col3Data], [1, 2, 3]) - this.setDataPicker.show() + this.aliasPicker.show() + }, + selectHandle(selectedVal, selectedIndex, selectedText) { + this.$createDialog({ + type: 'warn', + content: `Selected Item:
- value: ${selectedVal.join(', ')}
- index: ${selectedIndex.join(', ')}
- text: ${selectedText.join(' ')}`, + icon: 'cubeic-alert' + }).show() + }, + cancelHandle() { + this.$createToast({ + type: 'correct', + txt: 'Picker canceled', + time: 1000 + }).show() } } } ``` - 实例方法`setData`可接受2个参数,都为数组类型。第一个参数为滚轴需要显示的数据,第二个参数为选中值的索引。 - -- 副标题 +#### 4)实例方法 `$updateProps` - 通过 `subtitle` 属性,设置副标题。 + 当你需要修改 Picker 某些配置项时,你可以使用实例方法 `$updateProps`,传入你需要更新的属性。 ```html - Use subtitle + Use $updateProps ``` ```js - const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, + const column1 = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }] + const column2 = [{ text: '输出', value: '输出' }, { text: '控制', value: '控制' }, + { text: '核心', value: '核心'}, { text: '爆发', value: '爆发' }] + const column3 = [{ text: '梅肯', value: '梅肯'}, { text: '秘法鞋', value: '秘法鞋' }, + { text: '假腿', value: '假腿' }, { text: '飞鞋', value: '飞鞋' }] + export default { - mounted () { - this.subtitlePicker = this.$createPicker({ - title: 'Picker', - subtitle: 'subtitle', - data: [col1Data], - onSelect: this.selectHandle, - onCancel: this.cancelHandle - }) - }, methods: { - showSubtitlePicker () { - this.subtitlePicker.show() + showUpdatePropsPicker() { + if (!this.updatePropsPicker) { + this.updatePropsPicker = this.$createPicker({ + title: 'Use $updateProps', + data: [column1], + selectedIndex: [0], + onSelect: this.selectHandle, + onCancel: this.cancelHandle + }) + } + this.updatePropsPicker.show() + setTimeout(() => { + this.updatePropsPicker.$updateProps({ + title: 'Updated', + data: [column1, column2, column3], + selectedIndex: [1, 2, 3] + }) + }, 1000) }, selectHandle(selectedVal, selectedIndex, selectedText) { this.$createDialog({ diff --git a/example/data/picker.js b/example/data/picker.js index 3e8454f06..7efd8c13c 100644 --- a/example/data/picker.js +++ b/example/data/picker.js @@ -1,4 +1,4 @@ -const data1 = [ +const column1 = [ { text: '剧毒', value: '剧毒' @@ -59,7 +59,7 @@ const data1 = [ } ] -const data2 = [ +const column2 = [ { text: '输出', value: '输出' @@ -92,7 +92,7 @@ const data2 = [ } ] -const data3 = [ +const column3 = [ { text: '梅肯', value: '梅肯' @@ -134,8 +134,8 @@ const expressData = [ ] export { - data1, - data2, - data3, + column1, + column2, + column3, expressData } diff --git a/example/pages/picker.vue b/example/pages/picker.vue index ba5f885aa..456320944 100644 --- a/example/pages/picker.vue +++ b/example/pages/picker.vue @@ -5,7 +5,6 @@ Picker Multi-column Picker Use alias - Use setData Use $updateProps Use subtitle @@ -16,82 +15,87 @@