element axios中loading的使用

vue+element
网页加载loading提示

 getServerData: function () {
            _self = this
           var rload = this.openloading()
           axios.post('url', {
                    paramter:paramter
                }).then(function (response) {
                    _self.data=response.data
                    rload.close()
                }).catch(function (error) {
                    console.log(error);
                })
},
openloading: function () {
                const loading = this.$loading({           // 声明一个loading对象
                    lock: true,                             // 是否锁屏
                    text: '正在加载...',                     // 加载动画的文字
                    spinner: 'el-icon-loading',             // 引入的loading图标
                    background: 'rgba(0, 0, 0, 0.3)',       // 背景颜色
                    target: '.sub-main',                    // 需要遮罩的区域
                    body: true,
                    customClass: 'mask'                     // 遮罩层新增类名
                })
                setTimeout(function () {                  // 设定定时器,超时100S后自动关闭遮罩层,避免请求失败时,遮罩层一直存在的问题
                    loading.close();                        // 关闭遮罩层
                }, 100000)
                return loading;
            },


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,199评论 0 1
  • 简说Vue (组件库) https://github.com/ElemeFE/element" 饿了么出品的VUE...
    Estrus丶阅读 1,812评论 0 1
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    35eeabfa0772阅读 3,311评论 7 12
  • UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组...
    鲁大师666阅读 43,529评论 5 97
  • Vue2.0+组件库总结 UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基...
    szch阅读 1,992评论 1 52