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;
            },


你可能感兴趣的:(element axios中loading的使用)