fix(calendar demo): fix multi-selection demo

psaren · Aug 10, 2020 · 1d0c165 · 1d0c165
1 parent 0f33fd4
commit 1d0c165
Showing 2 changed files with 59 additions and 61 deletions.
diff --git a/packages/taro-ui-vue-demo/src/pages/advanced/calendar/index.vue b/packages/taro-ui-vue-demo/src/pages/advanced/calendar/index.vue
@@ -1,117 +1,111 @@
 <template>
-  <view class='page calendar-page'>
-    <DocsHeader title='Calendar 日历' />
+  <view class="page calendar-page">
+    <DocsHeader title="Calendar 日历" />
 
-    <view class='doc-body'>
-      <view class='panel'>
-        <view class='panel__title'>一般案例</view>
-        <view class='panel__content'>
+    <view class="doc-body">
+      <view class="panel">
+        <view class="panel__title">一般案例</view>
+        <view class="panel__content">
           <AtCalendar :onMonthChange="handleMonthChange" />
         </view>
       </view>
 
-      <view class='panel'>
-        <view class='panel__title'>跳转到指定日期</view>
-        <view class='panel__content'>
+      <view class="panel">
+        <view class="panel__title">跳转到指定日期</view>
+        <view class="panel__content">
           <AtCalendar :currentDate="state.now" />
-          <view class='body_controllers'>
+          <view class="body_controllers">
             <AtButton
-              size='small'
+              size="small"
               :onClick="handleClick.bind(this, 'now', '2018/01/01')"
-            >
-              跳转到 2018/01/01
-            </AtButton>
+            >跳转到 2018/01/01</AtButton>
             <AtButton
-              size='small'
+              size="small"
               :onClick="handleClick.bind(this, 'now', '2018/06/18')"
-            >
-              跳转到 2018/6/18
-            </AtButton>
+            >跳转到 2018/6/18</AtButton>
           </view>
         </view>
       </view>
 
-      <view class='panel'>
-        <view class='panel__title'>指定最小日期和最大日期</view>
-        <view class='panel__content'>
-          <AtCalendar :minDate="state.minDate" :maxDate="state.maxDate" />
-          <view class='body_controllers'>
+      <view class="panel">
+        <view class="panel__title">指定最小日期和最大日期</view>
+        <view class="panel__content">
+          <AtCalendar
+            :minDate="state.minDate"
+            :maxDate="state.maxDate"
+          />
+          <view class="body_controllers">
             <AtButton
-              size='small'
+              size="small"
               :onClick="handleClick.bind(this, 'minDate', '2018/01/01')"
-            >
-              设置最小值 2018/1/1
-            </AtButton>
+            >设置最小值 2018/1/1</AtButton>
             <AtButton
-              size='small'
+              size="small"
               :onClick="handleClick.bind(this, 'maxDate', '2019/12/31')"
-            >
-              设置最大值 2019/12/31
-            </AtButton>
+            >设置最大值 2019/12/31</AtButton>
           </view>
         </view>
       </view>
 
-      <view class='panel'>
-        <view class='panel__title'>标记时间</view>
-        <view class='panel__content'>
+      <view class="panel">
+        <view class="panel__title">标记时间</view>
+        <view class="panel__content">
           <AtCalendar :marks="state.mark" />
-          <view class='body_controllers'>
+          <view class="body_controllers">
             <AtButton
-              size='small'
-              class='button'
+              size="small"
+              class="button"
               :onClick="handleClick.bind(this, 'mark', [
                 {
                   value: Date.now()
                 }
               ])"
-            >
-              标记当前时间
-            </AtButton>
+            >标记当前时间</AtButton>
           </view>
         </view>
       </view>
 
-      <view class='panel'>
-        <view class='panel__title'>禁止滑动</view>
-        <view class='panel__content'>
+      <view class="panel">
+        <view class="panel__title">禁止滑动</view>
+        <view class="panel__content">
           <AtCalendar :isSwiper="false" />
         </view>
       </view>
 
-      <view class='panel'>
-        <view class='panel__title'>垂直滑动</view>
-        <view class='panel__content'>
-          <AtCalendar isVertical :onSelectDate="handleDateChange" />
+      <view class="panel">
+        <view class="panel__title">垂直滑动</view>
+        <view class="panel__content">
+          <AtCalendar
+            isVertical
+            :onSelectDate="handleDateChange"
+          />
         </view>
       </view>
 
-      <view class='panel'>
-        <view class='panel__title'>范围选择</view>
-        <view class='panel__content'>
-          <!-- <AtCalendar
+      <view class="panel">
+        <view class="panel__title">范围选择</view>
+        <view class="panel__content">
+          <AtCalendar
             :onSelectDate="handleDateChange"
             isMultiSelect
             :currentDate="state.multiCurentDate"
-          /> -->
-          <view class='body_controllers'>
+          />
+          <view class="body_controllers">
             <AtButton
-              size='small'
-              class='button'
+              size="small"
+              class="button"
               :onClick="handleClick.bind(this, 'multiCurentDate', {
                 start: '2018/10/28',
                 end: '2018/11/11'
               })"
-            >
-              设置选择区间为 2018/10/28 - 2018/11/11
-            </AtButton>
+            >设置选择区间为 2018/10/28 - 2018/11/11</AtButton>
           </view>
         </view>
       </view>
 
-      <view class='panel'>
-        <view class='panel__title'>有效时间组</view>
-        <view class='panel__content'>
+      <view class="panel">
+        <view class="panel__title">有效时间组</view>
+        <view class="panel__content">
           <AtCalendar :validDates="state.validDates" />
         </view>
       </view>

diff --git a/packages/taro-ui-vue-demo/src/pages/advanced/calendar/main.ts b/packages/taro-ui-vue-demo/src/pages/advanced/calendar/main.ts
@@ -62,6 +62,10 @@ export default Vue.extend({
       })
     },
     handleDateChange(arg: any): void {
+      if(arg.value.end) {
+        this.state.multiCurentDate = arg.value
+      }
+
       Taro.showToast({
         title: `handleDateChange: ${JSON.stringify(arg)}`,
         icon: 'none'