iview抽屉(transfer = false,inner = true)显示在标签外部而不是在IE10内部

问题描述 投票:0回答:2

Chrome中的情况还可以,但IE11也是如此

使用“transfer”(false)和“inner”(true)设置,Drawer的工作方式如下:

https://run.iviewui.com/prdkRwyB

normally effect

使用IE10时出现问题

抽屉显示在标签外面而不是内部。

abnormally effect

抽屉的html代码已经放在其父标签之外

vue.js compatibility internet-explorer-10 iview
2个回答
0
投票

如果您使用F12开发人员工具检查HTML和CSS,您可以看到抽屉在iview卡体外,似乎此问题与iView有关,您可以联系他们并反馈此问题。

IE 11中的屏幕截图:

enter image description here

IE 10中的屏幕截图:

enter image description here


0
投票

我找到了问题解决方案。(iview 3.2.2)

的iView / SRC /指令/ tansfer-dom.js

此js文件处理DOM传输作业,这导致抽屉面板从父DOM传出。

inserted (el, { value }, vnode) {
        if ( el.dataset && el.dataset.transfer !== 'true') return false;
        el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
        const parentNode = el.parentNode;
        if (!parentNode) return;
        const home = document.createComment('');
        let hasMovedOut = false;

        if ( value !== false) {
            parentNode.replaceChild(home, el); // moving out, el is no longer in the document
            getTarget(value).appendChild(el); // moving into new place
            hasMovedOut = true
        }
        if (!el.__transferDomData) {
            el.__transferDomData = {
                parentNode: parentNode,
                home: home,
                target: getTarget(value),
                hasMovedOut: hasMovedOut
            }
        }
    },

如文件所示

if(value!== false)

第9行的判决是未被占用的。

更换下面的代码后,通过运行'npm run dist'重建iview,

if(value && value!== false)

抽屉在IE10中表现良好

© www.soinside.com 2019 - 2024. All rights reserved.