stellar-ui-plus 1.25.6 → 1.25.8

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-dropdown-menu/README.md

@@ -177,10 +177,195 @@
             }
 
             .action-box {
-                padding: 0 40rpx;
+                padding: 0 40rpx 20rpx 40rpx;
                 display: flex;
                 justify-content: space-between;
+            }
+        }
+    }
+</style>
+```
+
+## 单据类型筛选
+
+此示例展示了如何实现一个单据类型筛选菜单，包含左侧分类选择、右侧输入框和子选项选择。
+
+```html
+<script lang="ts" setup>
+    import type { RefDropdownMenu } from 'stellar-ui-plus/types/refComponents';
+    import { computed, reactive, ref } from 'vue';
+
+    const orderMenus = [
+        {
+            label: '单据类型1',
+            value: '1',
+            children: [
+                { label: '类型1A', value: '1-1' },
+                { label: '类型1B', value: '1-2' },
+                { label: '类型1C', value: '1-3' },
+                { label: '类型1D', value: '1-4' },
+            ],
+        },
+        {
+            label: '单据类型2',
+            value: '2',
+            children: [
+                { label: '类型2A', value: '2-1' },
+                { label: '类型2B', value: '2-2' },
+                { label: '类型2C', value: '2-3' },
+                { label: '类型2D', value: '2-4' },
+            ],
+        },
+    ];
+
+    const orderData = reactive({
+        parent: '1',
+        type: '1-1',
+        code: '',
+    });
+
+    const orderChildren = computed(() => orderMenus.find(item => item.value == orderData.parent)?.children || []);
+
+    const setOrder = (key: keyof typeof orderData, v: string) => {
+        orderData[key] = v;
+        if (key == 'parent') {
+            const children = orderMenus.find(item => item.value == v)?.children || [];
+            orderData.type = children[0]?.value || '';
+        }
+    };
+
+    const orderMenuRef = ref<RefDropdownMenu>();
+    function confirmOrderMenu() {
+        uni.showToast({
+            title: `确认订单 parent:${orderData.parent}, type:${orderData.type}, code:${orderData.code}`,
+            icon: 'none',
+        });
+        orderMenuRef.value?.close();
+    }
+</script>
+<template>
+    <view class="menu-item">
+        <view>
+            <ste-dropdown-menu value="2" title="单据类型" ref="orderMenuRef">
+                <view class="order-menu-box">
+                    <view class="content-box">
+                        <view class="content-left">
+                            <view v-for="(m, i) in orderMenus" :key="i" class="left-menu-item" :class="orderData.parent == m.value ? 'active' : ''" @click="setOrder('parent', m.value)">
+                                {{ m.label }}
+                            </view>
+                        </view>
+                        <view class="content-right">
+                            <view class="right-codes">
+                                <view class="content-title">订单尾号</view>
+                                <ste-input style="width: 356rpx" placeholder="请输入订单最后5位" v-model="orderData.code" background="#f5f5f5"></ste-input>
+                            </view>
+                            <view class="right-types">
+                                <view class="content-title">单据类型</view>
+                                <view class="right-menus">
+                                    <view v-for="(m, i) in orderChildren" :key="i" class="right-menu-item" :class="orderData.type == m.value ? 'active' : ''" @click="setOrder('type', m.value)">
+                                        {{ m.label }}
+                                    </view>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="action-box">
+                        <ste-button width="320" background="rgba(0,0,0,0)" borderColor="#0090FF" color="#0090FF" @click="confirmOrderMenu">重置</ste-button>
+                        <ste-button width="320" @click="confirmOrderMenu">确认</ste-button>
+                    </view>
+                </view>
+            </ste-dropdown-menu>
+        </view>
+    </view>
+</template>
+<style lang="scss">
+    .menu-item {
+        display: flex;
+        padding: 0 20rpx;
+        width: 100%;
+        box-shadow: 0 0 10px #ddd;
+        > view {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .order-menu-box {
+            background-color: #fff;
+            padding-top: 24rpx;
+            border-top: solid 4rpx #f5f5f5;
 
+            .content-box {
+                width: 100%;
+                display: flex;
+                margin-bottom: 56rpx;
+                font-size: 28rpx;
+
+                .content-left {
+                    width: 150rpx;
+                    background-color: #f9f9f9;
+
+                    .left-menu-item {
+                        height: 90rpx;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-size: 24rpx;
+                        color: #a4a4a4;
+
+                        &.active {
+                            background-color: #fff;
+                            color: #0090ff;
+                        }
+                    }
+                }
+
+                .content-right {
+                    flex: 1;
+                    margin-left: 26rpx;
+                    margin-right: 18rpx;
+                    background-color: #fff;
+
+                    .content-title {
+                        height: 90rpx;
+                        display: flex;
+                        align-items: center;
+                        font-size: 24rpx;
+                        color: #1c1f23;
+                    }
+
+                    .right-types {
+                        .right-menus {
+                            display: flex;
+                            flex-wrap: wrap;
+                            align-items: center;
+                            gap: 20rpx;
+
+                            .right-menu-item {
+                                width: 162rpx;
+                                height: 64rpx;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                background: #f9f9f9;
+                                border-radius: 8rpx;
+
+                                &.active {
+                                    background-color: #0090ff;
+                                    font-weight: bold;
+                                    color: #fff;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .action-box {
+                padding: 0 40rpx;
+                display: flex;
+                justify-content: space-between;
                 padding-bottom: 20rpx;
             }
         }

package/components/ste-dropdown-menu/ste-dropdown-menu.scss

@@ -1,14 +1,17 @@
 .ste-dropdown-menu-root {
     .menu-box {
         padding: 20rpx 0;
+
         .menu-title-icon {
             display: inline-flex;
             transition: all var(--duration) linear;
         }
+
         .title {
             font-size: var(--font-size-24, 24rpx);
             margin-right: 16rpx;
         }
+
         display: flex;
         align-items: center;
     }
@@ -59,6 +62,7 @@
         .menu-title-icon {
             transform: rotate(180deg);
         }
+
         .dropdown-content {
             opacity: 1;
             z-index: var(--menu-z-index);
@@ -73,6 +77,7 @@
         .menu-title-icon {
             transform: rotate(180deg);
         }
+
         .dropdown-content {
             display: flex;
             flex-direction: column;
@@ -82,10 +87,12 @@
                 transform: translateY(100%);
             }
         }
+
         &.open {
             .menu-title-icon {
                 transform: rotate(0);
             }
+
             .menu-item-content {
                 transform: translateY(0);
             }
@@ -96,4 +103,4 @@
             }
         }
     }
-}
+}

package/components/ste-popup/ATTRIBUTES.md

@@ -21,9 +21,9 @@
 ### Events
 | 事件名 | 说明  | 事件参数 | 支持版本 |
 | ----- | ----- | ------- | -------- |
-| `close` | 弹窗关闭动画执行完毕事件 | `data`：() => void | - |
-| `open` | 弹窗打开动画执行完毕事件 | `data`：() => void | - |
-| `maskClick` | 点击遮罩时触发 | `data`：() => void | - |
+| `close` | 弹窗关闭前触发，可用于异步拦截关闭 | `suspend`：开启等待的回调函数<br/>`next`：执行后续关闭操作的回调函数<br/>`stop`：阻止后续关闭操作的回调函数 | - |
+| `open-after` | 弹窗打开动画执行完毕事件 | - | - |
+| `clickMask` | 点击遮罩时触发 | - | - |
 
 
 ### Slots