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

【问题标题】：iview drawer(transfer=false, inner=true ) show in tag outside rather than inside in IE10iview 抽屉(transfer=false, inner=true) 在 IE10 中显示在外部而不是内部的标签中
【发布时间】：2019-02-23 04:07:47
【问题描述】：

情况在 Chrome 中还可以，在 IE11 中也可以

设置“transfer”(false) 和“inner”(true) 后，Drawer 的工作方式如下：

https://run.iviewui.com/prdkRwyB

normally effect

使用IE10时出现问题

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

abnormally effect

并且drawer的html代码已经放到了它的父标签之外

【问题讨论】：

标签： vue.js compatibility internet-explorer-10 iview

【解决方案1】：

如果你使用F12开发者工具检查HTML和CSS，可以看到抽屉在iview卡体之外，看来这个问题和iView有关，你可以联系他们反馈这个问题。

IE 11 中的截图：

IE 10 中的截图：

【讨论】：

thx，我找到了出现问题的代码（iview/src/directives/transfer-dom.js line 26）并生效。似乎是一个错误。

【解决方案2】：

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

iview/src/directives/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
            }
        }
    },

如文件所示

如果（值！== 假）

第 9 行的判断没有被挪用。

如下替换代码并运行'npm run dist'重建iview，

如果（值 && 值！== 假）

抽屉在 IE10 中显示良好

【讨论】：

ps：可以通过向项目添加“数据集”支持来解决问题。 IE10 只是不支持数据集属性