关于前端:前端浏览器兼容

遇到的小问题

一、右键点击事件

右键获取鼠标地位，并把以后鼠标地位给右键事件弹窗

### // html
<div class="item" @contextmenu.prevent="handleClick($event)">
    <ul v-show="isShow" :style="{left: left + 'px',top: top + 'px'}" class="contextmenu" style="background: red; position: fixed">
        <li>实例1</li>
    </ul>
</div>

// 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

<div class="demo">
     <p>内容内容。。。。</p>
</div>

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

2、absolute

<div class="demo">
     <p>内容内容。。。。</p>
</div>

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

三、vuex执行程序

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

然而目前页面设置tab切换，从新设置vuex时，因为进入页面间接申请接口，通过mapState数据获取时，执行程序比vuex快，因而再调接口时可增加this.$nextTick或者async await

四、表单下拉框数据联动

小常识

总结