Vue 頁面加載數(shù)據之前增加 `loading` 動畫

創(chuàng)建組件

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 ，在數(shù)據請求成功之后將變量改為 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 = {};                //參數(shù)                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 -------傳遞額參數(shù)-----","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;                    })                });            },