zoukankan      html  css  js  c++  java
  • 当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 ;
             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;
                        })
                    });
                },
  • 相关阅读:
    【转载】在Linux中使用VS Code编译调试C++项目
    【转载】Visual Studio 2015 for Linux更好地支持Linux下的开发
    【转载】ODBC, OLEDB, ADO, ADO.Net的演化简史
    【转载】OLE DB, ADO, ODBC关系与区别
    【转载】ADO,OLEDB,ODBC,DAO的区别
    【转载】Linux系统启动流程
    91. Decode Ways
    90. Subsets II
    89. Gray Code
    88. Merge Sorted Array
  • 原文地址:https://www.cnblogs.com/zytcomeon/p/13273326.html
Copyright © 2011-2022 走看看