feat: ✨ Picker组件优化性能

Moonofweisheng · Aug 21, 2023 · 24dd43f · 24dd43f
1 parent 09c75d4
commit 24dd43f
Show file tree

Hide file tree

Showing 44 changed files with 1,612 additions and 1,232 deletions.
diff --git a/docs/component/calendarView.md b/docs/component/calendarView.md
@@ -222,7 +222,7 @@ function handleChange({ value }) {
 
 | 参数              | 说明                                                                   | 类型                  | 可选值                                                                                      | 默认值                | 最低版本 |
 | ----------------- | ---------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------- | --------------------- | -------- |
-| v-model             | 选中值，为 13 位时间戳或时间戳数组                                     | null / number / array | -                                                                                           | -                     | -        |
+| v-model           | 选中值，为 13 位时间戳或时间戳数组                                     | null / number / array | -                                                                                           | -                     | -        |
 | type              | 日期类型                                                               | string                | date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange | date                  | -        |
 | min-date          | 最小日期，为 13 位时间戳                                               | number                | -                                                                                           | 当前日期往前推 6 个月 | -        |
 | max-date          | 最大日期，为 13 位时间戳                                               | number                | -                                                                                           | 当前日期往后推 6 个月 | -        |
@@ -239,15 +239,15 @@ function handleChange({ value }) {
 
 ## Events
 
-| 事件名称 | 说明             | 参数                     | 最低版本 |
-| -------- | ---------------- | ------------------------ | -------- |
+| 事件名称 | 说明             | 参数        | 最低版本 |
+| -------- | ---------------- | ----------- | -------- |
 | change   | 绑定值变化时触发 | `{ value }` | -        |
 
 ## Methods
 
-| 方法名称       | 说明                                                                                                         | 参数                                                                                                                            | 最低版本 |
-| -------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| scrollIntoView | 使当前日期或者选中日期滚动到可视区域，并监听滚动，在面板从 隐藏状态（如 display: none） 切换为展示状态时调用 | thresholds，数字数组，具体使用见 [Intersection Observer](https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver) | -        |
+| 方法名称       | 说明                                                                                                         | 参数 | 最低版本 |
+| -------------- | ------------------------------------------------------------------------------------------------------------ | ---- | -------- |
+| scrollIntoView | 使当前日期或者选中日期滚动到可视区域，并监听滚动，在面板从 隐藏状态（如 display: none） 切换为展示状态时调用 | -    |
 
 ## 外部样式类
 

diff --git a/package.json b/package.json
@@ -52,19 +52,20 @@
     "upload:mp-dingtalk": "uni build -p mp-dingtalk && minici --platform dd"
   },
   "dependencies": {
-    "@dcloudio/uni-app": "3.0.0-alpha-3080220230511001",
-    "@dcloudio/uni-app-plus": "3.0.0-alpha-3080220230511001",
-    "@dcloudio/uni-components": "3.0.0-alpha-3080220230511001",
-    "@dcloudio/uni-h5": "3.0.0-alpha-3080220230511001",
-    "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3080220230511001",
-    "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3080220230511001",
-    "@dcloudio/uni-mp-jd": "3.0.0-alpha-3080220230511001",
-    "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3080220230511001",
-    "@dcloudio/uni-mp-lark": "3.0.0-alpha-3080220230511001",
-    "@dcloudio/uni-mp-qq": "3.0.0-alpha-3080220230511001",
-    "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3080220230511001",
-    "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3080220230511001",
-    "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3080220230511001",
+    "@dcloudio/uni-app": "3.0.0-alpha-3081220230802001",
+    "@dcloudio/uni-app-plus": "3.0.0-alpha-3081220230802001",
+    "@dcloudio/uni-components": "3.0.0-alpha-3081220230802001",
+    "@dcloudio/uni-h5": "3.0.0-alpha-3081220230802001",
+    "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3081220230802001",
+    "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3081220230802001",
+    "@dcloudio/uni-mp-jd": "3.0.0-alpha-3081220230802001",
+    "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3081220230802001",
+    "@dcloudio/uni-mp-lark": "3.0.0-alpha-3081220230802001",
+    "@dcloudio/uni-mp-qq": "3.0.0-alpha-3081220230802001",
+    "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3081220230802001",
+    "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3081220230802001",
+    "@dcloudio/uni-mp-xhs": "3.0.0-alpha-3081220230802001",
+    "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3081220230802001",
     "vitepress": "^1.0.0-beta.6",
     "vue": "^3.2.45",
     "vue-i18n": "^9.1.9"
@@ -73,10 +74,10 @@
     "@commitlint/cli": "^17.4.4",
     "@commitlint/config-conventional": "^17.4.4",
     "@dcloudio/types": "^3.3.2",
-    "@dcloudio/uni-automator": "3.0.0-alpha-3080220230511001",
-    "@dcloudio/uni-cli-shared": "3.0.0-alpha-3080220230511001",
-    "@dcloudio/uni-stacktracey": "3.0.0-alpha-3080220230511001",
-    "@dcloudio/vite-plugin-uni": "3.0.0-alpha-3080220230511001",
+    "@dcloudio/uni-automator": "3.0.0-alpha-3081220230802001",
+    "@dcloudio/uni-cli-shared": "3.0.0-alpha-3081220230802001",
+    "@dcloudio/uni-stacktracey": "3.0.0-alpha-3081220230802001",
+    "@dcloudio/vite-plugin-uni": "3.0.0-alpha-3081220230802001",
     "@types/node": "^18.14.6",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",

diff --git a/src/pages.json b/src/pages.json
@@ -358,7 +358,7 @@
           "mp-alipay": {
             "allowsBounceVertical": "NO"
           },
-          "navigationBarTitleText": "Picker 选择器视图"
+          "navigationBarTitleText": "Picker 选择器"
         }
       },
       {

diff --git a/src/pages/calendar/Index.vue b/src/pages/calendar/Index.vue
@@ -9,7 +9,7 @@
         <wd-calendar label="日期时间选择" type="datetime" v-model="value4" />
         <wd-calendar label="日期时间范围选择" type="datetimerange" v-model="value5" />
         <wd-calendar label="周选择" type="week" v-model="value6" />
-        <wd-calendar label="月选择" type="month" v-model="value7" />
+        <wd-calendar label="月选择" type="month" :min-date="minDate" v-model="value7" />
         <wd-calendar label="周范围选择" :first-day-of-week="1" type="weekrange" v-model="value8" />
         <wd-calendar label="月范围选择" type="monthrange" v-model="value9" />
         <wd-calendar label="日周月切换" :first-day-of-week="1" show-type-switch v-model="value10" />
@@ -51,6 +51,8 @@ import { useToast } from '@/uni_modules/wot-design-uni'
 import { dayjs } from '@/uni_modules/wot-design-uni'
 import { ref } from 'vue'
 
+const minDate = ref<number>(new Date(new Date().getFullYear() - 20, new Date().getMonth() - 6, new Date().getDate()).getTime())
+
 const value1 = ref<number>(Date.now())
 const value2 = ref<number[]>([Date.now() - 24 * 60 * 60 * 1000 * 3, Date.now()])
 const value3 = ref<number[]>([])

diff --git a/src/pages/dropMenu/Index.vue b/src/pages/dropMenu/Index.vue
@@ -23,7 +23,7 @@
       </demo-block>
       <demo-block title="自定义菜单选项" transparent>
         <view class="custom-menu">
-          <wd-drop-menu style="flex: 1; min-width: 0">
+          <wd-drop-menu custom-style="flex: 1; min-width: 0">
             <wd-drop-menu-item v-model="value4" :options="option1" @change="handleChange4" />
           </wd-drop-menu>
           <view style="flex: 1">

diff --git a/src/pages/resize/Index.vue b/src/pages/resize/Index.vue
@@ -69,6 +69,7 @@ onReady(() => {
 })
 
 function handleResize(detail: Record<string, string | number>) {
+  console.log(detail)
   const { height, width, top, right, bottom, left } = detail
   lastHeight.value = sizeHeight.value
   lastTop.value = sizeTop.value

diff --git a/src/uni_modules/wot-design-uni/components/wd-action-sheet/index.scss b/src/uni_modules/wot-design-uni/components/wd-action-sheet/index.scss
@@ -42,6 +42,10 @@
   }
 }
 
+:deep(.wd-action-sheet__popup){
+  border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
+}
+
 @include b(action-sheet) {
   background-color: $-color-white;
   padding-bottom: 1px;

diff --git a/src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue b/src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue
@@ -1,57 +1,59 @@
 <template>
-  <wd-popup
-    custom-class="wd-action-sheet__popup"
-    :custom-style="`${(actions && actions.length) || (panels && panels.length) ? 'background: transparent;' : ''}`"
-    v-model="showPopup"
-    :duration="duration"
-    position="bottom"
-    :close-on-click-modal="closeOnClickModal"
-    :safe-area-inset-bottom="safeAreaInsetBottom"
-    :lazy-render="lazyRender"
-    @enter="handleOpen"
-    @close="close"
-    @after-enter="handleOpened"
-    @after-leave="handleClosed"
-    @clickmodal="handleClickModal"
-    :z-index="zIndex"
-  >
-    <view
-      class="wd-action-sheet"
-      :style="`${(actions && actions.length) || (panels && panels.length) ? 'margin: 0 10px 10px; border-radius: 16px;' : ''}`"
+  <view>
+    <wd-popup
+      custom-class="wd-action-sheet__popup"
+      :custom-style="`${(actions && actions.length) || (panels && panels.length) ? 'background: transparent;' : ''}`"
+      v-model="showPopup"
+      :duration="duration"
+      position="bottom"
+      :close-on-click-modal="closeOnClickModal"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      :lazy-render="lazyRender"
+      @enter="handleOpen"
+      @close="close"
+      @after-enter="handleOpened"
+      @after-leave="handleClosed"
+      @clickmodal="handleClickModal"
+      :z-index="zIndex"
     >
-      <view v-if="title" :class="`wd-action-sheet__header ${customHeaderClass}`">
-        {{ title }}
-        <wd-icon custom-class="wd-action-sheet__close" name="add" @click="close" />
-      </view>
-      <view class="wd-action-sheet__actions" v-if="actions && actions.length">
-        <button
-          v-for="(action, rowIndex) in actions"
-          :key="rowIndex"
-          :class="`wd-action-sheet__action ${action.disabled ? 'wd-action-sheet__action--disabled' : ''}  ${
-            action.loading ? 'wd-action-sheet__action--loading' : ''
-          }`"
-          :style="`color: ${action.color}`"
-          @click="select(rowIndex, 'action')"
-        >
-          <wd-loading v-if="action.loading" size="20px" />
-          <view v-else class="wd-action-sheet__name">{{ action.name }}</view>
-          <view v-if="!action.loading && action.subname" class="wd-action-sheet__subname">{{ action.subname }}</view>
-        </button>
-      </view>
-      <view v-if="formatPanels && formatPanels.length">
-        <view v-for="(panel, rowIndex) in formatPanels" :key="rowIndex" class="wd-action-sheet__panels">
-          <view class="wd-action-sheet__panels-content">
-            <view v-for="(col, colIndex) in panel" :key="colIndex" class="wd-action-sheet__panel" @click="select(rowIndex, 'panels', colIndex)">
-              <image class="wd-action-sheet__panel-img" :src="(col as any).iconUrl" />
-              <view class="wd-action-sheet__panel-title">{{ (col as any).title }}</view>
+      <view
+        class="wd-action-sheet"
+        :style="`${(actions && actions.length) || (panels && panels.length) ? 'margin: 0 10px 10px; border-radius: 16px;' : ''}`"
+      >
+        <view v-if="title" :class="`wd-action-sheet__header ${customHeaderClass}`">
+          {{ title }}
+          <wd-icon custom-class="wd-action-sheet__close" name="add" @click="close" />
+        </view>
+        <view class="wd-action-sheet__actions" v-if="actions && actions.length">
+          <button
+            v-for="(action, rowIndex) in actions"
+            :key="rowIndex"
+            :class="`wd-action-sheet__action ${action.disabled ? 'wd-action-sheet__action--disabled' : ''}  ${
+              action.loading ? 'wd-action-sheet__action--loading' : ''
+            }`"
+            :style="`color: ${action.color}`"
+            @click="select(rowIndex, 'action')"
+          >
+            <wd-loading v-if="action.loading" size="20px" />
+            <view v-else class="wd-action-sheet__name">{{ action.name }}</view>
+            <view v-if="!action.loading && action.subname" class="wd-action-sheet__subname">{{ action.subname }}</view>
+          </button>
+        </view>
+        <view v-if="formatPanels && formatPanels.length">
+          <view v-for="(panel, rowIndex) in formatPanels" :key="rowIndex" class="wd-action-sheet__panels">
+            <view class="wd-action-sheet__panels-content">
+              <view v-for="(col, colIndex) in panel" :key="colIndex" class="wd-action-sheet__panel" @click="select(rowIndex, 'panels', colIndex)">
+                <image class="wd-action-sheet__panel-img" :src="(col as any).iconUrl" />
+                <view class="wd-action-sheet__panel-title">{{ (col as any).title }}</view>
+              </view>
             </view>
           </view>
         </view>
+        <slot />
+        <button v-if="cancelText" class="wd-action-sheet__cancel" @click="handleCancel">{{ cancelText }}</button>
       </view>
-      <slot />
-      <button v-if="cancelText" class="wd-action-sheet__cancel" @click="handleCancel">{{ cancelText }}</button>
-    </view>
-  </wd-popup>
+    </wd-popup>
+  </view>
 </template>
 <script lang="ts">
 export default {
@@ -114,7 +116,7 @@ const props = withDefaults(defineProps<Props>(), {
   closeOnClickModal: true,
   duration: 200,
   zIndex: 10,
-  lazyRender: false,
+  lazyRender: true,
   safeAreaInsetBottom: true
 })
 const formatPanels = ref<Array<Panel> | Array<Array<Panel>>>([])

diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss b/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss
@@ -23,8 +23,10 @@
 
 @include b(month) {
   @include e(title) {
-    padding: 13px 0;
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 45px;
     font-size: $-calendar-panel-title-fs;
     color: $-calendar-panel-title-color;
   }

diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue b/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue
@@ -82,7 +82,7 @@ const monthTitle = computed(() => {
   }
 })
 const firstDayStyle = computed(() => {
-  return (index, date, firstDayOfWeek) => {
+  return (index: number, date: number, firstDayOfWeek: number) => {
     return getFirstDayStyle(index, date, firstDayOfWeek)
   }
 })