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>

喜歡的小伙伴可以關注我的微信公眾號“前端偽大叔”