vue操作dom

104 阅读1分钟
 let allList = this.$refs.ulParent.getElementsByTagName("li");
            for (var i = 0; i < maxlen; i++) {
              allList[i].style.display = "none";
            }
            
            this.$nextTick(function () {
        var container = this.$el.querySelector(".RightCont");
        container.scrollTop = container.scrollHeight;
      });
  在axios的拦截器中配置全局loading时。如果加上target属性时。调用close方法关闭loading时。close方法将失效

原因:

    加上target标签时候loading将不是一个单例。

解决方式:

let loadinginstance, loadCount = 0,
    loadingArray=[];

axios.interceptors.request.use(
    config => {
        loadCount++
        loadinginstance = Loading.service({
            target: '.content-wrapper',
            fullscreen: false,
            text: '正在加载中.....',
            background: 'rgba(0, 0, 0, 0.7)'
        })
        loadingArray.push(loadinginstance)
        console.log('拦截器请求拦截222222')
        return config;
    },
    err => {
        loadCount--
        if (!loadCount) {
            loadingArray.forEach(item=>item.close())
        }
        return Promise.reject(err);
    });

// http response 拦截器

axios.interceptors.response.use(data => { // 响应成功关闭loading
    console.log('拦截器返回的数据',data)
    loadCount--
    let msg = ""
     if (!data.data.success) {
        msg = data.data.errorMsg
        Message({
            message: msg,
            type: 'warning'
        });
    } 
    if (!loadCount) {
        loadingArray.forEach(item=>item.close())
    }
    return data
}, error => {
    loadCount--;
    if (!loadCount) {
        loadingArray.forEach(item => item.close())
    }
    Message.error('网络异常,请稍后再试')
    return Promise.reject(error)
})