uview-pro 0.2.2 → 0.2.4

package/components/u-collapse/u-collapse.vue

@@ -9,16 +9,18 @@ export default {
     name: 'u-collapse',
     options: {
         addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
         virtualHost: true,
+        // #endif
         styleIsolation: 'shared'
     }
 };
 </script>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { nextTick, onMounted, ref } from 'vue';
 import { CollapseProps } from './types';
-import { $u } from '../../';
+import { $u, useParent } from '../../';
 
 /**
  * collapse 手风琴
@@ -34,33 +36,148 @@ import { $u } from '../../';
  * @example <u-collapse></u-collapse>
  */
 const props = defineProps(CollapseProps);
-
 const emit = defineEmits(['change']);
 
-// 子元素集合
-const children = ref<any[]>([]);
+// 使用通信库的父组件Hook
+const { children, broadcast, getChildrenExposed } = useParent('u-collapse');
+
+// 当前激活的面板 - 只在手风琴模式下使用
+const activeName = ref<string | number>('');
+
+onMounted(() => {
+    nextTick(() => {
+        // 初始化：收集所有open为true的项
+        setTimeout(() => {
+            initializeActiveName();
+        }, 100);
+    });
+});
 
 /**
- * 重新初始化一次内部的所有子元素的高度计算，用于异步获取数据渲染的情况
+ * 初始化activeName - 找到第一个open为true的项
  */
-function init() {
-    children.value.forEach((vm, index) => {
-        vm.init && vm.init();
-    });
+function initializeActiveName() {
+    if (props.accordion) {
+        // 手风琴模式下，取第一个open为true的项作为初始激活项
+        const childrenExposed = getChildrenExposed();
+        const openChild = childrenExposed.find(child => child.exposed.isShow === true);
+        if (openChild) {
+            activeName.value = openChild.exposed.itemName || '';
+        }
+    }
 }
 
 /**
  * collapse item被点击，由collapse item调用父组件方法
  */
-function onChange(index: string | number) {
-    emit('change', index);
+function onChange(name: string | number) {
+    if (props.accordion) {
+        // 手风琴模式
+        const childrenExposed = getChildrenExposed();
+        const targetChild = childrenExposed.find(child => child.exposed.itemName === name);
+        if (targetChild?.exposed.isShow.value === true) {
+            // 目标项当前是展开状态，点击后要关闭它
+            activeName.value = '';
+            broadcast('closeAll', {});
+        } else {
+            // 目标项当前是关闭状态，点击后要展开它并关闭其他
+            activeName.value = name;
+            broadcast('openSingle', { targetName: name });
+        }
+    } else {
+        // 非手风琴模式 - 只通知目标项切换状态
+        broadcast('toggleSingle', { targetName: name });
+    }
+
+    // 收集当前所有展开的项
+    let currentActiveNames: (string | number)[] = [];
+    if (props.accordion) {
+        currentActiveNames = activeName.value ? [activeName.value] : [];
+    } else {
+        // 对于非手风琴模式，我们不知道所有项的状态，所以这里不处理
+        currentActiveNames = [];
+    }
+
+    emit('change', props.accordion ? activeName.value || '' : currentActiveNames);
 }
 
+/**
+ * 设置激活的面板
+ */
+function setActiveNames(names: string | number | (string | number)[]) {
+    if (props.accordion) {
+        // 手风琴模式
+        const name = Array.isArray(names) ? names[0] : names;
+        activeName.value = name || '';
+        if (name) {
+            broadcast('openSingle', { targetName: name });
+        } else {
+            broadcast('closeAll', {});
+        }
+    } else {
+        // 非手风琴模式
+        const namesArray = Array.isArray(names) ? names : [names];
+        broadcast('setMultiple', { targetNames: namesArray });
+    }
+}
+
+/**
+ * 打开所有面板
+ */
+function openAll() {
+    if (props.accordion) {
+        console.warn('手风琴模式下不能打开所有面板');
+        return;
+    }
+    const childrenExposed = getChildrenExposed();
+    const allNames = childrenExposed.map(child => child.exposed.itemName).filter(Boolean);
+    broadcast('setMultiple', { targetNames: allNames });
+}
+
+/**
+ * 关闭所有面板
+ */
+function closeAll() {
+    broadcast('closeAll', {});
+    if (props.accordion) {
+        activeName.value = '';
+    }
+}
+
+/**
+ * 重新初始化，用于动态内容变化
+ */
+function init() {
+    const childrenExposed = getChildrenExposed();
+    childrenExposed.forEach(child => {
+        if (child.exposed.init) {
+            child.exposed.init();
+        }
+    });
+
+    // 重新初始化activeName
+    setTimeout(() => {
+        initializeActiveName();
+    }, 150);
+}
+
+// 使用defineExpose暴露给外部
 defineExpose({
+    // props
     props,
-    children,
+
+    // 状态
+    activeName,
+
+    // 方法
+    onChange,
+    setActiveNames,
+    openAll,
+    closeAll,
     init,
-    onChange
+
+    // 计算属性
+    childrenCount: () => children.length
 });
 </script>
 

package/components/u-collapse-item/u-collapse-item.vue

@@ -1,13 +1,19 @@
 <template>
     <view class="u-collapse-item" :style="`${$u.toStyle(itemStyle)}${$u.toStyle(customStyle)}`" :class="customClass">
-        <view :hover-stay-time="200" class="u-collapse-head" @tap.stop="headClick" :hover-class="hoverClass" :style="headStyle">
+        <view
+            :hover-stay-time="200"
+            class="u-collapse-head"
+            @tap.stop="headClick"
+            :hover-class="hoverClass"
+            :style="headStyle"
+        >
             <template v-if="!slots['title-all']">
                 <view v-if="!slots['title']" class="u-collapse-title u-line-1" :style="titleStyle">
                     {{ title }}
                 </view>
                 <slot v-else name="title" />
                 <view class="u-icon-wrap">
-                    <u-icon v-if="arrow" :color="arrowColor" :name="isShow ? 'arrow-up' : 'arrow-down'" />
+                    <u-icon v-if="showArrow" :color="arrowColor" :name="isShow ? 'arrow-up' : 'arrow-down'" />
                 </view>
             </template>
             <slot v-else name="title-all" />
@@ -26,7 +32,9 @@ export default {
     name: 'u-collapse-item',
     options: {
         addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
         virtualHost: true,
+        // #endif
         styleIsolation: 'shared'
     }
 };
@@ -34,9 +42,8 @@ export default {
 
 <script setup lang="ts">
 import { ref, watch, onMounted, useSlots, getCurrentInstance, nextTick, computed } from 'vue';
-import { $u } from '../..';
+import { $u, useChildren, useParentEvents } from '../..';
 import { CollapseItemProps } from './types';
-import { useParent } from '../../libs/hooks/useParent';
 
 /**
  * collapseItem 手风琴Item
@@ -59,50 +66,77 @@ const instance = getCurrentInstance();
 
 const isShow = ref(false);
 const elId = ref('');
-const height = ref('0'); // body内容的高度
-const headStyle = ref<Record<string, any>>({}); // 头部样式，对象形式
-const bodyStyle = ref<Record<string, any>>({}); // 主体部分样式
-const itemStyle = ref<Record<string, any>>({}); // 每个item的整体样式
-const arrowColor = ref(''); // 箭头的颜色
-const hoverClass = ref(''); // 头部按下时的效果样式类
-const accordion = ref(true); // 是否显示右侧箭头
-const arrow = ref(true);
+const height = ref('0');
+const headStyle = ref<Record<string, any>>({});
+const bodyStyle = ref<Record<string, any>>({});
+const itemStyle = ref<Record<string, any>>({});
+const arrowColor = ref('');
+const hoverClass = ref('');
 
-const { parent, parentExposed } = useParent('u-collapse');
+// 使用通信库的子组件Hook
+const { childId, parentExposed } = useChildren('u-collapse-item', 'u-collapse');
 
-watch(
-    () => props.open,
-    val => {
-        isShow.value = val;
-    },
-    { immediate: true }
-);
+// 计算属性
+const showArrow = computed(() => {
+    return parentExposed.value?.props ? parentExposed.value.props.arrow : true;
+});
 
-/**
- * 获取父组件的配置项
- */
 const titleStyle = computed(() => {
     let style = { textAlign: props.align ? props.align : 'left' };
 
-    if (isShow.value && props.activeStyle && !arrow.value) {
+    if (isShow.value && props.activeStyle && !showArrow.value) {
         style = $u.deepMerge(style, props.activeStyle);
     }
     return $u.toStyle(style);
 });
 
+// 获取唯一标识符
+const itemName = computed(() => {
+    // 优先级：name > index > childId
+    if (props.name !== undefined && props.name !== '') {
+        return props.name;
+    } else if (props.index !== undefined && props.index !== '') {
+        return props.index;
+    } else {
+        return childId;
+    }
+});
+
+/**
+ * 设置显示状态
+ */
+function setShowState(show: boolean) {
+    if (isShow.value !== show) {
+        isShow.value = show;
+
+        // 如果展开，需要重新计算高度
+        if (show) {
+            nextTick(() => {
+                queryRect();
+            });
+        }
+
+        // 本地触发change事件
+        emit('change', {
+            index: props.index,
+            name: itemName.value,
+            show: isShow.value
+        });
+    }
+}
+
 /**
  * 异步获取内容，或者动态修改了内容时，需要重新初始化
  */
 function init() {
-    if (parent) {
-        headStyle.value = parentExposed.props.headStyle;
-        bodyStyle.value = parentExposed.props.bodyStyle;
-        arrowColor.value = parentExposed.props.arrowColor;
-        hoverClass.value = parentExposed.props.hoverClass;
-        arrow.value = parentExposed.props.arrow;
-        itemStyle.value = parentExposed.props.itemStyle;
-        accordion.value = parentExposed.props.accordion;
+    if (parentExposed.value?.props) {
+        headStyle.value = parentExposed.value.props.headStyle || {};
+        bodyStyle.value = parentExposed.value.props.bodyStyle || {};
+        arrowColor.value = parentExposed.value.props.arrowColor || '#909399';
+        hoverClass.value = parentExposed.value.props.hoverClass || 'u-hover-class';
+        itemStyle.value = parentExposed.value.props.itemStyle || {};
     }
+
     elId.value = $u.guid();
     nextTick(() => {
         queryRect();
@@ -114,46 +148,82 @@ function init() {
  */
 function headClick() {
     if (props.disabled) return;
-    if (accordion.value && parent) {
-        parent.children.forEach((vm: any) => {
-            if (vm.exposed.elId.value !== elId.value) {
-                vm.exposed.isShow.value = false;
-            } else {
-                vm.exposed.isShow.value = !vm.exposed.isShow.value;
-                emit('change', {
-                    index: props.index,
-                    show: vm.exposed.isShow.value
-                });
-            }
-        });
-    } else {
-        isShow.value = !isShow.value;
-        emit('change', {
-            index: props.index,
-            show: isShow.value
-        });
+
+    // 通知父组件状态变化
+    if (parentExposed.value?.onChange) {
+        parentExposed.value.onChange(itemName.value);
     }
-    if (isShow.value) parentExposed && parentExposed.onChange && parentExposed.onChange(props.index);
 }
 
 /**
  * 查询内容高度
  */
 function queryRect() {
-    // getRect为uView自带的节点查询简化方法，详见文档介绍：https://uviewpro.cn/zh/tools/getRect.html
-    // 组件内部一般用this.$uGetRect，对外的为this.$u.getRect，二者功能一致，名称不同
-    $u.getRect('#' + elId.value, instance).then((res: any) => {
-        height.value = res.height + 'px';
-        // #ifdef MP-TOUTIAO
-        height.value = 'auto';
-        // #endif
-    });
+    $u.getRect('#' + elId.value, instance)
+        .then((res: any) => {
+            if (res && res.height) {
+                height.value = res.height + 'px';
+            }
+            // #ifdef MP-TOUTIAO
+            if (isShow.value) {
+                height.value = 'auto';
+            }
+            // #endif
+        })
+        .catch((err: any) => {
+            console.warn('queryRect error:', err);
+            height.value = 'auto';
+        });
 }
 
+// 使用自动取消监听注册父组件事件
+useParentEvents(childId, {
+    openSingle: (data: any) => {
+        // 只有目标项展开，其他都关闭
+        const shouldShow = data.targetName === itemName.value;
+        setShowState(shouldShow);
+    },
+    closeAll: () => {
+        setShowState(false);
+    },
+    setMultiple: (data: any) => {
+        const shouldShow = data.targetNames.includes(itemName.value);
+        setShowState(shouldShow);
+    },
+    toggleSingle: (data: any) => {
+        // 只有目标项才切换状态
+        if (data.targetName === itemName.value) {
+            setShowState(!isShow.value);
+        }
+    }
+});
+
 onMounted(() => {
+    // 关键修复：根据 open 属性设置初始状态
+    setShowState(props.open);
+    // 初始化
     init();
 });
 
+// 监听 open 属性变化
+watch(
+    () => props.open,
+    newVal => {
+        setShowState(newVal);
+    }
+);
+
+// 监听父组件exposed的变化
+watch(
+    parentExposed,
+    newExposed => {
+        if (newExposed) {
+            init();
+        }
+    },
+    { deep: true, immediate: true }
+);
+
 defineExpose({
     init,
     isShow,
@@ -164,7 +234,9 @@ defineExpose({
     itemStyle,
     arrowColor,
     hoverClass,
-    arrow
+    itemName: itemName.value,
+    queryRect,
+    setShowState
 });
 </script>
 

package/components/u-column-notice/u-column-notice.vue

@@ -1,7 +1,17 @@
 <template>
-    <view class="u-notice-bar" :style="{ background: computeBgColor, padding: props.padding }" :class="[props.type ? `u-type-${props.type}-light-bg` : '']">
+    <view
+        class="u-notice-bar"
+        :style="{ background: computeBgColor, padding: props.padding }"
+        :class="[props.type ? `u-type-${props.type}-light-bg` : '']"
+    >
         <view class="u-icon-wrap">
-            <u-icon class="u-left-icon" v-if="props.volumeIcon" name="volume-fill" :size="props.volumeSize" :color="computeColor"></u-icon>
+            <u-icon
+                class="u-left-icon"
+                v-if="props.volumeIcon"
+                name="volume-fill"
+                :size="props.volumeSize"
+                :color="computeColor"
+            ></u-icon>
         </view>
         <swiper
             :disable-touch="props.disableTouch"
@@ -13,14 +23,33 @@
             class="u-swiper"
         >
             <swiper-item v-for="(item, index) in props.list" :key="index" class="u-swiper-item">
-                <view class="u-news-item u-line-1" :style="textStyle" @tap="click(index)" :class="['u-type-' + props.type]">
+                <view
+                    class="u-news-item u-line-1"
+                    :style="textStyle"
+                    @tap="click(index)"
+                    :class="['u-type-' + props.type]"
+                >
                     {{ item }}
                 </view>
             </swiper-item>
         </swiper>
         <view class="u-icon-wrap">
-            <u-icon @click="getMore" class="u-right-icon" v-if="props.moreIcon" name="arrow-right" :size="26" :color="computeColor"></u-icon>
-            <u-icon @click="close" class="u-right-icon" v-if="props.closeIcon" name="close" :size="24" :color="computeColor"></u-icon>
+            <u-icon
+                @click="getMore"
+                class="u-right-icon"
+                v-if="props.moreIcon"
+                name="arrow-right"
+                :size="26"
+                :color="computeColor"
+            ></u-icon>
+            <u-icon
+                @click="close"
+                class="u-right-icon"
+                v-if="props.closeIcon"
+                name="close"
+                :size="24"
+                :color="computeColor"
+            ></u-icon>
         </view>
     </view>
 </template>
@@ -56,7 +85,12 @@ defineOptions({ name: 'u-column-notice' });
 
 const props = defineProps(ColumnNoticeProps);
 
-const emit = defineEmits<{ (e: 'click', index: number): void; (e: 'close'): void; (e: 'getMore'): void; (e: 'end'): void }>();
+const emit = defineEmits<{
+    (e: 'click', index: number): void;
+    (e: 'close'): void;
+    (e: 'getMore'): void;
+    (e: 'end'): void;
+}>();
 
 /**
  * 计算字体颜色，如果没有自定义的，就用uview主题颜色

package/components/u-count-down/u-count-down.vue

@@ -1,13 +1,21 @@
 <template>
     <view class="u-countdown">
-        <view class="u-countdown-item" :style="[itemStyle]" v-if="props.showDays && (props.hideZeroDay || (!props.hideZeroDay && d != '00'))">
+        <view
+            class="u-countdown-item"
+            :style="[itemStyle]"
+            v-if="props.showDays && (props.hideZeroDay || (!props.hideZeroDay && d != '00'))"
+        >
             <view class="u-countdown-time" :style="[letterStyle]">
                 {{ d }}
             </view>
         </view>
         <view
             class="u-countdown-colon"
-            :style="{ fontSize: props.separatorSize + 'rpx', color: props.separatorColor, paddingBottom: props.separator == 'colon' ? '4rpx' : 0 }"
+            :style="{
+                fontSize: props.separatorSize + 'rpx',
+                color: props.separatorColor,
+                paddingBottom: props.separator == 'colon' ? '4rpx' : 0
+            }"
             v-if="props.showDays && (props.hideZeroDay || (!props.hideZeroDay && d != '00'))"
         >
             {{ props.separator == 'colon' && props.showHours ? ':' : '天' }}
@@ -19,7 +27,11 @@
         </view>
         <view
             class="u-countdown-colon"
-            :style="{ fontSize: props.separatorSize + 'rpx', color: props.separatorColor, paddingBottom: props.separator == 'colon' ? '4rpx' : 0 }"
+            :style="{
+                fontSize: props.separatorSize + 'rpx',
+                color: props.separatorColor,
+                paddingBottom: props.separator == 'colon' ? '4rpx' : 0
+            }"
             v-if="props.showHours"
         >
             {{ props.separator == 'colon' && props.showMinutes ? ':' : '时' }}
@@ -31,7 +43,11 @@
         </view>
         <view
             class="u-countdown-colon"
-            :style="{ fontSize: props.separatorSize + 'rpx', color: props.separatorColor, paddingBottom: props.separator == 'colon' ? '4rpx' : 0 }"
+            :style="{
+                fontSize: props.separatorSize + 'rpx',
+                color: props.separatorColor,
+                paddingBottom: props.separator == 'colon' ? '4rpx' : 0
+            }"
             v-if="props.showMinutes"
         >
             {{ props.separator == 'colon' && props.showSeconds ? ':' : '分' }}

package/components/u-count-to/u-count-to.vue

@@ -162,9 +162,16 @@ function count(ts: number) {
     let val: number;
     if (props.useEasing) {
         if (countDown.value) {
-            val = localStartVal.value - easingFn(progress, 0, localStartVal.value - Number(props.endVal), localDuration.value);
+            val =
+                localStartVal.value -
+                easingFn(progress, 0, localStartVal.value - Number(props.endVal), localDuration.value);
         } else {
-            val = easingFn(progress, localStartVal.value, Number(props.endVal) - localStartVal.value, localDuration.value);
+            val = easingFn(
+                progress,
+                localStartVal.value,
+                Number(props.endVal) - localStartVal.value,
+                localDuration.value
+            );
         }
     } else {
         if (countDown.value) {

package/components/u-divider/u-divider.vue

@@ -9,7 +9,11 @@
         }"
         @tap="onClick"
     >
-        <view class="u-divider-line" :class="[type ? 'u-divider-line--bordercolor--' + type : '']" :style="lineStyle"></view>
+        <view
+            class="u-divider-line"
+            :class="[type ? 'u-divider-line--bordercolor--' + type : '']"
+            :style="lineStyle"
+        ></view>
         <view
             v-if="useSlot"
             class="u-divider-text"
@@ -19,7 +23,11 @@
             }"
             ><slot
         /></view>
-        <view class="u-divider-line" :class="[type ? 'u-divider-line--bordercolor--' + type : '']" :style="lineStyle"></view>
+        <view
+            class="u-divider-line"
+            :class="[type ? 'u-divider-line--bordercolor--' + type : '']"
+            :style="lineStyle"
+        ></view>
     </view>
 </template>
 

package/components/u-dropdown/u-dropdown.vue

@@ -1,12 +1,25 @@
 <template>
     <view class="u-dropdown">
-        <view class="u-dropdown__menu" :style="{ height: $u.addUnit(height) }" :class="{ 'u-border-bottom': borderBottom }">
-            <view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)">
+        <view
+            class="u-dropdown__menu"
+            :style="{ height: $u.addUnit(height) }"
+            :class="{ 'u-border-bottom': borderBottom }"
+        >
+            <view
+                class="u-dropdown__menu__item"
+                v-for="(item, index) in menuList"
+                :key="index"
+                @tap.stop="menuClick(index)"
+            >
                 <view class="u-flex">
                     <text
                         class="u-dropdown__menu__item__text"
                         :style="{
-                            color: item.disabled ? '#c0c4cc' : index === current || highlightIndex == index ? activeColor : inactiveColor,
+                            color: item.disabled
+                                ? '#c0c4cc'
+                                : index === current || highlightIndex == index
+                                  ? activeColor
+                                  : inactiveColor,
                             fontSize: $u.addUnit(titleSize)
                         }"
                         >{{ item.title }}</text

package/components/u-dropdown-item/u-dropdown-item.vue

@@ -12,7 +12,12 @@
                             :key="index"
                             :title-style="{ color: modelValue == item.value ? activeColor : inactiveColor }"
                         >
-                            <u-icon v-if="modelValue == item.value" name="checkbox-mark" :color="activeColor" size="32"></u-icon>
+                            <u-icon
+                                v-if="modelValue == item.value"
+                                name="checkbox-mark"
+                                :color="activeColor"
+                                size="32"
+                            ></u-icon>
                         </u-cell-item>
                     </u-cell-group>
                 </view>