vue-loading图

父组件给子组件src地址；

 columns(){
     return [
         {'title': '图片', 'key': 'img', render(h, {row}){
             return h(LoadingImg, {
                 props: {//把这些传给子组件
                     'w': 80,
                     'h': 45,
                     'src': 'http://192.168.2.233/carimages_small/' + row.id + '/view/' + row.img
                 }
             });
         }},
         {'title': '编号', 'key': 'id'},
         {'title': '品牌', 'key': 'brand'},
         {'title': '车系', 'key': 'series'},
         {'title': '颜色', 'key': 'color'},
         {'title': '售价', 'key': 'price'},
         {'title': '环保', 'key': 'exhaust'},
         {'title': '发动机', 'key': 'engine'},
         {'title': '燃料', 'key': 'fuel'}
     ];
 }

子组件

props: ['w', 'h', 'src'],
    methods: {
        change(){
            // 显示菊花
            this.isShowPin = true;
            // 创建一个虚拟图片
            var img = new Image();
            // 设置src
            img.src = this.src;
            // 监听load
            img.onload = () => {
                // 加载完毕之后替了
                this.picurl = this.src;
                // 隐藏菊花
                this.isShowPin = false;
            }
        }
    },
//创建前直接显示
created(){
    this.change();
},
 //改变后重新加载loading
 watch:{
      src(){
         this.change()
      }
}

loading

<template>
    <div style="position:relative;" :style="{'width': w + 'px', 'height': h + 'px'}">
        <img :style="{'width': w + 'px', 'height': h + 'px'}" :src="picurl" >
        <Spin fix v-show="isShowPin">
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
        </Spin>
    </div>
</template>

<script>
    export default {
        props: ['w', 'h', 'src'],
        data(){
            return {
                picurl: '',
                isShowPin: false
            };
        },
        methods: {
            change(){
                // 显示菊花
                this.isShowPin = true;
                // 创建一个虚拟图片
                var img = new Image();
                // 设置src
                img.src = this.src;
                // 监听load
                img.onload = () => {
                    // 加载完毕之后替了
                    this.picurl = this.src;
                    // 隐藏菊花
                    this.isShowPin = false;
                }
            }
        },
        created(){
            this.change();
        },
        watch:{
            src(){
                this.change()
            }
        }
    }
</script>

<style>
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
</style>

喜欢的小伙伴可以关注我的微信公众号“前端伪大叔”