yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
124 lines (123 loc) • 4.13 kB
JavaScript
;
const vue = require("vue");
const hook = require("../../utils/hook");
const util = require("../util");
const _sfc_main = vue.defineComponent({
name: "ProIframe",
props: {
/** 是否支持内嵌缓存 */
keepAlive: Boolean,
/** 内嵌切换动画 */
transitionName: String,
/** 内嵌进入动画延迟时间 */
transitionDelay: Number,
/** 页签数据 */
tabData: {
type: Array,
required: true
},
/** 页签选中 */
tabActive: String
},
setup(props) {
const [startActiveTimer, stopActiveTimer] = hook.useTimer();
const data = vue.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 = util.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 = vue.computed(() => {
if (!props.tabActive || !data.value.length || !data.value.some((d) => d.id === props.tabActive)) {
return;
}
return props.tabActive;
});
const active = vue.ref(dataActive.value);
const handleLeave = (delay) => {
if (!dataActive.value) {
active.value = null;
return;
}
if (!delay) {
active.value = dataActive.value;
return;
}
startActiveTimer(() => {
vue.nextTick(() => {
active.value = dataActive.value;
});
}, delay);
};
vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
!_ctx.transitionName ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.data, (item) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: item.id
}, [
!item.refresh ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("iframe", {
key: 0,
"data-id": item.id,
src: item.src,
class: "ele-admin-iframe"
}, null, 8, _hoisted_2)), [
[vue.vShow, _ctx.active === item.id]
]) : vue.createCommentVNode("", true)
], 64);
}), 128)) : (vue.openBlock(), vue.createBlock(vue.TransitionGroup, {
key: 1,
appear: true,
name: _ctx.transitionName,
onAfterLeave: _cache[0] || (_cache[0] = ($event) => _ctx.handleLeave())
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data, (item) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: item.id
}, [
!item.refresh ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("iframe", {
key: 0,
"data-id": item.id,
src: item.src,
class: "ele-admin-iframe"
}, null, 8, _hoisted_3)), [
[vue.vShow, _ctx.active === item.id]
]) : vue.createCommentVNode("", true)
], 64);
}), 128))
]),
_: 1
}, 8, ["name"]))
]);
}
const proIframe = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = proIframe;