stellar-ui-plus 1.25.5 → 1.25.7

package/components/ste-area-chart/ste-area-chart.vue

@@ -44,9 +44,10 @@ const chartStyle = computed(() => {
     style.height = cHeight.value + 'px';
     return style;
 });
-
+const thas = ref<ComponentPublicInstance | null>();
 onMounted(() => {
     ctx.value = uni.createCanvasContext(canvasId.value, getCurrentInstance());
+    thas.value = getCurrentInstance()?.proxy;
     if (props.series.length) {
         drawCharts(props.series, props.categories);
     }
@@ -99,7 +100,6 @@ function tap(e: any) {
     charts.value?.touchLegend(e);
     charts.value?.showToolTip(e);
 }
-const thas = ref<ComponentPublicInstance | null>();
 async function getImage() {
     if (props.canvas2d == false) {
         return new Promise(resolve => {
@@ -121,8 +121,19 @@ async function getImage() {
                 .fields({ node: true, size: true })
                 .exec(res => {
                     if (res[0]) {
-                        const canvas = res[0].node;
-                        resolve(canvas.toDataURL('image/png'));
+                        uni.canvasToTempFilePath(
+                            {
+                                canvasId: canvasId.value, // 传入 canvas 实例
+                                success: result => {
+                                    // result.tempFilePath 就是生成的图片路径
+                                    resolve(result.tempFilePath);
+                                },
+                                fail: err => {
+                                    reject(err);
+                                },
+                            },
+                            thas.value
+                        ); // 这里的 thas.value 必须是当前组件实例
                     }
                 });
         });

package/components/ste-bar-chart/ste-bar-chart.vue

@@ -45,9 +45,10 @@ const chartStyle = computed(() => {
     style.height = cHeight.value + 'px';
     return style;
 });
-
+const thas = ref<ComponentPublicInstance | null>();
 onMounted(() => {
     ctx.value = uni.createCanvasContext(canvasId.value, getCurrentInstance());
+    thas.value = getCurrentInstance()?.proxy;
     if (props.series.length) drawCharts(props.series);
 });
 
@@ -96,7 +97,6 @@ function tap(e: any) {
     charts.value?.showToolTip(e);
 }
 
-const thas = ref<ComponentPublicInstance | null>();
 async function getImage() {
     if (props.canvas2d == false) {
         return new Promise(resolve => {
@@ -118,8 +118,19 @@ async function getImage() {
                 .fields({ node: true, size: true })
                 .exec(res => {
                     if (res[0]) {
-                        const canvas = res[0].node;
-                        resolve(canvas.toDataURL('image/png'));
+                        uni.canvasToTempFilePath(
+                            {
+                                canvasId: canvasId.value, // 传入 canvas 实例
+                                success: result => {
+                                    // result.tempFilePath 就是生成的图片路径
+                                    resolve(result.tempFilePath);
+                                },
+                                fail: err => {
+                                    reject(err);
+                                },
+                            },
+                            thas.value
+                        ); // 这里的 thas.value 必须是当前组件实例
                     }
                 });
         });

package/components/ste-calendar/date.ts

@@ -39,8 +39,9 @@ function getMonthList(minDate?: DateType, maxDate?: DateType, defaultDate?: Date
     eY = Number(end.format('YYYY'))
     eM = Number(end.format('MM'))
   } else {
-    eY = sM + Number(monthCount) - 1 > 12 ? sY + 1 : sY
-    eM = sM + Number(monthCount) - 1 > 12 ? sM + Number(monthCount) - 1 - 12 : sM + Number(monthCount) - 1
+    const totalMonths = sM + Number(monthCount) - 1
+    eY = sY + Math.floor((totalMonths - 1) / 12)
+    eM = ((totalMonths - 1) % 12) + 1
   }
   const months = []
   for (let y = sY; y <= eY; y++) {
@@ -96,8 +97,13 @@ export function getCalendarData(minDate?: DateType, maxDate?: DateType, defaultD
         else _day = day++
         const key = _day ? utils.dayjs(`${monthData.key}-${_day}`).format(formatter) : Math.random()
         let disabled = !_day
-        if (_day)
-          disabled = Boolean((minDate && key < minDate) || (maxDate && key > maxDate))
+        if (_day) {
+          const keyDate = utils.dayjs(key)
+          disabled = Boolean(
+            (minDate && keyDate.isBefore(utils.dayjs(minDate), 'day')) ||
+            (maxDate && keyDate.isAfter(utils.dayjs(maxDate), 'day'))
+          )
+        }
 
         const daySigns = _day && signs && signs[key] ? signs[key].slice(0, 3).map(item => ({
           ...item,

package/components/ste-calendar/ste-calendar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, onMounted, computed, nextTick, onUnmounted } from 'vue';
+import { watch, onMounted, computed, nextTick, onUnmounted, ref, getCurrentInstance } from 'vue';
 import { useColorStore } from '../../store/color';
 let { getColor } = useColorStore();
 import { formatDate, type DateType, type WeekType } from './date';
@@ -75,8 +75,81 @@ const clearViewTimer = () => {
     }
 };
 
+// 根节点引用，用于可见性监听
+const rootRef = ref<any>(null);
+// 是否已可见（在视口内）
+let isVisible = false;
+// 待执行的滚动目标，组件不可见时暂存
+let pendingScrollTop: number | null = null;
+// 在 setup 顶层获取实例，供小程序端观察器使用
+const instance = getCurrentInstance();
+
+const doScroll = (top: number, _viewMonth: string) => {
+    if (scrollTop.value === top) {
+        viewMonth.value = _viewMonth;
+        initing.value = false;
+        return;
+    }
+    contentScrollTop.value = scrollTop.value;
+    nextTick(() => {
+        contentScrollTop.value = top;
+        scrollTop.value = top;
+        viewMonth.value = _viewMonth;
+        initing.value = false;
+    });
+};
+
+let observer: any = null;
+const startObserver = () => {
+    // #ifdef H5
+    if (typeof IntersectionObserver !== 'undefined' && rootRef.value) {
+        // uni-app H5 中 <view> 的 ref 直接是 DOM 元素
+        const el = rootRef.value.$el ?? rootRef.value;
+        observer = new IntersectionObserver(entries => {
+            const visible = entries[0]?.isIntersecting;
+            if (visible && !isVisible) {
+                isVisible = true;
+                if (pendingScrollTop !== null) {
+                    const top = pendingScrollTop;
+                    const _viewMonth = viewDate.value.format('YYYY-MM');
+                    pendingScrollTop = null;
+                    nextTick(() => doScroll(top, _viewMonth));
+                }
+            } else if (!visible) {
+                isVisible = false;
+            }
+        });
+        observer.observe(el);
+        return;
+    }
+    // #endif
+    // 小程序端使用 uni.createIntersectionObserver
+    try {
+        observer = uni.createIntersectionObserver(instance).relativeToViewport();
+        observer.observe('.ste-calendar-root', (res: any) => {
+            const visible = res.intersectionRatio > 0;
+            if (visible && !isVisible) {
+                isVisible = true;
+                if (pendingScrollTop !== null) {
+                    const top = pendingScrollTop;
+                    const _viewMonth = viewDate.value.format('YYYY-MM');
+                    pendingScrollTop = null;
+                    nextTick(() => doScroll(top, _viewMonth));
+                }
+            } else if (!visible) {
+                isVisible = false;
+            }
+        });
+    } catch (_) {}
+};
+
 onUnmounted(() => {
     clearViewTimer();
+    if (observer) {
+        observer.disconnect?.();
+        observer.unobserve?.();
+        observer = null;
+    }
 });
 
 const showMonth = (date?: DateType) => {
@@ -84,6 +157,7 @@ const showMonth = (date?: DateType) => {
     if (newDate.format('YYYY-MM-DD') !== viewDate.value.format('YYYY-MM-DD')) {
         viewDate.value = newDate;
     }
+    initing.value = true;
     clearViewTimer();
     viewTimer = setTimeout(() => {
         if (props.minDate && props.maxDate) {
@@ -99,18 +173,17 @@ const showMonth = (date?: DateType) => {
         }
         const _viewMonth = viewDate.value.format('YYYY-MM');
         const tops = cmpMonthTops.value;
-        const top = tops[_viewMonth]?.top || 0;
-        if (top === undefined || scrollTop.value === top) {
+        const top = tops[_viewMonth]?.top;
+        if (top === undefined) {
             initing.value = false;
             return;
         }
-        contentScrollTop.value = scrollTop.value;
-        nextTick(() => {
-            contentScrollTop.value = top;
-            scrollTop.value = top;
-            viewMonth.value = _viewMonth;
-            initing.value = false;
-        });
+        // 组件不可见时，暂存目标位置，等可见后再执行
+        if (!isVisible) {
+            pendingScrollTop = top;
+            return;
+        }
+        doScroll(top, _viewMonth);
     }, VIEW_MONTH_DELAY);
 };
 
@@ -208,7 +281,6 @@ watch(
     () => props.defaultDate,
     v => {
         viewDate.value = v ? utils.dayjs(v) : utils.dayjs();
-        showMonth();
     },
     { immediate: true }
 );
@@ -217,6 +289,7 @@ const confirm = () => {
     emits('confirm', dataList.value);
 };
 onMounted(() => {
+    startObserver();
     showMonth();
 });
 
@@ -241,7 +314,7 @@ const onScroll = (e: any) => {
 };
 </script>
 <template>
-    <view class="ste-calendar-root" :style="[cmpRootStyle, { opacity: initing ? 0 : 1 }]">
+    <view ref="rootRef" class="ste-calendar-root" :style="[cmpRootStyle, { opacity: initing ? 0 : 1 }]">
         <view v-if="showTitle" class="calendar-title">{{ title }}</view>
         <view class="week-head">
             <view class="week-row">

package/components/ste-calendar/useData.ts

@@ -3,7 +3,7 @@ import utils from '../../utils/utils'
 import type { Dayjs } from '../../types'
 
 export default function useData() {
-  const initing = ref(false)
+  const initing = ref(true)
   const setIniting = (val: boolean) => initing.value = val
   const startDate = ref<number | string | null>(null)
   const setStartDate = (val: number | string | null) => startDate.value = val

package/components/ste-funnel-chart/ste-funnel-chart.vue

@@ -43,9 +43,10 @@ const chartStyle = computed(() => {
     style.height = cHeight.value + 'px';
     return style;
 });
-
+const thas = ref<ComponentPublicInstance | null>();
 onMounted(() => {
     ctx.value = uni.createCanvasContext(canvasId.value, getCurrentInstance());
+    thas.value = getCurrentInstance()?.proxy;
     drawCharts(props.series);
 });
 
@@ -96,7 +97,6 @@ function tap(e: any) {
     charts.value?.showToolTip(e);
 }
 
-const thas = ref<ComponentPublicInstance | null>();
 async function getImage() {
     if (props.canvas2d == false) {
         return new Promise(resolve => {
@@ -118,8 +118,19 @@ async function getImage() {
                 .fields({ node: true, size: true })
                 .exec(res => {
                     if (res[0]) {
-                        const canvas = res[0].node;
-                        resolve(canvas.toDataURL('image/png'));
+                        uni.canvasToTempFilePath(
+                            {
+                                canvasId: canvasId.value, // 传入 canvas 实例
+                                success: result => {
+                                    // result.tempFilePath 就是生成的图片路径
+                                    resolve(result.tempFilePath);
+                                },
+                                fail: err => {
+                                    reject(err);
+                                },
+                            },
+                            thas.value
+                        ); // 这里的 thas.value 必须是当前组件实例
                     }
                 });
         });

package/components/ste-line-chart/ste-line-chart.vue

@@ -45,9 +45,10 @@ const chartStyle = computed(() => {
     style.height = cHeight.value + 'px';
     return style;
 });
-
+const thas = ref<ComponentPublicInstance | null>();
 onMounted(() => {
     ctx.value = uni.createCanvasContext(canvasId.value, getCurrentInstance());
+    thas.value = getCurrentInstance()?.proxy;
     drawCharts(props.series);
 });
 
@@ -99,7 +100,6 @@ function tap(e: any) {
     charts.value?.showToolTip(e);
 }
 
-const thas = ref<ComponentPublicInstance | null>();
 async function getImage() {
     if (props.canvas2d == false) {
         return new Promise(resolve => {
@@ -121,8 +121,19 @@ async function getImage() {
                 .fields({ node: true, size: true })
                 .exec(res => {
                     if (res[0]) {
-                        const canvas = res[0].node;
-                        resolve(canvas.toDataURL('image/png'));
+                        uni.canvasToTempFilePath(
+                            {
+                                canvasId: canvasId.value, // 传入 canvas 实例
+                                success: result => {
+                                    // result.tempFilePath 就是生成的图片路径
+                                    resolve(result.tempFilePath);
+                                },
+                                fail: err => {
+                                    reject(err);
+                                },
+                            },
+                            thas.value
+                        ); // 这里的 thas.value 必须是当前组件实例
                     }
                 });
         });

package/components/ste-pie-chart/ste-pie-chart.vue

@@ -44,9 +44,10 @@ const chartStyle = computed(() => {
     style.height = cHeight.value + 'px';
     return style;
 });
-
+const thas = ref<ComponentPublicInstance | null>();
 onMounted(() => {
     ctx.value = uni.createCanvasContext(canvasId.value, getCurrentInstance());
+    thas.value = getCurrentInstance()?.proxy;
     if (props.series.length) drawCharts(props.series);
 });
 
@@ -98,7 +99,6 @@ function tap(e: any) {
     charts.value?.showToolTip(e);
 }
 
-const thas = ref<ComponentPublicInstance | null>();
 async function getImage() {
     if (props.canvas2d == false) {
         return new Promise(resolve => {
@@ -120,8 +120,19 @@ async function getImage() {
                 .fields({ node: true, size: true })
                 .exec(res => {
                     if (res[0]) {
-                        const canvas = res[0].node;
-                        resolve(canvas.toDataURL('image/png'));
+                        uni.canvasToTempFilePath(
+                            {
+                                canvasId: canvasId.value, // 传入 canvas 实例
+                                success: result => {
+                                    // result.tempFilePath 就是生成的图片路径
+                                    resolve(result.tempFilePath);
+                                },
+                                fail: err => {
+                                    reject(err);
+                                },
+                            },
+                            thas.value
+                        ); // 这里的 thas.value 必须是当前组件实例
                     }
                 });
         });

package/components/ste-popup/ste-popup.easycom.json

@@ -104,33 +104,31 @@
         },
         {
             "name": "[event]close",
-            "description": "弹窗关闭动画执行完毕事件",
+            "description": "弹窗关闭前触发，可用于异步拦截关闭",
             "params": [
                 {
-                    "name": "data",
-                    "description": "() => void"
+                    "name": "suspend",
+                    "description": "开启等待的回调函数"
+                },
+                {
+                    "name": "next",
+                    "description": "执行后续关闭操作的回调函数"
+                },
+                {
+                    "name": "stop",
+                    "description": "阻止后续关闭操作的回调函数"
                 }
             ]
         },
         {
-            "name": "[event]open",
+            "name": "[event]open-after",
             "description": "弹窗打开动画执行完毕事件",
-            "params": [
-                {
-                    "name": "data",
-                    "description": "() => void"
-                }
-            ]
+            "params": []
         },
         {
-            "name": "[event]maskClick",
+            "name": "[event]clickMask",
             "description": "点击遮罩时触发",
-            "params": [
-                {
-                    "name": "data",
-                    "description": "() => void"
-                }
-            ]
+            "params": []
         },
         {
             "name": "[slot]default",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stellar-ui-plus",
-    "version": "1.25.5",
+    "version": "1.25.7",
     "description": "",
     "author": "",
     "license": "MIT",