update timer-picker and picker demo and doc

document/components/docs/en-US/dialog.md

@@ -49,6 +49,20 @@
             text: 'cancel',
             active: false,
             href: 'javascript:;'
+          },
+          onConfirm: () => {
+            this.$createToast({
+              type: 'warn',
+              time: 1000,
+              txt: '点击确认按钮'
+            }).show()
+          },
+          onCancel: () => {
+            this.$createToast({
+              type: 'warn',
+              time: 1000,
+              txt: '点击取消按钮'
+            }).show()
           }
         }).show()
       }

document/components/docs/en-US/picker.md

@@ -10,12 +10,26 @@
 <cube-button @click="showPicker">Picker</cube-button>
 ```
 ```js
-const col1Data = [{ text: '剧毒', value: 1}, { text: '蚂蚁', value: 2 }, { text: '幽鬼', value: 2 }]
+const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }]
 export default {
   mounted () {
     this.picker = this.$createPicker({
       title: 'Picker selectors - single column',
-      data: [col1Data]
+      data: [col1Data],
+      onSelect: (selectedText, selectedIndex) => {
+        this.$createDialog({
+          type: 'warn',
+          content: `selected content：${selectedText.join(',')} <br/> selected index： ${selectedIndex.join(',')}`,
+          icon: 'cubeic-alert'
+        }).show()
+      },
+      onCancel: () => {
+        this.$createToast({
+          type: 'correct',
+          txt: 'Clicked cancel button',
+          time: 1000
+        }).show()
+      }
     })
   },
   methods: {
@@ -32,13 +46,15 @@ export default {
 <cube-button @click="showPicker">Picker - multiple Columns</cube-button>
 ```
 ```js
-const col1Data = [{ text: '剧毒', value: 1}, { text: '蚂蚁', value: 2 }, { text: '幽鬼', value: 3 }]
-const col2Data = [{ text: '梅肯', value: 's'}, { text: '秘法鞋', value: 'ss' }, { text: '假腿', value: 'sss' }, { text: '飞鞋', value: 'ssss' }, { text: '辉耀', value: 'sssss' }, { text: '金箍棒', value: 'ssssss' }]
+const col1Data = [{ 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: '金箍棒' }]
 export default {
   mounted () {
     this.picker = this.$createPicker({
       title: 'Picker selectors - multiple columns',
-      data: [col1Data, col2Data]
+      data: [col1Data, col2Data, col3Data]
     })
   },
   methods: {
@@ -80,8 +96,19 @@ export default {
           this.picker.setData(this.linkageData, this.tempIndex)
         }
       },
-      onSelect: (selectedVal) => {
-        console.log(selectedVal)
+      onSelect: (selectedText, selectedIndex) => {
+        this.$createDialog({
+          type: 'warn',
+          content: `selected content：${selectedText.join(',')} <br/> selected index： ${selectedIndex.join(',')}`,
+          icon: 'cubeic-alert'
+        }).show()
+      },
+      onCancel: () => {
+        this.$createToast({
+          type: 'correct',
+          txt: 'Clicked cancel button',
+          time: 1000
+        }).show()
       }
     })
   },
@@ -121,7 +148,21 @@ const col3Data = [{ text: '输出', value: '输出'}, { text: '控制', value: '
 export default {
   mounted () {
     this.picker = this.$createPicker({
-      title: 'Picker-setData'
+      title: 'Picker-setData',
+      onSelect: (selectedText, selectedIndex) => {
+        this.$createDialog({
+          type: 'warn',
+          content: `selected content：${selectedText.join(',')} <br/> selectedIndex： ${selectedIndex.join(',')}`,
+          icon: 'cubeic-alert'
+        }).show()
+      },
+      onCancel: () => {
+        this.$createToast({
+          type: 'correct',
+          txt: 'Clicked cancel button',
+          time: 1000
+        }).show()
+      }
     })
   },
   methods: {

document/components/docs/en-US/time-picker.md

@@ -17,7 +17,22 @@ export default {
       this.$createTimePicker({
         showNow: true,
         minuteStep: 5,
-        delay: 15
+        delay: 15,
+        onSelect: (selectedTime, selectedText) => {
+          this.$createDialog({
+            type: 'warn',
+            title: `selected timestamp ${selectedTime}`,
+            content: `selected content ${selectedText}`,
+            icon: 'cubeic-alert'
+          }).show()
+        },
+        onCancel: () => {
+          this.$createToast({
+            type: 'correct',
+            txt: 'Clicked cancel button',
+            time: 1000
+          }).show()
+        }
       }).show()
     }
   }
@@ -47,6 +62,21 @@ export default {
         },
         onSelect(selectedTime, selectedText) {
           console.log(selectedTime, selectedText)
+        },
+        onSelect: (selectedTime, selectedText) => {
+          this.$createDialog({
+            type: 'warn',
+            title: `selected timestamp ${selectedTime}`,
+            content: `selected content ${selectedText}`,
+            icon: 'cubeic-alert'
+          }).show()
+        },
+        onCancel: () => {
+          this.$createToast({
+            type: 'correct',
+            txt: 'Clicked cancel button',
+            time: 1000
+          }).show()
         }
       }).show()
     }
@@ -79,6 +109,21 @@ export default {
           len: 5,
           filter: ['Today', 'Tomorrow', 'The day after tomorrow'],
           format: 'M year d day'
+        },
+        onSelect: (selectedTime, selectedText) => {
+          this.$createDialog({
+            type: 'warn',
+            title: `selected timestamp: ${selectedTime}`,
+            content: `selected content ${selectedText}`,
+            icon: 'cubeic-alert'
+          }).show()
+        },
+        onCancel: () => {
+          this.$createToast({
+            type: 'correct',
+            txt: 'Clicked cancel button',
+            time: 1000
+          }).show()
         }
       })
 

document/components/docs/zh-CN/dialog.md

@@ -49,6 +49,20 @@
             text: '取消按钮',
             active: false,
             href: 'javascript:;'
+          },
+          onConfirm: () => {
+            this.$createToast({
+              type: 'warn',
+              time: 1000,
+              txt: '点击确认按钮'
+            }).show()
+          },
+          onCancel: () => {
+            this.$createToast({
+              type: 'warn',
+              time: 1000,
+              txt: '点击取消按钮'
+            }).show()
           }
         }).show()
       }

document/components/docs/zh-CN/picker.md

@@ -9,12 +9,26 @@
   <cube-button @click="showPicker">Picker</cube-button>
   ```
   ```js
-  const col1Data = [{ text: '剧毒', value: 1}, { text: '蚂蚁', value: 2 }, { text: '幽鬼', value: 2 }]
+  const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }]
   export default {
     mounted () {
       this.picker = this.$createPicker({
         title: 'Picker选择器-单列',
-        data: [col1Data]
+        data: [col1Data],
+        onSelect: (selectedText, selectedIndex) => {
+          this.$createDialog({
+            type: 'warn',
+            content: `选中的内容是：${selectedText.join(',')} <br/> 选中的索引是 ${selectedIndex.join(',')}`,
+            icon: 'cubeic-alert'
+          }).show()
+        },
+        onCancel: () => {
+          this.$createToast({
+            type: 'correct',
+            txt: 'Clicked cancel button',
+            time: 1000
+          }).show()
+        }
       })
     },
     methods: {
@@ -30,13 +44,29 @@
   <cube-button @click="showPicker">Picker - multiple Columns</cube-button>
   ```
   ```js
-  const col1Data = [{ text: '剧毒', value: 1}, { text: '蚂蚁', value: 2 }, { text: '幽鬼', value: 3 }]
-  const col2Data = [{ text: '梅肯', value: 's'}, { text: '秘法鞋', value: 'ss' }, { text: '假腿', value: 'sss' }, { text: '飞鞋', value: 'ssss' }, { text: '辉耀', value: 'sssss' }, { text: '金箍棒', value: 'ssssss' }]
+  const col1Data = [{ 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: '金箍棒' }]
   export default {
     mounted () {
       this.picker = this.$createPicker({
         title: 'Picker选择器-多列',
-        data: [col1Data, col2Data]
+        data: [col1Data, col2Data, col3Data],
+        onSelect: (selectedText, selectedIndex) => {
+          this.$createDialog({
+            type: 'warn',
+            content: `选中的内容是：${selectedText.join(',')} <br/> 选中的索引是 ${selectedIndex.join(',')}`,
+            icon: 'cubeic-alert'
+          }).show()
+        },
+        onCancel: () => {
+          this.$createToast({
+            type: 'correct',
+            txt: 'Clicked cancel button',
+            time: 1000
+          }).show()
+        }
       })
     },
     methods: {
@@ -76,8 +106,19 @@
             this.picker.setData(this.linkageData, this.tempIndex)
           }
         },
-        onSelect: (selectedVal) => {
-          console.log(selectedVal)
+        onSelect: (selectedText, selectedIndex) => {
+          this.$createDialog({
+            type: 'warn',
+            content: `选中的城市id是：${selectedText.join(',')} <br/> 选中的索引是 ${selectedIndex.join(',')}`,
+            icon: 'cubeic-alert'
+          }).show()
+        },
+        onCancel: () => {
+          this.$createToast({
+            type: 'correct',
+            txt: 'Clicked cancel button',
+            time: 1000
+          }).show()
         }
       })
     },
@@ -115,7 +156,21 @@
   export default {
     mounted () {
       this.picker = this.$createPicker({
-        title: 'Picker-setData'
+        title: 'Picker-setData',
+        onSelect: (selectedText, selectedIndex) => {
+          this.$createDialog({
+            type: 'warn',
+            content: `选中的内容是：${selectedText.join(',')} <br/> 选中的索引是 ${selectedIndex.join(',')}`,
+            icon: 'cubeic-alert'
+          }).show()
+        },
+        onCancel: () => {
+          this.$createToast({
+            type: 'correct',
+            txt: 'Clicked cancel button',
+            time: 1000
+          }).show()
+        }
       })
     },
     methods: {

document/components/docs/zh-CN/time-picker.md

@@ -16,7 +16,22 @@
         this.$createTimePicker({
           showNow: true,
           minuteStep: 5,
-          delay: 15
+          delay: 15,
+          onSelect: (selectedTime, selectedText) => {
+            this.$createDialog({
+              type: 'warn',
+              title: `选中的时间戳是 ${selectedTime}`,
+              content: `选中的内容是 ${selectedText}`,
+              icon: 'cubeic-alert'
+            }).show()
+          },
+          onCancel: () => {
+            this.$createToast({
+              type: 'correct',
+              txt: 'Clicked cancel button',
+              time: 1000
+            }).show()
+          }
         }).show()
       }
     }
@@ -42,8 +57,20 @@
             filter: ['今天', '明天'],
             format: 'M月d日'
           },
-          onSelect(selectedTime, selectedText) {
-            console.log(selectedTime, selectedText)
+          onSelect: (selectedTime, selectedText) => {
+            this.$createDialog({
+              type: 'warn',
+              title: `选中的时间戳是 ${selectedTime}`,
+              content: `选中的内容是 ${selectedText}`,
+              icon: 'cubeic-alert'
+            }).show()
+          },
+          onCancel: () => {
+            this.$createToast({
+              type: 'correct',
+              txt: 'Clicked cancel button',
+              time: 1000
+            }).show()
           }
         }).show()
       }
@@ -74,6 +101,21 @@
             len: 5,
             filter: ['今天', '明天', '后天'],
             format: 'M月d日'
+          },
+          onSelect: (selectedTime, selectedText) => {
+            this.$createDialog({
+              type: 'warn',
+              title: `选中的时间戳是 ${selectedTime}`,
+              content: `选中的内容是 ${selectedText}`,
+              icon: 'cubeic-alert'
+            }).show()
+          },
+          onCancel: () => {
+            this.$createToast({
+              type: 'correct',
+              txt: 'Clicked cancel button',
+              time: 1000
+            }).show()
           }
         })
 

example/pages/dialog.vue

@@ -41,6 +41,20 @@
             text: '取消按钮',
             active: false,
             href: 'javascript:;'
+          },
+          onConfirm: () => {
+            this.$createToast({
+              type: 'warn',
+              time: 1000,
+              txt: '点击确认按钮'
+            }).show()
+          },
+          onCancel: () => {
+            this.$createToast({
+              type: 'warn',
+              time: 1000,
+              txt: '点击取消按钮'
+            }).show()
           }
         })
         this.dialog.show()

example/pages/picker.vue

@@ -21,11 +21,39 @@
     mounted() {
       this.picker = this.$createPicker({
         title: 'Picker-单列',
-        data: [data1]
+        data: [data1],
+        onSelect: (selectedText, selectedIndex) => {
+          this.$createDialog({
+            type: 'warn',
+            content: `选中的内容是：${selectedText.join(',')} <br/> 选中的索引是 ${selectedIndex.join(',')}`,
+            icon: 'cubeic-alert'
+          }).show()
+        },
+        onCancel: () => {
+          this.$createToast({
+            type: 'correct',
+            txt: 'Clicked cancel button',
+            time: 1000
+          }).show()
+        }
       })
       this.mutiPicker = this.$createPicker({
         title: 'Picker-多列',
-        data: [data1, data2, data3]
+        data: [data1, data2, data3],
+        onSelect: (selectedText, selectedIndex) => {
+          this.$createDialog({
+            type: 'warn',
+            content: `选中的内容是：${selectedText.join(',')} <br/> 选中的索引是 ${selectedIndex.join(',')}`,
+            icon: 'cubeic-alert'
+          }).show()
+        },
+        onCancel: () => {
+          this.$createToast({
+            type: 'correct',
+            txt: 'Clicked cancel button',
+            time: 1000
+          }).show()
+        }
       })
       this.linkagePicker = this.$createPicker({
         title: 'Picker-数据联动',
@@ -41,12 +69,37 @@
             this.linkagePicker.setData(this.linkageData, this.tempIndex)
           }
         },
-        onSelect: (selectedVal) => {
-          console.log(selectedVal)
+        onSelect: (selectedText, selectedIndex) => {
+          this.$createDialog({
+            type: 'warn',
+            content: `选中的城市id是：${selectedText.join(',')} <br/> 选中的索引是 ${selectedIndex.join(',')}`,
+            icon: 'cubeic-alert'
+          }).show()
+        },
+        onCancel: () => {
+          this.$createToast({
+            type: 'correct',
+            txt: 'Clicked cancel button',
+            time: 1000
+          }).show()
         }
       })
       this.setDataPicker = this.$createPicker({
-        title: 'Picker-setData'
+        title: 'Picker-setData',
+        onSelect: (selectedText, selectedIndex) => {
+          this.$createDialog({
+            type: 'warn',
+            content: `选中的内容是：${selectedText.join(',')} <br/> 选中的索引是 ${selectedIndex.join(',')}`,
+            icon: 'cubeic-alert'
+          }).show()
+        },
+        onCancel: () => {
+          this.$createToast({
+            type: 'correct',
+            txt: 'Clicked cancel button',
+            time: 1000
+          }).show()
+        }
       })
     },
     data() {

example/pages/time-picker.vue

@@ -19,7 +19,22 @@
         this.timePicker = this.$createTimePicker({
           showNow: true,
           minuteStep: 5,
-          delay: 15
+          delay: 15,
+          onSelect: (selectedTime, selectedText) => {
+            this.$createDialog({
+              type: 'warn',
+              title: `选中的时间戳是 ${selectedTime}`,
+              content: `选中的内容是 ${selectedText}`,
+              icon: 'cubeic-alert'
+            }).show()
+          },
+          onCancel: () => {
+            this.$createToast({
+              type: 'correct',
+              txt: 'Clicked cancel button',
+              time: 1000
+            }).show()
+          }
         })
         this.timePicker.show()
       },
@@ -33,8 +48,20 @@
             filter: ['今天', '明天'],
             format: 'M月d日'
           },
-          onSelect(selectedTime, selectedText) {
-            console.log(selectedTime, selectedText)
+          onSelect: (selectedTime, selectedText) => {
+            this.$createDialog({
+              type: 'warn',
+              title: `选中的时间戳是 ${selectedTime}`,
+              content: `选中的内容是 ${selectedText}`,
+              icon: 'cubeic-alert'
+            }).show()
+          },
+          onCancel: () => {
+            this.$createToast({
+              type: 'correct',
+              txt: 'Clicked cancel button',
+              time: 1000
+            }).show()
           }
         })
         this.timePicker.show()
@@ -49,6 +76,21 @@
             len: 5,
             filter: ['今天', '明天', '后天'],
             format: 'M月d日'
+          },
+          onSelect: (selectedTime, selectedText) => {
+            this.$createDialog({
+              type: 'warn',
+              title: `选中的时间戳是 ${selectedTime}`,
+              content: `选中的内容是 ${selectedText}`,
+              icon: 'cubeic-alert'
+            }).show()
+          },
+          onCancel: () => {
+            this.$createToast({
+              type: 'correct',
+              txt: 'Clicked cancel button',
+              time: 1000
+            }).show()
           }
         })