song-ui-u/lib/components/collapse/src/collapse-item.cjs.map

vue3 + js的PC前端组件库

{"version":3,"file":"collapse-item.cjs","sources":["../../../../../packages/components/collapse/src/collapse-item.jsx"],"sourcesContent":["import {\r\n  defineComponent,\r\n  inject,\r\n  onMounted,\r\n  provide,\r\n  ref,\r\n  computed,\r\n  nextTick,\r\n} from \"vue\";\r\nimport { COLLAPSE_KEY, COLLAPSE_ITEM_KEY } from \"../constants\";\r\nimport { useNamespace } from \"@ui-library/hook\";\r\n\r\nexport default defineComponent({\r\n  name: \"x-collapse-item\",\r\n\r\n  props: {\r\n    name: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    title: {\r\n      type: String,\r\n      default: \"\",\r\n    },\r\n    disabled: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    icon: {\r\n      type: String,\r\n      default: \"\",\r\n    },\r\n  },\r\n\r\n  setup(props, { slots }) {\r\n    const collapseCtx = inject(COLLAPSE_KEY);\r\n    const contentHeight = ref(\"0px\");\r\n    const contentRef = ref(null);\r\n    const isTransitioning = ref(false);\r\n\r\n    provide(COLLAPSE_ITEM_KEY, {\r\n      props,\r\n    });\r\n\r\n    const ns = useNamespace(\"collapse-item\");\r\n\r\n    // 判断当前项是否激活\r\n    const isActive = computed(() => {\r\n      return collapseCtx?.isItemActive(props.name);\r\n    });\r\n\r\n    // 处理标题点击事件\r\n    const handleHeaderClick = () => {\r\n      if (props.disabled) return;\r\n      collapseCtx?.handleItemClick(props.name);\r\n    };\r\n\r\n    // 设置内容高度\r\n    const setContentHeight = async () => {\r\n      if (!contentRef.value) return;\r\n\r\n      isTransitioning.value = true;\r\n\r\n      if (isActive.value) {\r\n        // 展开：先设置高度为 auto，获取实际高度\r\n        contentHeight.value = \"auto\";\r\n        await nextTick(); // 等待 DOM 更新\r\n        const height = contentRef.value.offsetHeight; // 获取实际高度\r\n        contentHeight.value = \"0px\"; // 设置初始高度为 0\r\n\r\n        // 触发重绘\r\n        await new Promise((resolve) => requestAnimationFrame(resolve));\r\n        contentHeight.value = `${height}px`; // 设置为目标高度\r\n      } else {\r\n        // 收起：先获取当前高度，然后设置为 0\r\n        const height = contentRef.value.offsetHeight; // 获取当前高度\r\n        contentHeight.value = `${height}px`; // 设置为当前高度（防止跳变）\r\n\r\n        // 触发重绘\r\n        await new Promise((resolve) => requestAnimationFrame(resolve));\r\n        contentHeight.value = \"0px\"; // 设置为 0\r\n      }\r\n\r\n      // 过渡结束后，如果是展开状态，设置高度为 auto\r\n      setTimeout(() => {\r\n        isTransitioning.value = false;\r\n        if (isActive.value) {\r\n          contentHeight.value = \"auto\"; // 允许内容自由扩展\r\n        }\r\n      }, 300); // 300ms 对应 CSS 中的 transition-duration\r\n    };\r\n\r\n    // 监听激活状态变化\r\n    const watchActiveChange = computed(() => {\r\n      setContentHeight();\r\n      return isActive.value;\r\n    });\r\n\r\n    onMounted(() => {\r\n      collapseCtx?.setCollapseItems({ name: props.name, title: props.title });\r\n      // 初始化时设置内容高度\r\n      if (isActive.value) {\r\n        nextTick(() => {\r\n          contentHeight.value = \"auto\";\r\n        });\r\n      }\r\n    });\r\n\r\n    return () => {\r\n      // 强制计算watchActiveChange，以便在激活状态变化时触发setContentHeight\r\n      const _ = watchActiveChange.value;\r\n\r\n      return (\r\n        <div class={[ns.b(), isActive.value ? ns.is(\"active\") : \"\"]}>\r\n          <div\r\n            class={[\r\n              ns.e(\"title\"),\r\n              isActive.value ? ns.is(\"active\") : \"\",\r\n              props.disabled ? ns.is(\"disabled\") : \"\",\r\n            ]}\r\n            onClick={handleHeaderClick}\r\n          >\r\n            {props.icon && <i class={props.icon}></i>}\r\n            {props.title || slots.title?.()}\r\n            <i class={[ns.e(\"title-arrow\"), \"x-icon-arrow-right\"]}></i>\r\n          </div>\r\n          <div\r\n            class={ns.e(\"content\")}\r\n            style={{ height: contentHeight.value }}\r\n            ref={contentRef}\r\n          >\r\n            <div class={ns.e(\"content-box\")}>{slots.default?.()}</div>\r\n          </div>\r\n        </div>\r\n      );\r\n    };\r\n  },\r\n});\r\n"],"names":["defineComponent","name","props","type","String","required","title","default","disabled","Boolean","icon","setup","slots","collapseCtx","inject","COLLAPSE_KEY","contentHeight","ref","contentRef","isTransitioning","provide","COLLAPSE_ITEM_KEY","ns","useNamespace","isActive","computed","isItemActive","handleHeaderClick","handleItemClick","setContentHeight","value","nextTick","height","offsetHeight","Promise","resolve","requestAnimationFrame","setTimeout","watchActiveChange","onMounted","setCollapseItems","_createVNode","b","is","e"],"mappings":"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"}