小知识点
摘要：1.
阅读全文
posted @ 2024-12-12 14:57
随笔分类 - 实际开发遇到的问题-解决方案
递归深拷贝导致浏览器网络请求中看不到响应
摘要：前言：在项目中发现一个奇怪的问题，一个请求在数据量少的时候非常快速，数据量多的时候非常慢，甚至导致浏览器崩溃，在浏览器的网络抓包中看到有返回状态时200，但是响应迟迟没有返回，并且可以看到等待服务器响应时间非常长。 排查：一开始是定位在后端问题，因为查询类型为1的时候反应速度非常快，查询2时会复现该
阅读全文
posted @ 2024-10-09 14:17
获取Echarts的geoJson文件（省市/区县）
摘要：1.获取市的级别直接使用阿里云提供的工具直接获取： https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=32.62087018318113&lng=118.43261718749999&zoom=4 和 https://ma
阅读全文
posted @ 2024-07-08 17:10
export default无法被解构
摘要：最近在做项目过程中，遇到一个问题，对一个UI组件，解构出我们需要的组件，进行注册，但是运行的时候报错了，写了一个小例子 //user.jsexport default { obj:{name:1111}, obj2:{name:22222},} // index.jsimport {obj,obj2
阅读全文
posted @ 2024-03-25 17:05
使用pdf.js渲染pdf文件，并修改iframe的样式
摘要：<template> <div v-loading="loading"> <iframe :src="pdfUrl" :style="styles" style="border: none;width:100%" @load="setPdfStyle" // load事件是在ifram完全加载完后的
阅读全文
posted @ 2024-03-23 16:29
前端二进制文件下载和二进制文件的上传
摘要：// 下载模板 export function downTemplate(data = {}) { return request({ url: `${apiPrefix}/system/user/importTemplate`, method: 'POST', data, responseType:
阅读全文
posted @ 2024-01-25 16:07
聊天框 点击enter发送信息，ctrl+enter换行
摘要：<textarea @blur="handleBlur" @focus="handleOnfocus" @keydown.enter.prevent="handleEnter($event)" // keydown才有默认换行，keyup没有，因此stop和prevent要对keydown使用 v-
阅读全文
posted @ 2024-01-24 16:18
vite打包上线后，部分图片无法显示
摘要：1.情况：使用vite打包后，上线时部分图片展示不了。 1.1使用css引用的图片能够正常展示，能够打包进dist文件中assets中，查看浏览器中引用路径为assets中的图片，如此引用的图片不需经过特别处理，不管是放在static或者public的文件夹中都可以，都能够自动打包进dist中的as
阅读全文
posted @ 2023-09-19 17:13
遍历输入框时出现输入一个字符立刻失焦，无法正常输入
摘要：原因：循环时绑定输入框值为key，双向绑定时改变输入框值，key值被修改则失焦。 解决：动态值不要作为key值
阅读全文
posted @ 2023-09-14 16:29
大屏项目：背景图片切换出现闪屏情况
摘要：1.情况：做大屏时，swiper切换时背景图片要切换，因背景图片过大，过快切换会出现屏幕闪白情况 2.解决：通过设置切换时，行内样式切换背景图片，使用异步的方法来解决屏幕切换白屏问题 // vue2实现<template> <div class="background" :style="{ back
阅读全文
posted @ 2023-09-07 17:31
前端 文件流下载blob
摘要：1.axios请求携带 responseType: 'blob' export function getCreateReport(id) { return request({ url: `${apiPrefix}/bus/proposal/evaluation/${id}`, method: 'Ge
阅读全文
posted @ 2023-09-05 16:03
echarts 自定义tooltip样式
摘要：1.echarts options设置 tooltip: { trigger: 'item', className: 'custom-tooltip-box', // 命名父级类名 formatter: function (params) { const { name, value } = para
阅读全文
posted @ 2023-09-04 15:41
大屏项目Echarts不同屏幕之间适配
摘要：1.解决方案：使用缩放，前提：需要严格按照设计图提供的像素大小，尽可能少使用百分比以及尽可能少使用rem插件（会导致rem和缩放同时生效反而比例不对）,如发现细节不对，需对该处细节精确去按照比例去调整大小，并配合echarts方法解决 2.解决方法： 2.1给最外层盒子设置缩放样式： .large-
阅读全文
posted @ 2023-08-22 11:41
css单行垂直居中，超过两行显示省略号
摘要：HTML： <div> <span>单行居中，多行居左单行居中，多行居左</span> </div> <div> <span>单行居中</span> </div> CSS: span { font-size:14px; overflow:hidden; text-overflow:-o-ellips
阅读全文
posted @ 2023-08-21 17:57
vue通过style切换背景图片，出现闪屏现象
摘要：1.情况：通过监控swiper的index修改背景图片，出现闪屏情况 2.解决：尝试过多种方法例如v-clock，提前定义路径变量等都无法解决问题，最终使用提前定义好类名，通过修改类名动态更改类解决，在浏览器网络中可发现只请求过一次，不再是滑动时每次重新请求图片，因此不会出现闪屏现象
阅读全文
posted @ 2023-08-07 15:09
连续的英文字符和阿拉伯数字不能换行
摘要：原因： 这是因为div中，英文字母之间没有空格的话，它会默认认为这是一个英文单词，所以单词就一次输出不换行。 解决方法（以IE，chrome,FF为测试浏览器）： { word-break:break-all; /*支持IE，chrome，FF不支持*/ word-wrap:break-word;/
阅读全文
posted @ 2023-07-19 14:17
正则校验
摘要：1.手机号固话正则校验：合法数据示例： 13812341234 010-12345678 (0432)1234567-1234 ^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$
阅读全文
posted @ 2023-07-19 11:50
html2canvas + jspdf 实现前端将页面内容生成 PDF
摘要：一、简易步骤（仅支持下载一页，无法分页） 1.下载插件模块 npm install html2canvas jspdf --save 2.编写代码 import html2canvas from 'html2canvas' // 引入插件 import {jsPDF} from 'jspdf' //
阅读全文
posted @ 2023-07-14 10:29
解决本地上传文件，下载PDF失败或者只打开不下载的问题
摘要：情况：前端上传文件（不调用接口存储文件），存放至列表供下载（文件区别pdf和其他文件格式不同处理情况） 1.上传组件逻辑，获取上传的文件 <template> <div class="uploading-wrap"> <ak-upload name="file" ref="upload" :load
阅读全文
posted @ 2023-07-10 15:23
图片什么时候使用require？看懂图片路径寻找规则、imgDom获取时间
摘要：1.图片什么时候使用require？ 当需要使用任何js操作时需要使用require，包括不限于定义在data和js文件中作为变量、使用v-bind:src操作符时。 2.看懂图片路径寻找规则 情况1：当项目没有配置基本路径时，图片获取路径为<img src='/static/img/1.png>，
阅读全文
posted @ 2023-07-06 15:28
