浏览代码

fix: calader 适配

guoxiaoxiao8 4 年之前
父节点
当前提交
20d186c9b1
共有 2 个文件被更改,包括 74 次插入3 次删除
  1. 1 1
      src/sites/mobile-taro/vue/src/app.config.ts
  2. 73 2
      src/sites/mobile-taro/vue/src/pages/calendar/demo.vue

+ 1 - 1
src/sites/mobile-taro/vue/src/app.config.ts

@@ -1,9 +1,9 @@
 export default {
   pages: [
+    'pages/calendar/demo',
     'pages/input/demo',
     'pages/popup/demo',
     'pages/inputnumber/demo',
-    'pages/calendar/demo',
     'pages/textarea/demo',
     'pages/button/demo'
   ],

+ 73 - 2
src/sites/mobile-taro/vue/src/pages/calendar/demo.vue

@@ -1,6 +1,76 @@
 <template>
   <div class="demo">
     <h2>基础用法</h2>
+    <div>
+      <nut-cell
+        :show-icon="true"
+        title="选择单个日期"
+        :desc="date ? `${date} ${dateWeek}` : '请选择'"
+        @click="openSwitch('isVisible')"
+      >
+      </nut-cell>
+      <nut-calendar
+        v-model:visible="isVisible"
+        :default-value="date"
+        @close="closeSwitch('isVisible')"
+        @choose="setChooseValue"
+        :start-date="`2019-10-11`"
+        :end-date="`2022-11-11`"
+      >
+      </nut-calendar>
+    </div>
+
+    <div>
+      <nut-cell
+        :show-icon="true"
+        title="选择日期区间"
+        :desc="date1 ? `${date1[0]}至${date1[1]}` : '请选择'"
+        @click="openSwitch('isVisible1')"
+      >
+      </nut-cell>
+      <nut-calendar
+        v-model:visible="isVisible1"
+        :default-value="date1"
+        type="range"
+        :start-date="`2019-12-22`"
+        :end-date="`2021-01-08`"
+        @close="closeSwitch('isVisible1')"
+        @choose="setChooseValue1"
+      >
+      </nut-calendar>
+    </div>
+
+    <h2>自定义日历-自动回填</h2>
+    <div>
+      <nut-cell
+        :show-icon="true"
+        title="选择日期"
+        :desc="date3 ? date3 : '请选择'"
+        @click="openSwitch('isVisible3')"
+      >
+      </nut-cell>
+      <nut-calendar
+        v-model:visible="isVisible3"
+        @close="closeSwitch('isVisible3')"
+        @choose="setChooseValue3"
+        :default-value="date3"
+        :start-date="null"
+        :end-date="null"
+        :is-auto-back-fill="true"
+      >
+      </nut-calendar>
+    </div>
+
+    <h2>平铺展示</h2>
+    <div class="test-calendar-wrapper">
+      <nut-calendar
+        :poppable="false"
+        :default-value="date2"
+        :is-auto-back-fill="true"
+        @choose="setChooseValue2"
+      >
+      </nut-calendar>
+    </div>
   </div>
 </template>
 
@@ -41,11 +111,12 @@ export default createDemo({
       date3: ''
     });
     const openSwitch = (param: string) => {
-      state[`${param}`] = true;
+      // state[`${param}`] = true;
+      state.isVisible1 = true;
     };
 
     const closeSwitch = (param: string) => {
-      state[`${param}`] = false;
+      //state[`${param}`] = false;
     };
 
     const setChooseValue = (param: string) => {