iview drawer(transfer=false, inner=true ) 在 IE10 中显示在标签外部而不是内部
iview drawer(transfer=false, inner=true ) show in tag outside rather than inside in IE10
情况在 Chrome 和 IE11
中都可以
设置“transfer”(false) 和“inner”(true) 后,Drawer 的工作方式如下link:
normally effect
使用IE10时出现问题
抽屉标签显示在外面而不是里面。
abnormally effect
并且抽屉的html代码已被放置在其父标签之外
如果用F12开发者工具查看HTML和CSS,可以看到抽屉在iview卡体外面,看来这个问题和iView有关,你可以联系他们反馈这个问题。
IE 11 中的截图:
IE 10 中的截图:
我找到了问题解决方案。(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
}
}
},
如文件所示
if ( value !== false)
第9行判断不合理
替换如下代码后重建iview 运行 'npm run dist',
if( value && value !== false )
抽屉在IE10中显示良好
情况在 Chrome 和 IE11
中都可以设置“transfer”(false) 和“inner”(true) 后,Drawer 的工作方式如下link:
normally effect
使用IE10时出现问题
抽屉标签显示在外面而不是里面。
abnormally effect
并且抽屉的html代码已被放置在其父标签之外
如果用F12开发者工具查看HTML和CSS,可以看到抽屉在iview卡体外面,看来这个问题和iView有关,你可以联系他们反馈这个问题。
IE 11 中的截图:
IE 10 中的截图:
我找到了问题解决方案。(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
}
}
},
如文件所示
if ( value !== false)
第9行判断不合理
替换如下代码后重建iview 运行 'npm run dist',
if( value && value !== false )
抽屉在IE10中显示良好