當vue 頁面加載數據時顯示 加載loading

參考：https://www.jianshu.com/p/104bbb01b222

Vue 頁面加載數據之前增加 `loading` 動畫

創建組件

1、新建 .vue 文件： src -> components -> laoding -> index.vue

2、編輯 index.vue 文件

<template>
    <div class="loading"></div>
</template>

<script>
    export default {
        name: "loading"
    }
</script>

<style scoped>
    .loading {
        position: fixed;
        left: 20%;
        top: 20%;
        background: url('../../assets/images/load2.gif') center center no-repeat ;
        width: 50vw;
        height: 50vh;
        z-index: 1000;
    }

</style>

使用組件

通過自定義一個變量 isLoading 初始化為 true ，在數據請求成功之后將變量改為 false ，在 template 中通過變量來控制是否顯示隱藏，使用 vue 自帶的 過渡效果 增加用戶體驗

需要在全局的  css 中加入過渡需要的樣式 globle.css

.fade-enter,
.fade-leave-active {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.vue 文件使用代碼示例片段

                <el-table-column prop="salechnl" label="銷售渠道" width="200" align="center"></el-table-column>
                <el-table-column prop="riskname" label="險種名稱" width="200" align="center"></el-table-column>
            </el-table>
            <!-- 分頁 -->
<!--                        <div align="right" style="margin-top: 20px;margin-right:245px">-->
<!--                            <el-pagination-->
<!--                                    background-->
<!--                                    @size-change="handleSizeChange"-->
<!--                                    @current-change="handleCurrentChange"-->
<!--                                    :current-page.sync="currentPage"-->
<!--                                    :page-sizes="pageCount"-->
<!--                                    :page-size="5"-->
<!--                                    layout="sizes, prev, pager, next, jumper,total"-->
<!--                                    :total="count"-->
<!--                            ></el-pagination>-->
<!--                        </div>-->
            <transition name="fade">
                <loading v-if="isLoading"></loading>
            </transition>
        
        </div>

    </div>
</template>

<script>
    import http from '../../../assets/js/http'
    import Loading from '../../../components/loading/index'
    export default {
        components:{ Loading  },
        data() {
            return {

                isLoading: false,
                dData: [],
        methods: {
            loadData(){
                this.isLoading = true;
                var data = {};
                //參數
                let userInfo = Lockr.get('userInfo')
if (this.formInline.contract_start_date != '' ) {
                    data.contract_start_date = this.formatter(this.formInline.contract_start_date, "yyyy-MM-dd")
                } else {
                    data.contract_start_date = "";
                };
                if (this.formInline.contract_end_date != '' ) {
                    data.contract_end_date = this.formatter(this.formInline.contract_end_date, "yyyy-MM-dd")
                } else {
                    data.contract_end_date = this.formInline.contract_end_date
                };
                console.log("%c -------傳遞額參數-----","color:green");
                console.log(data);
                this.apiPost('underwritelist/queryunderwritelist', data).then((res) => {
                    console.log(res);
                    this.tableData=[];
                    this.handelResponse(res, (data) => {
                        console.log(res);
                        this.tableData = data.list;
                        this.count = data.total;
                        this.isLoading = false;
                    })
                });
            },