docs(date-picker): [date-picker] Optimization Cases (#1690)

examples/sites/demos/pc/app/date-picker/align-composition-api.vue

@@ -1,16 +1,21 @@
 <template>
   <div>
     <p>左对齐：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" align="left"></tiny-date-picker>
     </div>
+    <br />
 
     <p>居中对齐：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" align="center"></tiny-date-picker>
     </div>
+    <br />
 
     <p>右对齐：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" align="right"></tiny-date-picker>
     </div>

examples/sites/demos/pc/app/date-picker/align.vue

@@ -1,16 +1,21 @@
 <template>
   <div>
     <p>左对齐：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" align="left"></tiny-date-picker>
     </div>
+    <br />
 
     <p>居中对齐：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" align="center"></tiny-date-picker>
     </div>
+    <br />
 
     <p>右对齐：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" align="right"></tiny-date-picker>
     </div>

examples/sites/demos/pc/app/date-picker/clear-composition-api.vue

@@ -1,16 +1,19 @@
 <template>
   <div>
     <p>默认显示清除按钮：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value"></tiny-date-picker>
     </div>
-
+    <br />
     <p>隐藏清除按钮：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :clearable="false"></tiny-date-picker>
     </div>
-
+    <br />
     <p>自定义清除图标：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :clear-icon="IconClose"></tiny-date-picker>
     </div>

examples/sites/demos/pc/app/date-picker/clear.vue

@@ -1,16 +1,21 @@
 <template>
   <div>
     <p>默认显示清除按钮：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value"></tiny-date-picker>
     </div>
+    <br />
 
     <p>隐藏清除按钮：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :clearable="false"></tiny-date-picker>
     </div>
+    <br />
 
     <p>自定义清除图标：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :clear-icon="IconClose"></tiny-date-picker>
     </div>

examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue

@@ -1,22 +1,29 @@
 <template>
   <div>
     <p>默认隐藏周次序号：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value"></tiny-date-picker>
     </div>
-  
+    <br />
+
     <p>显示周次序号：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" show-week-number></tiny-date-picker>
     </div>
-  
+    <br />
+
     <p>自定义周次序号的格式：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" show-week-number :format-weeks="formatWeeks"></tiny-date-picker>
     </div>
+    <br />
     <p>weekFirstDays: {{ eachWeekFirstDay }}</p>
-  
+    <br />
     <p>自定义每周第一天是星期几：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :picker-options="pickerOptions"></tiny-date-picker>
     </div>

examples/sites/demos/pc/app/date-picker/custom-weeks.vue

@@ -1,22 +1,29 @@
 <template>
   <div>
     <p>默认隐藏周次序号：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value"></tiny-date-picker>
     </div>
-  
+    <br />
+
     <p>显示周次序号：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" show-week-number></tiny-date-picker>
     </div>
-  
+    <br />
+
     <p>自定义周次序号的格式：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" show-week-number :format-weeks="formatWeeks"></tiny-date-picker>
     </div>
+    <br />
     <p>weekFirstDays: {{ eachWeekFirstDay }}</p>
-  
+    <br />
     <p>自定义每周第一天是星期几：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :picker-options="pickerOptions"></tiny-date-picker>
     </div>

examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue

@@ -4,6 +4,7 @@
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :default-value="defaultDate"></tiny-date-picker>
     </div>
+    <br />
     <p>日期时间(范围)，选择日期之后默认显示的时间(范围)：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="dateTimeValue" type="datetime" :default-time="defaultTime"></tiny-date-picker>

examples/sites/demos/pc/app/date-picker/default-value.vue

@@ -4,6 +4,7 @@
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :default-value="defaultDate"></tiny-date-picker>
     </div>
+    <br />
     <p>日期时间(范围)，选择日期之后默认显示的时间(范围)：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="dateTimeValue" type="datetime" :default-time="defaultTime"></tiny-date-picker>

examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue

@@ -4,7 +4,7 @@
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="disabledValue" disabled placeholder="请选择日期"></tiny-date-picker>
     </div>
-
+    <br />
     <p>部分禁用：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :picker-options="pickerOptions" placeholder="请选择日期"></tiny-date-picker>
@@ -18,12 +18,12 @@
         end-placeholder="结束日期"
       ></tiny-date-picker>
     </div>
-
+    <br />
     <p>只读模式：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="readonlyValue" readonly placeholder="请选择日期"></tiny-date-picker>
     </div>
-
+    <br />
     <p>文本框不可输入：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="editableValue" :editable="false"></tiny-date-picker>

examples/sites/demos/pc/app/date-picker/disabled.vue

@@ -4,7 +4,7 @@
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="disabledValue" disabled placeholder="请选择日期"></tiny-date-picker>
     </div>
-
+    <br />
     <p>部分禁用：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" :picker-options="pickerOptions" placeholder="请选择日期"></tiny-date-picker>
@@ -18,12 +18,12 @@
         end-placeholder="结束日期"
       ></tiny-date-picker>
     </div>
-
+    <br />
     <p>只读模式：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="readonlyValue" readonly placeholder="请选择日期"></tiny-date-picker>
     </div>
-
+    <br />
     <p>文本框不可输入：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="editableValue" :editable="false"></tiny-date-picker>

examples/sites/demos/pc/app/date-picker/format-composition-api.vue

@@ -4,12 +4,19 @@
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" format="yyyy 年 MM 月 dd 日"></tiny-date-picker>
     </div>
+    <br />
 
     <p>时间输入框中显示的格式：</p>
     <div class="demo-date-picker-wrap">
-      <tiny-date-picker v-model="value" type="datetime" format="yyyy 年 MM 月 dd 日 HH 时 mm 分 ss 秒" time-format="HH 时 mm 分 ss 秒"></tiny-date-picker>
+      <tiny-date-picker
+        v-model="value"
+        type="datetime"
+        format="yyyy 年 MM 月 dd 日 HH 时 mm 分 ss 秒"
+        time-format="HH 时 mm 分 ss 秒"
+      ></tiny-date-picker>
     </div>
-  
+    <br />
+
     <p>选中值的格式：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="selectedValue" value-format="timestamp"></tiny-date-picker>

examples/sites/demos/pc/app/date-picker/format.vue

@@ -4,12 +4,19 @@
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" format="yyyy 年 MM 月 dd 日"></tiny-date-picker>
     </div>
+    <br />
 
     <p>时间输入框中显示的格式：</p>
     <div class="demo-date-picker-wrap">
-      <tiny-date-picker v-model="value" type="datetime" format="yyyy 年 MM 月 dd 日 HH 时 mm 分 ss 秒" time-format="HH 时 mm 分 ss 秒"></tiny-date-picker>
+      <tiny-date-picker
+        v-model="value"
+        type="datetime"
+        format="yyyy 年 MM 月 dd 日 HH 时 mm 分 ss 秒"
+        time-format="HH 时 mm 分 ss 秒"
+      ></tiny-date-picker>
     </div>
-  
+    <br />
+
     <p>选中值的格式：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="selectedValue" value-format="timestamp"></tiny-date-picker>
@@ -28,7 +35,7 @@ export default {
   data() {
     return {
       value: new Date('2023-05-24'),
-      selectedValue: 1590076800000,
+      selectedValue: 1590076800000
     }
   }
 }

examples/sites/demos/pc/app/date-picker/shortcuts-composition-api.vue

@@ -17,7 +17,7 @@
         end-placeholder="结束月份"
       ></tiny-date-picker>
     </div>
-
+    <br />
     <p>某日起始、某日为止：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker

examples/sites/demos/pc/app/date-picker/shortcuts.vue

@@ -17,7 +17,7 @@
         end-placeholder="结束月份"
       ></tiny-date-picker>
     </div>
-
+    <br />
     <p>某日起始、某日为止：</p>
     <div class="demo-date-picker-wrap">
       <tiny-date-picker

examples/sites/demos/pc/app/date-picker/step-composition-api.vue

@@ -1,16 +1,21 @@
 <template>
   <div>
     <p>步长：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" type="datetime" :step="step"></tiny-date-picker>
     </div>
+    <br />
 
     <p>箭头控制：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" type="datetime" time-arrow-control></tiny-date-picker>
     </div>
+    <br />
 
     <p>时间输入框不可编辑：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" type="datetime" :step="step" :time-editable="false"></tiny-date-picker>
     </div>

examples/sites/demos/pc/app/date-picker/step.vue

@@ -1,11 +1,14 @@
 <template>
   <div>
     <p>步长：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" type="datetime" :step="step"></tiny-date-picker>
     </div>
+    <br />
 
     <p>箭头控制：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" type="datetime" time-arrow-control></tiny-date-picker>
     </div>

examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>开启时区选择</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker
         v-model="timezoneValue"
@@ -11,13 +12,17 @@
         @select-change="selectChange"
       ></tiny-date-picker>
     </div>
+    <br />
 
     <p>默认时间</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" type="datetime"></tiny-date-picker>
     </div>
+    <br />
 
     <p>显示为东八区时间</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="referenceDate" type="datetime" :isutc8="true"></tiny-date-picker>
     </div>

examples/sites/demos/pc/app/date-picker/timezone.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>开启时区选择</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker
         v-model="timezoneValue"
@@ -11,13 +12,17 @@
         @select-change="selectChange"
       ></tiny-date-picker>
     </div>
+    <br />
 
     <p>默认时间</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" type="datetime"></tiny-date-picker>
     </div>
+    <br />
 
     <p>显示为东八区时间</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="referenceDate" type="datetime" :isutc8="true"></tiny-date-picker>
     </div>

examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue

@@ -1,11 +1,14 @@
 <template>
   <div>
     <p>默认启用面板联动：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" type="daterange"></tiny-date-picker>
     </div>
-  
+    <br />
+
     <p>关闭面板联动：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" type="daterange" unlink-panels></tiny-date-picker>
     </div>

examples/sites/demos/pc/app/date-picker/unlink-panels.vue

@@ -1,11 +1,14 @@
 <template>
   <div>
     <p>默认启用面板联动：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" type="daterange"></tiny-date-picker>
     </div>
-  
+    <br />
+
     <p>关闭面板联动：</p>
+    <br />
     <div class="demo-date-picker-wrap">
       <tiny-date-picker v-model="value" type="daterange" unlink-panels></tiny-date-picker>
     </div>