前端-浏览器兼容

遇到的小问题

一、右键点击事件

右键获取鼠标位置，并把当前鼠标位置给右键事件弹窗

### // html

    
        实例1
    


// js

data() {
    return {
       isShow: false,
       left: 0,
       right: 0
    }
}
handleClick(e) {
    console.log(e) // e为当前源
    this.top = e.clientY
    this.left = e.clinetX
    this.isShow = true
}

上面的例子可以右键可以显示自定义的弹窗，但是

点击body关闭弹窗事件还没有，以及在谷歌和ie中，这个div定位的父级位置也不同，谷歌是基于dialog左上角为0点定位，ie浏览器是基于html左上角为0点定位。

跟踪鼠标点击位置，显示dom，点击body后隐藏。

// js
closeClick(e) {
    this.isShow = false
}
// 监听页面点击事件
watch: {
    isShow(value) {
        if (value) {
            document.body.addEventListener('click', this.closeClick)
        } else {
            document.body.removeEventListener('click', this.closeClick)
       }
    }
}

由于dom定位的基准不同，因此对不同的浏览器进行兼容

handleClick(e) {
    console.log(e) // e为当前源
    let boxDom = $('mode-diag .el-dialog').offset() // 获取dialog偏移量，在谷歌浏览器需减去偏移量
    let isChrome = navigator.userAgent.indexOf('Chrome') > -1;
    if (isChrome) {
        this.top = e.clientY - boxDom.top
        this.left = e.clinetX - boxDom.left
    } else {
        // 如果右键的位置有滚动条，ie得需要减去滚动条的距离
        let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft
        let scrollY = document.documentElement.scrollTop || document.body.scrollTop
        this.top = e.pageY - scrollY || e.clientY
        this.left = e.pageX - scrollX || e.clinetX
    }
    this.isShow = true
}

二、内容滚动条

页面的宽度由内容撑开，同时兼容浏览器。

1、inline-block


     内容内容。。。。


.demo {
    width: max-content; // ie不兼容
    display: inline-block
}

2、absolute


     内容内容。。。。


.demo {
    position: absolute;
    left: 10px;
    top: 10px;
    width: auto;
    height: auto;
}

三、vuex执行顺序

进入页面需调用搜索接口，获取到返回的数据，同时设置在vuex内，页面通过获取store数据作为接口的传参。

但是目前页面设置tab切换，重新设置vuex时，由于进入页面直接请求接口，通过mapState数据获取时，执行顺序比vuex快，因此再调接口时可添加this.$nextTick或者async await