赵又又的博客

原创 vue中列表实现漏出即曝光

3、在页面监听滚动的地方调用exposureView方法即可，注意：因为是滚动时调用，会导致首屏没有默认上报，在mounted生命周期中调用一下就可以。实现思路：给需要曝光的元素添加指定属性，监听滚动停止时获取含有该指定属性的元素，如果在可视区域内就上报，已上报过的不再重复上报。1、列表中的元素添加指定属性，属性值为上报埋点搜索需要的参数。场景：滚动翻页的列表中的数据滚动到可视区域内立即曝光埋点。2、曝光埋点实现方法。

原创 vue处理下载文件接口返回流或json格式都存在的数据

当下载文件接口在请求成功时返回流，失败时返回json格式的报错数据需要提示出来时怎么处理？

原创 vue3实现遮罩层外部禁止页面滚动，内部可滚动

直接在遮罩层添加 @touchmove.prevent 可以实现禁止页面滚动，但是同时遮罩层内部也无法滚动了。方法一：(此方法可以实现需求，但是关闭遮罩层后主页面会滑动到顶部，无法回到原来的浏览位置) function mo = function(e){ e.preventDefault(); }; //禁止滚动 stop(){ document.body.style.overflow='hidden'; documen

原创 el-tree实现禁用与反显选中状态以及指定层级横向样式

最近项目中用el-tree时我遇到一个问题，禁用功能和反显选中状态的功能不能同时生效，一般来说，实现反显选中状态只需要设置指定的node-key就可以，但是当设置禁用的时候，反显选中就失效了。找了半天原因，想到可能是渲染的时候先被禁用了，导致反显选中无法赋值，所以出现上面的问题。先看效果吧知道原因了就好办了，直接上代码吧<el-tree ref="tree" :data="provinceData" show-checkbox :render-content.

原创 iframe与父元素之间的传值方式

1、iframe向父元素传值iframe中的代码var height = calcPageHeight(document);window.parent.postMessage({ message: 'getCrossHeight', height,}, '*');父元素监听window.addEventListener('message', function(e){ if (e.data.message === 'getCrossHeight') { let

原创 js处理接口返回的文件流

直接看代码吧，图一是封装的调接口的方法，设置了responseType: 'blob'，这个设置很重要，如果没设置的话可能会导致文件下载后无法正常打开。图二exportExcel方法的第一个参数为接口返回的文档流格式的数据，第二个参数是下载的文件的文件名export function postExportData(params) { // 其中responseType的设置很重要 return get('/orderManagement/exportData', params, { respo

原创 vue中wangeditor富文本框的使用方法

vue中使用的富文本插件最多的就是 wangeditor 和 vue-quill-editor 。开始我用的是 vue-quill-editor，后来又换成了wangeditor。为啥呢？因为 vue-quill-editor 无法使用表格，而且不能汉化，即使使用了官方提供的改变css的那套方法也感觉很丑。先看看使用 wangeditor 之后的页面效果吧再看看代码里如何使用的吧<el-form-item label="内容：" prop="content" ref="conten.

原创 vue上传图片前的校验（格式、大小、尺寸）

先看html部分 ：<el-upload class="avatar-uploader" action="" accept=".jpg,.jpeg,.png,.JPG,.JPEG,.gif" :http-request="uploadImg" :before-upload="beforeAvatarUpload" :show-file-list="false" list-type="picture"> <img v-if="mergeData.url

原创 vue3.0+antdVue2.0结合插槽slots的使用方式

首先在table中<a-table ...><template #action="{ record }"> <span class="action"> <a>移除</a> </span></template></a-table>const columns = [{title: '操作',key: 'action',slots: { custo...

原创 scrollbar自定义样式

在移动端的开发中经常遇到横向滚动的样式，有时候UI对滚动条的样式有要求，系统自带的滚动条样式就不能满足需求了，下面来分享下手动实现滚动条样式的简单写法。先看效果图吧核心就是1、隐藏系统自带样式；2、计算好滚动条长度的比例和滚动的比例。下面看代码重要的标红的注释，比例计算好了就成功一半了????...

原创 解决vue中新增属性视图不更新的问题

最近在写vue的项目，因为不太熟悉所以踩了坑，这两天写项目两次遇到了同一个问题，记录一下。测试环境有个模块接口数据返回了，但页面上没有展示，我本地跑的完全正常，部署到测试就出问题了（还好不是部署线上的时候才出现这个问题）。因为本地没问题，所以排查起来很困难，仔细分析代码发现一个诡异之处怀疑可能是此处出了问题。场景是这样的，有个数组对象中动态新增一个属性（注意是新增），打印的log日志是看到数据变化了，但是视图没有更新。知道问题在哪就好办了，解决方法如下：this.$set(a,b,c) =.

原创 antd动态删除/增加form表单带来的bug

需求背景：上传一组图片，每张图片都可配置跳转链接开关，类型，url地址等，可编辑。图片删除后对应的配置都变为初始状态。由于上传图片用的公共组件，此组件内不能插入其他代码，所以我就直接遍历了图片组的长度，动态生成N个配置项。删除图片的操作是在公共组件传的方法内，删除图片的同时要删除对应的配置项，所以在这个方法内要写删除配置项的代码。实现很好实现，直接匹配图片url与配置项里的图片url是否相同。我遇到的问题是删除form表单某一项后再添加一组新的表单，会把上次删除了的value值带出来。删除操

原创 小程序或h5中textarea标签层级过高带来的bug

在写移动端项目的时候，不论小程序还是h5总会遇到textarea标签内容不随屏幕滚动的问题，这是因为textarea层级过高，网上查了很多解决办法，比如给标签设置fixed属性啊，或者设置样式overflow: scroll啊，都不管用。所以用了一个相当于取巧的办法绕过了这个坑。总体思想就是焦点聚焦的时候展示textarea标签，失焦的时候用view标签代替textarea标签，再把value...

原创 react中父组件一键获取子组件数据

通常我们在写页面的时候，会碰到页面内容较多，需要分组件来写的情况，这样就会碰到下面的场景，父组件中有个提交按钮，点击提交的时候会需要获取到子组件的数据，有个方法很好用父组件：引用子组件的地方父组件的提交按钮方法里子组件：...

转载 (...)ES6三点扩展运算符

来源：https://www.cnblogs.com/rlann/p/7222150.html (...)ES6三点扩展运算符 扩展运算符将一个数组转为用逗号分隔的参数序列console.log(...[a, b, c]) // a b c 用于：1 将一个数组，变为参数序列 let add = (x, y) =&gt...

转载 【javascript】详解javaScript的深拷贝

来源：https://blog.csdn.net/qq_39207948/article/details/81067482 ...

原创 url传中文的转码问题

利用js下的一个方法可以解决decodeURI（‘XXX）

原创 移动端和小程序中有关scrollTop的不同用法

需求是这样的：点击屏幕右侧的字母，页面会滑动到指定字母的区域。类似微信中通讯录的页面，效果图如下移动端中用的js可以获取document,代码如下小程序中用的typeScript,不能获取document,所以不能采用上边的方法，具体代码见下...

原创 数组元素求和，最大值，最小值，去重，找差异项，js小数点失精问题

求和：const sum = arr.reduce((prev, cur) => {return Number(prev || 0) + Number(cur || 0);});最大值：let maxMoney = eval(`Math.max(${moneyArr.toString()})`)；最小值：let minMoney = eval(`Math.min(${mone...

原创 react antv f2分组柱状图实现平移

本周在开发柱状图平移的时候遇到一些问题，普通柱状图可以实现平移的效果，分组柱状图会出现平移的时候会把剩下的数据全部展示出来，通过查看antv f2文档，发现实现平移效果的重点是设置横坐标的values属性，如图所示，histogramList是数据源，originDates是需要展示在当前视口的部分数据。踩坑的原因是分组柱状图是一个横坐标下需要展示多组数据，服务端返回的数据格式跟f2柱状图需要的格...

原创 解决input框弹起滑到屏幕可见区域的问题

setTimeout(() =&gt; { // 让当前的元素滚动到浏览器窗口的可视区域内 // this.customFocusInst.scrollIntoView(true); // 也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动 this.customFo...

转载 flex布局聊天界面

原文地址：https://www.cnblogs.com/diligenceday/p/5985903.html效果图：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&a

转载 react 子组件更新父组件状态

转自：https://blog.csdn.net/yesyoucan_/article/details/82531779 react 子组件更新父组件状态class Father extends Component { construtor(props){ super...

转载 如何转载别人的文章（请标明出处）

转载链接：https://blog.csdn.net/Silence_Sep/article/details/81119683 起意&nbsp; &nbsp; &nbsp; &nbsp;看到一篇不错的博客，想转载但是不会（没有转载键），网搜发现没有Chro...

转载 最新BAT前端面试题

转载链接：https://blog.csdn.net/mm782642353/article/details/87886665#commentBox BAT面试对基础比较看重，然后需要你有两三个比较好的项目，一面重视面试者对前端基础的把握，还要手写代码，不过不难，二面部门的leader面，这一面...

原创 react下“添加”按钮循环添加一组新的数据

原创 保留两位小数的方法

保留两位小数，缺位补0 returnFloat = (value) =&gt; { if (value == null || value == undefined) { value = 0; } value = Math.round(parseFloat(value)*100)/100; let xsd = value.toString().sp...

原创 react下批量导入数据无法覆盖原数据中的input值的问题（利用antd design插件）

最近在写一个需求，要求批量导入数据后要把原来的列表数据全部覆盖，包括导入的数据与原来的列表数据重复的值。如果导入的数据中与原来列表的数据没有重复的值，那就重新setState一下就好；那如果列表中有数据A，并且A的一个属性通过input编辑过，此时再批量导入数据包含数据A的话，那就不能覆盖已经编辑过的A的那个属性。当时很不解，我在重新setState完之后能抓到正确的数据，可是页面就是不渲染。...

原创 react中使用G2图表踩到的坑

最近在写有图表的页面，饼图、折线图都有。用的插件是蚂蚁金服下的一款开源可视化的前端组件库G2。比较好上手，官方文档也写的清清楚楚，只是踩了个小小的坑。按照官方文档写下来，设置了图表的宽度自适应。然而页面在刚开始刷新的时候，canvas超出了屏幕的宽度，如果改变浏览器的大小，forceFit: true这个属性会自适应屏幕的宽度，这时图表的大小是正常的。询问大神可能是G2在计算屏幕宽度的...

原创 react中父组件调用子组件的方法

有个场景是这样的，父组件中有个按钮，点击按钮弹出弹框，弹框是在子组件里，弹框弹出时需要请求接口展示列表数据，每次点击父组件的按钮时都需要请求数据。所以就需要在父组件中调用子组件的方法。首先父组件的代码：子组件中的代码：...

原创 antd Table中插入可编辑的单元格

最近遇到一个需求，要求表格中某一属性是可以手动改变的。看了antd Table 的官方组件，发现不太灵活，所以自己动手写了一下。实现的思路大同小异，在columns中插入Input，很简单的，直接render中返回就好，只是中间遇到小插曲，改变一个input的值所有的都跟着改变，原来是都定义成了同一个变量，后来家里一个动态的后缀。具体代码见贴图 ...

原创 modal中的input输入框自动获取焦点的问题

在开发项目的过程中，有个需求是这样的，点击按钮，弹出一个modal框，要求modal框里的input自动获取焦点。input输入框单纯的自动获取焦点是很简单的，只需要一个属性autofocus="autofocus"就够了。然而，这个属性触发的时机是页面刚加载的时候，需求是每次弹出modal都需要自动获取焦点。此时又想到了另一种方法--给input设置ref属性。具体方法是这个样子的 ：给...

原创 关于保留小数位以及报错的问题

今天因为需求要处理一个字段，要求四舍五入保留小数点后两位数。于是，我想到了js中的一个函数--toFixed(n)。用法很简单，直接就可以xxx.toFixed(2)就可以了。然而，想象很美好，在用的过程中却报错了，报错信息是什么呢？xxx.toFixed is not a function.左思右想也没发现有错啊，这个函数的使用条件是xxx必须为number类型，循环出来的xxx确实是数字啊。没...

原创 有关react中每个按钮控制自己的div显示与隐藏问题

题目虽然带着“react”，可是实现的思路跟react没有关系，只不过项目用的框架是react而已。需求是这样的，页面一加载的时候从请求的接口中循环出嵌套三层的数组，当然，这不是重点，重点是想要实现的效果是点击每个标题旁的按钮，能对应显示标题下面的内容。效果如图实现的思路就是当点击按钮时，给最外层数组的对象添加一个boolean值，通过每次点击按钮使这个值变为与上次相反的值，来实现自元素显示与隐藏...

原创 关于多行文本超出显示省略号所遇到的问题

今天我遇到的一个算是简单又不简单的问题，为什么说简单呢？是因为实现思路很简单，实现方法不管是自己写也好，还是网上搜也好都能搜出好几种方法。那不简单的地方呢，就是明明我已经按照网上说的代码来写了，可是实现不了我想要的效果，甚至这样的效果我以前做的项目中已经实现了，同样的代码搬到这里就不管用了。让人很是费解。我所遇到的问题就是，当文本超出容器的大小时，让最后一行的文本末尾显示省略号。怎么样，听起来很简...

原创 git常用指令

git是我们经常用到的一种代码托管工具，用起来十分便捷，可是对于我这种记忆力堪忧的人来说，要记住那么多的指令可能要花费一些时间了。所以，在这里我总结一下git的常用指令。笔记有些乱，只当是给自己的一次记录的经验。大神可略过。。。...

原创 关于vue中的跨域问题

我们在使用vue框架的时候，难免遇到跨域的问题。当然解决跨域问题的方法有很多，那我就说说在我遇到跨域问题的时候是如何解决的吧。在我请求一个后台接口的时候，浏览器报错，报错的信息就是告诉我跨域了，没法弄了。然而这时候又不能让后台修改代码，只好在前端设置相应的代码了。OK，不废话了，直接说如何解决问题吧。就是在config下的index.js中配置相关代码。具体代码见下图其中，target是接口域名，...

原创 用vue+elementUI框架的分页器遇到的坑点

前不久我在做项目的时候，用到的技术是vue+elementUI框架，其中在引用Pagination分页器组件时踩了一些坑，现在我来具体说一下我遇到的问题以及解决的办法。我想实现的效果是页面上有两个不同的查询按钮1和2，根据搜索条件的不同查询到的结果也是不同的，分别点击两个按钮时调起的是同一个接口，效果如下搜索结果出来后，这里我引用了分页器组件，如图分页器的原理是，当点击下一页时，会触发搜索的接口，...

转载 React map生成元素添加点击事件绑定this

问题使用.map(function(Item)生成元素添加onClick事件：onClick={this.provinceChange.bind(this, "99")}时，前台访问报错：Uncaught TypeError: Cannot read property 'provinceChange' of undefined。provinceChange是在class中定义的方法：provinc...

转载 正则表达式的总结

一、校验数字的表达式 1 数字：^[0-9]*$ 2 n位的数字：^\d{n}$ 3 至少n位的数字：^\d{n,}$ 4 m-n位的数字：^\d{m,n}$ 5 零和非零开头的数字：^(0|[1-9][0-9]*)$ 6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$ 7 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2}...