- 博客(68)
- 收藏
- 关注
RSS订阅原创 sticky设置了top但还是有大约1px空隙
把 header 和 search 放在同一个sticky的元素中，这个是改别人的代码，懒得动大结构了，就这样吧==如图，顶部元素设置了sticky，搜索框也同时设置了sticky，但是中间还是有一点空隙。search 的 top = header 的 top-1。（找css快眼瞎了，终于定位到原因了）去掉 box-shadow 后就好了。滑动到顶 sticky 时会跳动。header 的 top=0。
2025-06-13 12:06:50
21
原创 clientHeight，offsetHeight，window.getComputedStyle(elem).height的区别，以及是否包含padding、margin等
clientHeight，offsetHeight，window.getComputedStyle(elem).height的区别，以及是否包含padding、margin等。
2025-06-06 18:29:08
177
原创 静态资源文件在浏览器中的缓存机制
提要：为什么项目部署上线后，静态文件（vue项目中，放在public中的文件，如common.js）在自己的电脑中没有更新，在其他人的电脑中更新了。考虑到了缓存，在html中添加了no-cache等，检查了network中的response headers中没有设置cache-control，那文件的缓存怎么计算？
2025-03-21 11:40:56
628
原创 nuxt3的页面中怎么获取环境变量以及为什么vite中配置define失效？
在 Nuxt 3 中，已经被所取代，用于管理环境变量和运行时配置。你可以按照以下步骤使用。
2025-01-07 14:22:29
586
原创 完美解决vant浮动气泡+弹出菜单
2. 使用floating-bubble的offsetChange事件，获取当前的x和y，判断当前浮动气泡在什么位置，来修改popover的placement。1. 使用van-floating-bubble包裹van-popover，但点击后只会重复显示不能隐藏。2. popover位置固定，不能根据floating-bubble改变位置。1. 去掉popover绑定的v-model:show，改为使用show属性。需要有一个浮动气泡，点击弹出导航菜单。
2024-09-27 18:02:18
1214
原创 项目不是部署在根目录下时，index跳转404页面
背景：vue3的项目开发，部署到测试环境后，页面总是直接跳转到404，本地模拟部署线上环境没问题，模拟部署测试环境后，复现了问题。解决方案：router/index.js中需要进行配置。
2024-08-28 19:38:16
352
原创 vue3(nuxt3)中使用ref获取不到子组件变量
使用的组件是默认关闭的——即通过模板引用或者$parent链获取到的组件的公开实例，不会暴露任何在中声明的绑定。可以通过defineExpose编译器宏来显式指定在组件中要暴露出去的属性。
2024-07-01 17:30:25
717
1
原创 更正：vue3升级nuxt3，server怎么修改
用于处理服务器端请求代理，主要关注服务器端的代理设置。：用于处理前端请求代理，主要关注前端开发时的代理设置。它们在开发过程中可以结合使用，以确保前后端都能正确处理跨域请求和代理需求。
2024-05-14 18:48:12
635
原创 nuxt中使用window报错is not defined
因此，onMounted钩子是确保你的代码在正确的上下文中执行的一种安全机制，它避免了在服务端尝试访问不存在的window对象导致的错误，并允许你安全地使用这些对象在客户端实现动态行为和交互。这种模式确保了代码的可移植性和在不同环境下的健壮性。
2024-04-16 10:44:53
1139
原创 npm install报错 unexpected token
卸载所有版本的node，卸载nvm，重新找到nvm-windows最新版1.1.12，安装后，重新安装所有版本的node。执行npm install，报错：npm ERR!Unexpected token '.'但有用的办法就是好办法，折腾了两天的问题终于解决。node版本：18.10.0。nvm版本：1.1.7。
2024-04-01 11:48:03
353
原创 数组和类数组转换
Array.from 是 JavaScript 中的一个数组方法。它用于从一个类数组对象或可迭代对象创建一个新的数组实例。Array.from 接受两个参数：第一个参数是要转换成数组的对象，第二个参数是一个可选的映射函数，用于对每个元素进行处理。
2024-03-29 11:53:49
532
原创 怎么使用vite自动生成路由——vite-plugin-pages
是一个为 Vite 打造的插件，旨在自动化 Vue 和 React 项目中的路由处理。这个插件通过文件系统的结构自动生成路由，大大简化了路由配置的复杂性，使开发者能够更加专注于页面本身的开发，而不是路由的手动配置。以下是。
2024-03-15 11:04:08
1561
原创 Mac中文输入法区分回车和提交
在Windows下输入拼音后，敲击空格 => 显示第一个联想词，敲击回车 => 拼音显示在搜索框中，再敲击回车 => 跳转搜索结果页。2. 网上简单查了下，event有个属性可以使用——isComposing，而且这个属性只有在keydown事件中会有所区别。在Mac浏览器中，敲击空格 => 显示第一个联想词，敲击回车 => 跳转到搜索结果页。1. 最开始想到的就是阻止默认事件，但是逻辑上行不通，而且实际操作后发现确实行不通。在搜索框中输入关键词，回车跳转至搜索结果页。vue3+vuetify的项目。
2024-03-14 15:00:02
1158
4
原创 vue3项目中structuredClone报错
报错：Failed to execute 'structuredClone' on 'Window': #<Object> could not be cloned。修改：formData不能是ref格式，改为如下。
2023-08-18 04:02:37
3384
2
原创 vue2使用composition-api的情况下想使用route
vue2的项目，使用了@vue/composition-api组合式api，在其他的js文件中想使用$route.query。
2023-08-07 14:42:57
521
原创 前端可以怎么利用AI
推荐系统：利用AI算法根据用户的行为和偏好进行数据分析和处理，为用户提供个性化的推荐内容。例如，电商网站通过推荐系统推荐用户可能感兴趣的商品。数据可视化：利用AI算法对数据进行分析和处理，并以可视化的方式展现出来，例如利用图表展示数据分析结果。自然语言处理：利用AI算法对文本进行处理和分析，例如实现语音识别、语音合成、聊天机器人等应用。图像识别：利用AI算法对图像进行分析和识别，例如通过图像识别技术实现人脸识别、物体识别等。自动化测试：利用AI算法对前端页面进行自动测试，减少测试时间和人力成本。
2023-06-07 18:58:53
2006
原创 前端写一个节流函数
前端节流函数的作用是控制一个函数的执行频率，使得该函数在一定时间间隔内只执行一次。这样可以减少不必要的计算和网络请求，提高页面性能。记录上一次函数执行的时间，每次执行时计算当前时间和上一次执行时间的差值，如果大于等于。使用该函数时，只需要将需要节流的函数作为第一个参数传入即可。，返回一个新的函数。该函数内部使用了一个变量。函数，该函数每隔 1 秒才会执行一次。该函数接收两个参数：要节流的函数。这样就能控制函数的执行频率了。上面的代码会在滚动时执行。函数，但是由于使用了。
2023-06-07 18:57:19
292
原创 spa项目使用插件做预渲染
需求出发点：项目需要做SEO优化当前情况：项目是vue-cli搭建的spa(单页面渲染应用)，即页面查看源代码只有spa对SEO搜索引擎爬取非常不友好，因此需要用到预渲染，将需要做SEO的重点页面进行预渲染使用工具：prerender-spa-plugin...
2022-08-10 18:35:55
402
原创 scss在calc中插入变量
定义一个宽度的变量，好统一修改，但是编译之后，变成了 invalid value ——— calc(100% - $width)，原样输出了。用插入值的表达式，格式：#{$width}
2022-08-04 16:18:20
542
原创 a链接点击后弹出about:blank#blocked页
明明已经加了javascriptvoid(0)，为什么依旧会跳转呢？关于一个曾经困扰我被解决了，过很久之后又再次复活攻击我的事情……a链接点击后弹出aboutblank#blocked页。因为添加了target！
2022-07-26 18:05:43
28872
原创 nvm安装node的国内镜像
默认路径C//Users/Administrator/AppData/Roming/3.保存，使用nvminstall【node版本号】，即可安装node啦。需求场景居家办公使用家里电脑，发现用nvm下载不下来node，提示超时。
2022-07-18 18:29:37
2274
原创 swiper动画效果effect不生效
设置了effect后不生效，看了半天原因，源码也看过来了，以为配置项有什么问题，或者是什么方法没有调用到。试了下用鼠标拖拽有效果，可是自动轮播的时候effect效果就没有了。结论：speed设置为0了！不知道谁干的好事……...
2022-07-14 16:20:54
3205
原创 部署报错$notify
报错：Subsequent property declarations must have the same type. Property '$notify' must be of type 'ElNotification', but here has type 'Notify'.我们的项目是推送到线上后自动部署的，部署报错，看了下日志，大致报错如下：ERROR in D:/work/项目名/node_modules/vant/types/notify.d.ts(37,5):37:5 Subs.
2021-12-23 16:30:13
1301
原创 Vue2中，swiper6的箭头不生效
swiper版本：6.3.5解决：1.main中// navigation是箭头的重点import { Swiper as SwiperClass, Pagination, Navigation, Mousewheel, Autoplay} from 'swiper/swiper.esm'SwiperClass.use([Pagination, Mousewheel, Autoplay, Navigation])2.vue中（箭头放在轮播外面）<swi
2021-12-22 10:28:14
2758
原创 react-bootstrap tabPane
最近修改 superset 的项目，各种坑各种踩。本以为我以后用不上 react 框架了，没想到修改这个项目的源码，赶上了 react。这次的坑来源于这个需求：superset做移动端嵌入，在 tab 标签切换到别的再切换回来的时候，希望还能保持原本的滚动位置。我考察了一下发现滚动位置互相扰乱的原因是，滚动的是html元素，也就是这个页面整个是滑动的，所以切换到别的 tab，虽然切换完的没有滚动，但还是保留了上一个的滚动位置。闲话不多说，修改思路：tab 切换的时候记录下 html 的 scro
2021-11-04 16:10:00
578
原创 echarts-sampling降采样
今天修改一个echarts的渲染效率问题。首先修改请求数据的问题，原先的逻辑是点击的时候请求数据，我看了下数据大概有七千多条，请求耗时是1.6s-1.7s，这是在我的电脑上。同事反馈在他的电脑上需要5s以上。于是修改逻辑为：在“分时”的时候就请求“日”和“周”的数据。这样一来优化了请求的时间，渲染图就不会出现长时间留白。其次修改：echarts图渲染的时候会有卡顿的情况，查了下echarts官方配置项，有一个sampling可用，是降采样，也就是渲染的时候不把每一个点渲染出来。e..
2021-09-08 18:16:32
10028
原创 windows系统下操作nginx的命令
启动nginx(在nginx文件夹下) start nginx 这个有点鸡肋，因为毕竟已经到文件夹下了，直接双击nginx.exe就ok了重启nginx(在nginx文件夹下) nginx.exe -s reload杀死nginx taskkill /f /im nginx.exe(在nginx文件夹下) nginx -s stop(快速停止nginx)(在nginx文件夹下...
2021-09-07 18:51:44
451
原创 superset前端项目无法启动，报错jsx中有无法解析的token，没有合适的
报错忘记截图了……You may need an appropriate loader to handle this file type, currently no loader …大致意思就是，没有合适的loader去加载这类文件，报错集中在src目录下的jsx文件中。解决：webpack.config.js文件，include中添加src目录{ test: /\.jsx?$/, // include source code for plugins, but excl
2021-08-31 13:33:38
3087
2
原创 pdfjs预览pdf报错
跳转之后的页面已经可以出来，blob生成的链接也是有返回的，但是预览是空白，并且控制台警告：Warning: Invalid stream: “FormatError: Bad FCHECK in flate stream: 120, 239”跟到源码里面看警告的原因，应该还是解析出了问题。解决方案：axios请求文档流时候的responseType改为blob// 原本这里写的是this.$axios.get(`/api/preview?id=${id}`)// 后来发现问题就在这里，
2021-08-20 10:27:02
7220
原创 npm install报错node-sass
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
2021-08-20 10:16:35
294
原创 调整后台传回来的数据使其满足echarts结构
今天收到一个需求，是和echarts有关的，不过并不是调整echarts，而是传给echarts的数据要做调整。// 从后端接收到的数据类似这样：[ {statename: 'a', value: 1}, {statename: 'b', value: 2}, {statename: 'c', value: 3}];// 需求的echarts图需要的数据是这样滴：[ {statename: 'a', value: 1}, {statename: 'b
2021-08-02 15:57:11
507
原创 谷歌浏览器更新后，缩放会使table的td边框线不一样粗
今日正常发版后，测试同事反映表格的边框线不一样粗细，我在本地没能复现，缩放也没能复现。问了下同事谷歌版本：91，自己的浏览器版本：90。试了下把自己的浏览器更新到91后复现了这种情况。在网友的启发下的解决方案：发现是border-collapse出现了问题。第一步：去掉border--collapse，改成separate第二步：给table添加border-spacing: 1px;background-color: #000;第三步：去掉td的border大功..
2021-06-28 18:16:52
3540
10
原创 http referer
今天同事问一个比较奇怪的问题。我们这边的项目中，有个地址，要单点到客户的系统中，具体什么不用做，只需要跳转到客户处理单点的一个链接就行，链接地址类似于这样： http://ip/ssoLogin..
2021-05-31 19:39:48
252
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人