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

遇到的小问题

一、右键点击事件

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

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

四、表单下拉框数据联动

小常识

总结