共计 1653 个字符,预计需要花费 5 分钟才能阅读完成。
遇到的小问题
一、右键点击事件
右键获取鼠标地位,并把以后鼠标地位给右键事件弹窗
### // 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
四、表单下拉框数据联动
小常识
总结
正文完