[Vuejs]-Iview drawer(transfer=false, inner=true ) show in tag outside rather than inside in IE10

0πŸ‘

βœ…

I found the problem solution.(iview 3.2.2)

iview/src/directives/tansfer-dom.js

This js file handle the DOM transfer job, which lead to drawer panel transfer out of the parent 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
            }
        }
    },

As file show

if ( value !== false)

The judgment on Line 9 is unappropriated.

After replacing code as below and rebuild the iview by running β€˜npm run distβ€™οΌŒ

if( value && value !== false )

drawer show well in IE10

0πŸ‘

If you use F12 developer tools to check the HTML and CSS, you can see that the drawer is outside the iview card body, it seems that this issue is related to iView, you could contact them and feedback this issue.

The screenshot in IE 11:

enter image description here

The screenshot in IE 10:

enter image description here

Leave a comment