Files
vue-mod-page/src/components/Receiver.ts

75 lines
2.8 KiB
TypeScript

import { defineComponent, nextTick, onMounted, ref, getCurrentInstance, isVue3, h, isVue2 } from 'vue-demi';
import { hh } from './DemiHelper';
import { InvokerContext } from '../types/InvokerContext';
export default defineComponent({
name: 'Receiver',
props: {
parentId: {
type: [Number, String],
default: () => 0
},
parentKey: {
type: String,
default: () => 'MES_MOD_INVOKERS'
}
},
setup(props) {
const instance = getCurrentInstance();
let invokerContext: InvokerContext = null!;
const renderVersion = ref(0);
console.log(`[Mod-Receiver] receiver setup, invokerId: ${props.parentId}, invokerKey: ${props.parentKey}`);
if (window.parent != window) {
const invoker = window.parent[props.parentKey][props.parentId];
invokerContext = invoker;
}
else {
throw new Error("[Receiver] 组件必须在iframe中使用");
}
const renderItems = ref(invokerContext.getRenderContext() ?? []);
onMounted(() => {
nextTick().then(() => {
console.log('mounted-finish');
if (!invokerContext['modContext']) {
invokerContext.initFinish({
get renderVersion() {
return renderVersion.value;
},
Update: function (): void {
console.log('[Mod-Receiver] force update', renderVersion.value);
renderVersion.value += 1;
renderItems.value = invokerContext.getRenderContext() ?? [];
instance?.proxy?.$forceUpdate();
},
// @ts-ignore
get refs() {
return instance?.proxy?.$refs;
}
});
}
});
});
return (createElem) => {
const render = isVue2 ? createElem : h;
try {
if (renderVersion.value < 0) return;
if (invokerContext.getRenderContext) {
const itemList = invokerContext.getRenderContext() ?? [];
// const list = renderContext(itemList);
console.log("[Mod-Receiver] rendering: ", itemList);
// @ts-ignore
return hh('div', undefined, itemList, render);
}
console.log("[Mod-Receiver] 'getRenderContext' method not found");
return hh('div', undefined, undefined, render);
}
catch (e) {
console.error("[Mod-Receiver] 渲染节点过程中出现错误", e);
}
};
}
});