前端-浏览器兼容性

时间：2023-03-31 14:53:13 vue.js

遇到的小问题1.右键事件右键获取鼠标位置，将当前鼠标位置给右键事件弹窗###//html

Instance1

//jsdata(){return{isShow:false,left:0,right:0}}handleClick(e){console.log(e)//e是当前源this.top=e.clientYthis.left=e.clinetXthis.isShow=true}在上面的例子中，你可以右键显示一个自定义的弹窗，但是点击body关闭弹窗还没有窗口事件，而且在google和IE中，这个div定位的parentposition也是不一样的。Google定位在dialog左上角0点，iebrowser定位在html左上角0点。跟踪鼠标点击位置，显示dom，点击body后隐藏。//jscloseClick(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为当前sourceletboxDom=$('mode-diag.el-dialog').offset()//获取对话框的偏移量，GoogleChrome中减去偏移量letisChrome=navigator.userAgent.indexOf('Chrome')>-1;if(isChrome){this.top=e.clientY-boxDom.topthis.left=e.clinetX-boxDom.left}else{//如果右键位置有滚动条，即需要减去滚动条距离letscrollX=document.documentElement.scrollLeft||document.body.scrollLeft让scrollY=document.documentElement.scrollTop||document.body.scrollTopthis.top=e.pageY-scrollY||e.clientYthis.left=e.pageX-scrollX||e.clinetX}this.isShow=true}二、内容滚动条页面宽度随内容扩大，兼容浏览器。1.inline-block

内容内容。...

.demo{宽度：最大内容；//即不兼容display:inline-block}2.absolute

Content内容。...

.demo{位置：绝对；左：10px；顶部：10px；宽度：自动；height:auto;}3.vuex执行顺序进入页面需要调用搜索接口获取返回数据。同时在vuex中设置，页面获取store数据作为接口的参数。但是目前在设置页面切换tab和重置vuex时，由于进入页面时直接请求接口，获取mapState数据时执行顺序比vuex快，所以this.$nextTick也可以在调整接口的时候加上asyncawait。4.表单下拉框数据联动1.输入框/数据联动第二个输入框的数据依赖于第一个输入的值，获取输入框的值，为第一个值调用接口获取第二个输入框的数据。

0">

2.三级联动5.样式兼容colorie浏览器只能兼容RGB六位数字，比如#009900，但是谷歌浏览器可以支持多位数字#2d78f4#99003390六、表单pressenter提交事件在input输入框中输入内容，进入时页面会刷新，只有第一次会触发刷新页面，路由会有更多'？'如：https://segmentfault.com/a/11...方法一：在el-form标签中添加@submit.native.prevent，阻止事件：

query方法二：处理表单（取消默认提交）方法三：移除input框回车事件的方法clearSubmit(e){if(e.keyCode==13){####returnfalse}}技巧1.bindevent.stop：相当于JavaScript中的event.stopPropagation()，防止事件冒泡；.prevent：相当于JavaScript中的event.preventDefault()，阻止预设行为的执行（如果事件可以取消，取消事件事件，不停止事件的进一步传播）；.capture：与事件冒泡的方向相反，事件捕获是从外到内；.self：只触发自身范围内的事件，不包括子元素；.once：只会触发一次。2、跨域跨域：由于浏览器的限制，浏览器的同源策略导致的同源策略是指协议、域名、端口。解决方法：（1）jsonp支持get，不支持post（2）Nginx（3）cors（4）proxy（本地）*后面写一篇跨域的文章详细说明3、vue中的data是一个函数，如果data是一个对象，各个组件之间的数据会相互影响，为了保证组件的独立性和复杂性可用性，数据必须是一个函数。当一个组件被实例化时，计算机会分配一个新的内存地址，各个组件的数据和状态不会相互干扰，以保证数据的正确性。综上所述，PC端的项目需要兼容IE浏览器。只是遇到了几个需要兼容的地方，记录一下，方便以后查找。还有一些小知识记录一下，兼容的浏览器问题很多，以后遇到兼容的地方再补充~~~，(#^.^#)。