vue directives 自定义指令 svg 加载动画

                                        效果 

                                

 

js：文件

/**
 * Created by cld on 2019/7/31.
 */
// js 文件
import '../../assets/css/load.css';

import load from '../../assets/image/load.svg';

function getElementStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

export default {
    bind: (el, binding, vnode) => {

    },
    inserted: (el, binding, vnode) => {
        console.log(el, binding, vnode);
        const tempDiv = document.createElement('div');
        tempDiv.className = 'custom-loading';
        const round = document.createElement('div');
        round.innerHTML = `<img src=${load}>`;
        round.className = 'custom-loading-round';
        tempDiv.appendChild(round);
        el.loadingElement = tempDiv;
        const position = getElementStyle(el, 'position');
        if (position === 'absolute' || position === 'relative') {
            el.style.position = position;
        } else {
            el.style.position = 'relative';
        }
        if (binding.value) {
            el.appendChild(tempDiv);
        }
    },
    update: (el, binding) => {
        if (binding.value) {
            if (el.loadingElement.parentNode === null) {
                el.appendChild(el.loadingElement);
            }
        } else {
            if (el === el.loadingElement.parentNode) {
                el.removeChild(el.loadingElement);
            }
        }
    },
    unbind: (el) => {
        if (el.loadingElement.parentNode === el) {
            el.removeChild(el.loadingElement);
        }
        el.loadingElement = null;
    }
};

css文件

/* css 文件 */
.custom-loading {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
}

.custom-loading .custom-loading-round {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100px;
    height: 100px;
}

svg文件：

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<rect fill="#3A70DF" width="3" height="88.3541" transform="translate(0) rotate(180 3 50)">
  <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30" repeatCount="indefinite"></animate>
</rect>
<rect x="17" fill="#3A70DF" width="3" height="97.6459" transform="translate(0) rotate(180 20 50)">
  <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30" repeatCount="indefinite" begin="0.1s"></animate>
</rect>
<rect x="40" fill="#3A70DF" width="3" height="69.6459" transform="translate(0) rotate(180 40 50)">
  <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30" repeatCount="indefinite" begin="0.3s"></animate>
</rect>
<rect x="60" fill="#3A70DF" width="3" height="41.6459" transform="translate(0) rotate(180 58 50)">
  <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30" repeatCount="indefinite" begin="0.5s"></animate>
</rect>
<rect x="80" fill="#3A70DF" width="3" height="97.6459" transform="translate(0) rotate(180 76 50)">
  <animate attributeName="height" attributeType="XML" dur="1s" values="30; 100; 30" repeatCount="indefinite" begin="0.1s"></animate>
</rect>
</svg>