yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
125 lines (124 loc) • 4.15 kB
JavaScript
import { defineComponent, computed, ref, watch, nextTick, openBlock, createElementBlock, Fragment, renderList, withDirectives, vShow, createCommentVNode, createBlock, TransitionGroup, withCtx } from "vue";
import { useTimer } from "../../utils/hook";
import { getIframeSrc } from "../util";
const _sfc_main = defineComponent({
name: "ProIframe",
props: {
/** 是否支持内嵌缓存 */
keepAlive: Boolean,
/** 内嵌切换动画 */
transitionName: String,
/** 内嵌进入动画延迟时间 */
transitionDelay: Number,
/** 页签数据 */
tabData: {
type: Array,
required: true
},
/** 页签选中 */
tabActive: String
},
setup(props) {
const [startActiveTimer, stopActiveTimer] = useTimer();
const data = computed(() => {
const list = [];
props.tabData.forEach((t) => {
var _a, _b;
const isAlive = ((_a = t.meta) == null ? void 0 : _a.keepAlive) !== false;
if (t.key && ((_b = t.meta) == null ? void 0 : _b.iframe) && isAlive) {
const src = getIframeSrc(t.fullPath, t.meta.iframe);
list.push({ id: t.key, src, refresh: t.refresh });
}
});
return list.sort((a, b) => a.id === b.id ? 0 : a.id > b.id ? 1 : -1);
});
const dataActive = computed(() => {
if (!props.tabActive || !data.value.length || !data.value.some((d) => d.id === props.tabActive)) {
return;
}
return props.tabActive;
});
const active = ref(dataActive.value);
const handleLeave = (delay) => {
if (!dataActive.value) {
active.value = null;
return;
}
if (!delay) {
active.value = dataActive.value;
return;
}
startActiveTimer(() => {
nextTick(() => {
active.value = dataActive.value;
});
}, delay);
};
watch(dataActive, () => {
stopActiveTimer();
if (active.value == null) {
handleLeave(props.transitionName ? props.transitionDelay : void 0);
} else if (!props.transitionName) {
handleLeave();
} else {
active.value = null;
}
});
return { active, data, handleLeave };
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _hoisted_1 = { class: "ele-admin-iframe-wrap" };
const _hoisted_2 = ["data-id", "src"];
const _hoisted_3 = ["data-id", "src"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", _hoisted_1, [
!_ctx.transitionName ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.data, (item) => {
return openBlock(), createElementBlock(Fragment, {
key: item.id
}, [
!item.refresh ? withDirectives((openBlock(), createElementBlock("iframe", {
key: 0,
"data-id": item.id,
src: item.src,
class: "ele-admin-iframe"
}, null, 8, _hoisted_2)), [
[vShow, _ctx.active === item.id]
]) : createCommentVNode("", true)
], 64);
}), 128)) : (openBlock(), createBlock(TransitionGroup, {
key: 1,
appear: true,
name: _ctx.transitionName,
onAfterLeave: _cache[0] || (_cache[0] = ($event) => _ctx.handleLeave())
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (item) => {
return openBlock(), createElementBlock(Fragment, {
key: item.id
}, [
!item.refresh ? withDirectives((openBlock(), createElementBlock("iframe", {
key: 0,
"data-id": item.id,
src: item.src,
class: "ele-admin-iframe"
}, null, 8, _hoisted_3)), [
[vShow, _ctx.active === item.id]
]) : createCommentVNode("", true)
], 64);
}), 128))
]),
_: 1
}, 8, ["name"]))
]);
}
const proIframe = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
proIframe as default
};