docs(picker): update code sample

example/app.json

@@ -76,8 +76,6 @@
     "t-button-group": "tdesign-miniprogram/button-group/button-group",
     "t-icon": "tdesign-miniprogram/icon/icon",
     "t-rate": "tdesign-miniprogram/rate/rate",
-    "t-picker": "tdesign-miniprogram/picker/picker",
-    "t-picker-item": "tdesign-miniprogram/picker/picker-item",
     "t-progress": "tdesign-miniprogram/progress/progress",
     "t-input": "tdesign-miniprogram/input/input",
     "t-textarea": "tdesign-miniprogram/textarea/textarea",

src/picker/README.md

@@ -20,44 +20,7 @@ isComponent: true
 
 ### 基础选择器
 
-<img src="https://tdesign.gtimg.com/miniprogram/readme/picker.png" width="375px" height="50%">
-
-```html
-<t-picker
-  visible="{{true}}"
-  title="请选择城市"
-  value="{{selectedCityValue}}"
-  bindchange="onPickerConfirm"
-  bindpick="onColumnChange"
-  bindcancel="onPickerCancel"
->
-  <t-picker-item options="{{citys}}"  />
-</t-picker>
-```
-
-```js
-Page({
-  data: {
-    selectedCityValue: [],
-    citys: [
-      { label: '广州市', value: '广州市' },
-      { label: '韶关市', value: '韶关市' },
-      { label: '深圳市', value: '深圳市' },
-      { label: '珠海市', value: '珠海市' },
-      { label: '汕头市', value: '汕头市' },
-    ],
-  },
-  onPickerConfirm(e) {
-    console.log('picker confirm:', e.detail);
-    this.setData({
-      selectedCityValue:  e.detail.value,
-    });
-  },
-  onColumnChange(e) {
-    console.log('picker pick:', e);
-  },
-});
-```
+{{ base }}
 
 ## API
 ### Picker Props

src/picker/_example/base/index.js

@@ -0,0 +1,80 @@
+const PICKER_KEY = {
+  CITY: 'city',
+  YEAR_SEASONS: 'yearSeasons',
+  DATE: 'date',
+};
+
+Component({
+  data: {
+    PICKER_KEY,
+
+    [`${PICKER_KEY.CITY}Visible`]: false,
+    [`${PICKER_KEY.YEAR_SEASONS}Visible`]: false,
+    [`${PICKER_KEY.DATE}Visible`]: false,
+
+    pickerTitle: '',
+    citys: [
+      { label: '北京', value: '北京' },
+      { label: '上海', value: '上海' },
+      { label: '广州', value: '广州' },
+      { label: '深圳', value: '深圳' },
+      { label: '成都', value: '成都' },
+    ],
+    years: [
+      { label: '2021年', value: '2021' },
+      { label: '2020年', value: '2020' },
+      { label: '2019年', value: '2019' },
+    ],
+    months: Array.from(new Array(12), (_, index) => ({
+      label: `${index + 1}月`,
+      value: index + 1,
+    })),
+    days: Array.from(new Array(31), (_, index) => ({ label: `${index + 1}日`, value: index + 1 })),
+    seasons: [
+      { label: '春', value: '春' },
+      { label: '夏', value: '夏' },
+      { label: '秋', value: '秋' },
+      { label: '冬', value: '冬' },
+    ],
+
+    [`${PICKER_KEY.CITY}Value`]: [],
+    [`${PICKER_KEY.YEAR_SEASONS}Value`]: [],
+    [`${PICKER_KEY.DATE}Value`]: [],
+  },
+
+  methods: {
+    joinArray(array) {
+      return array.join('-');
+    },
+
+    onClickPicker(e) {
+      const { key } = e?.currentTarget?.dataset;
+
+      this.setData({
+        [`${key}Visible`]: true,
+      });
+    },
+
+    onColumnChange(e) {
+      console.log('picker pick:', e);
+    },
+
+    onPickerChange(e) {
+      const { key } = e?.currentTarget?.dataset;
+      console.log('picker change:', e.detail);
+      this.setData({
+        [`${key}Visible`]: false,
+        [`${key}Value`]: e.detail.value,
+        [`${key}CurrentValue`]: this.joinArray(e.detail.value),
+      });
+    },
+    onPickerCancel(e) {
+      const { key } = e?.currentTarget?.dataset;
+      console.log(e, '取消');
+      console.log('picker1 cancel:');
+      this.setData({
+        [`${key}Visible`]: false,
+      });
+    },
+  },
+});

src/picker/_example/base/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-picker": "tdesign-miniprogram/picker/picker",
+    "t-picker-item": "tdesign-miniprogram/picker/picker-item"
+  }
+}

src/picker/_example/base/index.wxml

@@ -0,0 +1,67 @@
+<block>
+  <view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY}}">
+    <view class="pannel-label">城市</view>
+    <view class="pannel-text {{cityValue.length ? '' : 'empty'}}">{{cityCurrentValue || '选择城市'}}</view>
+    <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
+  </view>
+  <view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.YEAR_SEASONS}}">
+    <view class="pannel-label">年份和季节</view>
+    <view class="pannel-text {{yearSeasonsValue.length ? '' : 'empty'}}">
+      {{yearSeasonsCurrentValue || '选择年份和季节' }}</view
+    >
+    <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
+  </view>
+  <view class="pannel-item last" bind:tap="onClickPicker" data-key="{{PICKER_KEY.DATE}}">
+    <view class="pannel-label">日期</view>
+    <view class="pannel-text {{dateValue.length ? '' : 'empty'}}"> {{dateCurrentValue || '选择日期' }}</view>
+    <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
+  </view>
+</block>
+
+<!-- 城市不带标题 -->
+<t-picker
+  visible="{{cityVisible}}"
+  value="{{cityValue}}"
+  data-key="city"
+  title="{{pickerTitle}}"
+  cancelBtn="取消"
+  confirmBtn="确认"
+  bindchange="onPickerChange"
+  bindpick="onColumnChange"
+  bindcancel="onPickerCancel"
+>
+  <t-picker-item options="{{citys}}"></t-picker-item>
+</t-picker>
+
+<!-- 年+ 季节 不带标题 -->
+<t-picker
+  visible="{{yearSeasonsVisible}}"
+  value="{{yearSeasonsValue}}"
+  data-key="yearSeasons"
+  title="{{pickerTitle}}"
+  cancelBtn="取消"
+  confirmBtn="确认"
+  bindchange="onPickerChange"
+  bindpick="onColumnChange"
+  bindcancel="onPickerCancel"
+>
+  <t-picker-item options="{{years}}"></t-picker-item>
+  <t-picker-item options="{{seasons}}"></t-picker-item>
+</t-picker>
+
+<!-- 年月日 不带标题 -->
+<t-picker
+  visible="{{dateVisible}}"
+  value="{{dateValue}}"
+  data-key="date"
+  title="{{pickerTitle}}"
+  cancelBtn="取消"
+  confirmBtn="确认"
+  bindchange="onPickerChange"
+  bindpick="onColumnChange"
+  bindcancel="onPickerCancel"
+>
+  <t-picker-item options="{{years}}"></t-picker-item>
+  <t-picker-item options="{{months}}"></t-picker-item>
+  <t-picker-item options="{{days}}"></t-picker-item>
+</t-picker>

src/picker/_example/base/index.wxss

@@ -0,0 +1,26 @@
+.pannel-item {
+  display: flex;
+  align-items: center;
+  height: 96rpx;
+  padding: 0 32rpx;
+  font-size: 32rpx;
+  margin-bottom: 32rpx;
+  background-color: #fff;
+}
+
+.pannel-item .last {
+  margin-bottom: -13rpx;
+}
+.pannel-label {
+  width: 160rpx;
+  margin-right: 32rpx;
+}
+
+.pannel-text {
+  flex: 1;
+  color: #000;
+  opacity: 0.9;
+}
+.pannel-text.empty {
+  opacity: 0.26;
+}

src/picker/_example/picker.json

@@ -1,6 +1,9 @@
 {
   "navigationBarTitleText": "Picker 选择器",
   "usingComponents": {
-    "t-demo": "../../components/demo-block/index"
+    "t-demo": "../../components/demo-block/index",
+    "t-picker": "tdesign-miniprogram/picker/picker",
+    "t-picker-item": "tdesign-miniprogram/picker/picker-item",
+    "base": "./base"
   }
 }

src/picker/_example/picker.ts

@@ -1,7 +1,4 @@
 const PICKER_KEY = {
-  CITY: 'city',
-  YEAR_SEASONS: 'yearSeasons',
-  DATE: 'date',
   CITY_TITLE: 'cityTitle',
   YEAR_SEASONS_TITLE: 'yearSeasonsTitle',
   DATE_TITLE: 'dateTitle',
@@ -10,15 +7,10 @@ const PICKER_KEY = {
 Page({
   data: {
     PICKER_KEY,
-
-    [`${PICKER_KEY.CITY}Visible`]: false,
-    [`${PICKER_KEY.YEAR_SEASONS}Visible`]: false,
-    [`${PICKER_KEY.DATE}Visible`]: false,
     [`${PICKER_KEY.CITY_TITLE}Visible`]: false,
     [`${PICKER_KEY.YEAR_SEASONS_TITLE}Visible`]: false,
     [`${PICKER_KEY.DATE_TITLE}Visible`]: false,
 
-    pickerTitle: '',
     citys: [
       { label: '北京', value: '北京' },
       { label: '上海', value: '上海' },
@@ -42,33 +34,31 @@ Page({
       { label: '秋', value: '秋' },
       { label: '冬', value: '冬' },
     ],
-
-    [`${PICKER_KEY.CITY}Value`]: [],
-    [`${PICKER_KEY.YEAR_SEASONS}Value`]: [],
-    [`${PICKER_KEY.DATE}Value`]: [],
     [`${PICKER_KEY.CITY_TITLE}Value`]: [],
     [`${PICKER_KEY.YEAR_SEASONS_TITLE}Value`]: [],
     [`${PICKER_KEY.DATE_TITLE}Value`]: [],
   },
 
+  joinArray(array) {
+    return array.join('-');
+  },
+
   onClickPicker(e) {
     const { key } = e?.currentTarget?.dataset;
-
     this.setData({
       [`${key}Visible`]: true,
     });
   },
-
   onColumnChange(e) {
     console.log('picker pick:', e);
   },
-
   onPickerChange(e) {
     const { key } = e?.currentTarget?.dataset;
     console.log('picker change:', e.detail);
     this.setData({
       [`${key}Visible`]: false,
       [`${key}Value`]: e.detail.value,
+      [`${key}CurrentValue`]: this.joinArray(e.detail.value),
     });
   },
   onPickerCancel(e) {