关于vue2使用teleport解决i18n国际化的问题

[fengxiaodong28]

问题描述

和 #1864 中遇到同样的场景

但是vue2版本的，如何使用teleport解决问题？

重现链接

无

重现步骤

无

预期行为

vue2版本中可以正常使用i18n

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox ...]
• X6 版本: [2.11.1 ...]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[x6-bot]

👋 @fengxiaodong28

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.
We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[lloydzhou]

使用 https://www.npmjs.com/package/vue2-teleport 改写一下 https://github.com/antvis/X6/blob/master/packages/x6-vue-shape/src/teleport.ts 或许可以

[lloydzhou]

如果觉得改写 x6-vue-shape有难度，可以参考https://github.com/lloydzhou/x6-html-shape写一个 vue2-teleport的版本，这个改起来比较简单。

[fengxiaodong28]

@lloydzhou 我这里试着改了一下，但是Object.keys(items)拿到的总是个空数组

import { h, reactive, markRaw } from '@vue/composition-api';
import { Fragment } from 'vue-fragment';
import Teleport from 'vue2-teleport';
import type { Graph } from '@antv/x6';
import type { VueShape } from '@antv/x6-vue-shape';
import Vue, { type VueConstructor } from 'vue';

let active = false;
const items = reactive<{ [key: string]: VueConstructor<Vue> }>({});

export function connect(id: string, component: VueConstructor<Vue>, node: VueShape, graph: Graph) {
    if (active) {
        // eslint-disable-next-line vue/one-component-per-file
        const vm = Vue.extend({
            provide: () => ({
                getNode: () => node,
                getGraph: () => graph
            }),
            render: () =>
                h(
                    Teleport,
                    {
                        attrs: {
                            to: '#test-teleport' // 测试
                        }
                    },
                    [
                        h(component, {
                            props: {
                                node,
                                graph
                            }
                        })
                    ]
                )
        });
        items[id] = markRaw(vm);
    }
}

export function disconnect(id: string) {
    if (active) {
        delete items[id];
    }
}

export function isGraphActive() {
    return active;
}

function getVNodes(): Promise<VNode[]> {
    return new Promise(resolve => {
        const VNodes = Object.keys(items).map(id => h(items[id]));
        resolve(VNodes);
    });
}

export async function getTeleport(): Promise<VueConstructor<Vue>> {
    active = true;

    const VNodes = await getVNodes();

    return new Promise(resolve => {
        // eslint-disable-next-line vue/one-component-per-file
        const vm = Vue.extend({
            render: () => h(Fragment, {}, VNodes)
        });
        resolve(vm);
    });
}

[fengxiaodong28]

@lloydzhou 另外这里好像不需要自己connet了，因为可以直接拿到shapeMaps ，值和items是一样的，不过在Object.kyes时也是个空的

import  { shapeMaps } from '@antv/x6-vue-shape'

export async function getTeleport(): Promise<VueConstructor<Vue>> {
    return new Promise(resolve => {
        const vm = Vue.extend({
            render: () => h(Fragment, {}, Object.keys(shapeMaps).map(id => h(shapeMaps[id])))
        });
        resolve(vm);
    });
}

[lloydzhou]

shapeMaps不是vue里面的reactive的变量，只是一个常量。所以在vue里面使用的时候，如果值变化了，组件并不会更新

[fengxiaodong28]

@lloydzhou 嗯嗯，后面还是用的items，但是没啥效果，渲染不到teleport上