D浩DzD的博客

在Next.js中，beforePopState是一个可选的生命周期函数，用于在浏览器的历史记录发生更改之前执行一些操作。如果你想在Next.js中使用beforePopState，你可以在_app.js文件中定义一个名为beforePopState的函数，并将其作为props传递给你的页面组件。然后，在你的页面组件中，你可以通过props访问beforePopState函数，并在需要的地方调用它。需要注意的是，beforePopState只在客户端执行，不会在服务器端渲染时触发。

这样就不会有报跨域的错了，不过这样不能拿到get的数据，只能适用于get请求且不需要获取其返回的数据。在项目中，使用埋点的时候，因为使用的是外部提供的接口，所以直接请求的时候，前端会报跨域的问题，本着不麻烦后端的想法，怎怎么前端实现跨域而完全不需要后段的配合，这时候就想到了通过script标签，不受浏览器同源策略的影响的特性。使用上述方法请求的，其在控制台中网络里的请求类型为script而不是我们平常通过ajax请求的xhr类型。

方法，从而实现多个文件上传，但是有时候，我们希望，当上传多个文件的时候，只给后端发送一次请求，这样就需要先把el-upload的自动上传改为手动上传。注意上传文件接口的请求头中headers中的’Content-Type’要为’multipart/form-data’在使用element中的el-upload是时，当我们要上传多个文件时，el-upload内部会多次调用。使用自定义上传的接口，而不是使用*this.$refs.upload.submit();

在项目中使用函数循环的时候，因为数据中的字段都是重复了，然后突然好奇，如果使用随机函数生成的随机数是否可行，所以就使用随机函数生成一个随机值作为key。是因为当输入一个字符后，会触发模板编译，导致触发了随机函数，随机函数生成了一个新的随机数，vue就会重新渲染一个input框，所以就会自动失去焦点了。在循环中，创建了input输入框，当刚输入一个字符后就会自动失去焦点，导致不能连续输入。

element表格el-table组件实现虚拟滚动，解决数据量大渲染DOM过多而卡顿问题

vue中子组件需调用父组件通过异步获取的数据，而子组件不能及时获取到异步数据问题

通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。

在使用element中的table使用展开行功能时，官网给的示例中每行都可以展开，以及只能通过点击展开图标才能展开，但是需求中是点击整行展开，以及只有某些符合条件的行才有展开功能如下图所示通过设置type=“expand”和Scopedslot可以开启展开行功能，el-table-column的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的Scopedslot相同。...

uni-app微信小程序单个页面横屏以及使用uni-datetime-picker、popup出现弹窗后还能滚动页面的问题。catchtouchmove以及pageOrientation属性

打印问题，需求是跳转到打印页面时直接弹出浏览器打印模式弹窗，当用户点击打印或取消打印时再关掉该打印页面并且返回到目标窗口源（父）页面并重载页面数据afterprint

在项目中，有个需求就是用户可以选择其中的几个字段进行显示隐藏，也就是说tr中的td个数是不确定的，但是整个table确是固定宽度的，这就需要不管有几个td都要自适应去占满整个表格。如下图其实table本身是支持这种自适应的，但是有时候表格稍微复杂了，然后自己也不懂其中的一些特性就容易特别作死的自己去根据显示隐藏的个数手动去算每个表格所占的colspan属性，算到薅头发。例如下表格就是因为用户自定义选择几个字段不显示时而造成的页面乱了正常应该是下图注意红框中的字段是用户可以选择显示或隐藏的字段，而

在项目中遇到一个bug就是当点击某项出现下拉框时，点击除下拉框的任意处关闭下拉框，实现逻辑是出现下拉框的时候出现一个全屏的透明蒙层，这个蒙层的使用固定定位，z-index也设置到了999但是却发现右边的操作按钮的层级却要比这个全屏蒙层还要高，而这个操作按钮仅仅设置了一个相对定位而且也没有设置z-index。然后尝试着去掉操作按钮的相对定位发现是解决了操作按钮层级比蒙层还要高的问题，但是却一直不知道其原因。直到在网上找了一通发现，z-index还有一个规则从父（祖先）规则如果 A, B 节点都定义了

在项目中使用一个组件发现一个bug，当点击多条分录时会同时出现多个弹窗，正常情况下是点击弹窗外任意地方都会把关闭弹窗，从而始终只展示一个弹窗然后看组件代码发现是通过给document绑定一个事件把整个弹窗给关闭发现并没有效果，还以为是没给document绑定上事件，所以一直再找原因，到最后才发现是事件机制的原因，因为这是绑定在document上而发现在使用这个组件时他的祖先级组件不能使用.stop阻止冒泡，导致未触发该事件。给绑定document或其他需要事件冒泡的时候要注意别阻止默认事件。另

在项目中遇到一个问题，明明使用的定位是fixed定位，应该按照元素相对于屏幕视口（viewport）的位置来指定元素位置，但是却发现而是以他的祖先盒子为参照的上图中的list-box下拉框虽然是固定定位但是以他的祖先盒子类名为content的弹窗为参照的，所以导致下拉框错位了，正常应该是如下图那是什么原因影响到他的呢，之前一直以为固定定位就一直是以可视区域为参照进行偏移的，其实不然，它还会受一些其他因素的影响fixed ：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口

通常在为了使用户体验更好，在一些复选框或单选框和输入框中，会使用label包裹input这样用户只需点击后面文字，即可选中当前项。代码结构如下<ul class="table-main " @mouseenter.stop="myMouseenter(index)" :class="{'table-main-active':mouseIndex==index?true:false, 'table-main-actived':selectIndexArr.indexOf(index)!=-1

定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，<template> <div class="hello"> <div>

项目中为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box，元素的的尺寸等于 width/height。参考：MDN...

在做一个打印功能时，当一个表格数据过多而不能显示时，浏览器会自动进行分页处理，但是当一页显示不下一个表格时，自动分页会把一行数据暴力的切割显示在两页纸上。问题如下图：可以使用page-break-inside 属性用于设置是否在指定元素中插入分页符。有三个参数值描述auto默认。如果必要则在元素内部插入分页符。avoid避免在元素内部插入分页符。inherit规定应该从父元素继承 page-break-inside 属性的设置。注意： 您不能对绝对定位的元

伪元素是一个附加至css选择器末的关键词，允许你对被选择元素的特定部分修改样式。例如：使用伪元素after在类选择器box内容后面添加一些内容页面显示：在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 < iframe > 元素，可能具有自

filterfilter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。当过滤的是多维数组时，filter应该使用循环里面,你需要以那里的数据作为过滤条件，那么就在他所在的数组那个层级进行该数组过滤var ages = [32, 33, 16, 40];/** * @item 数组的每一项 * @index 索引 * @arr 过滤的数组本身 * 返回值是一个符合过滤条件的数组，不会对空数组进行过滤，也不会改变原数组 */const filterA

前段时间遇到使用get方法通过url拼接方式传递过去的参数打印出来是没问题的，单传给后端却死活不对。原来是因为特殊字符的原因。这些特殊字符不能直接通过url地址传过去，必须要进行转义成十六进制值。转义成十六进制值var str = 'hh#kk%kkk&'; str=str.replace(/\%/g,"%25"); str=str.replace(/\#/g,"%23"); str=str.replace(/\&/g,"%26"); // hh%23kk%2