JackieDYH的博客

在Nuxt.js项目中使用pinia-plugin-persistedstate配置sessionStorage时，常见的"sessionStorage is not defined"错误是由于服务端渲染(SSR)时Node.js环境缺少浏览器API导致的。解决方案主要有三种：1)在Store定义中使用process.client判断客户端环境，仅在该环境下启用持久化配置；2)使用专为Nuxt设计的@pinia-plugin-persistedstate/nuxt模块；3)通过.clie

摘要：本文详细介绍Vue3项目中PC端多分辨率适配方案，涵盖基础到高级的实现方法。基础方案采用视口单位(vw/vh)结合媒体查询，确保可靠适配；高级方案引入动态REM计算和PostCSS自动转换。文章还提供响应式布局Hook实现、断点管理方案，以及图表、表格等典型场景的解决方案。优化方面包括CSS变量控制、动态资源加载和性能监控建议，并配套开发环境测试工具，确保各分辨率下的显示效果。通过视口单位、弹性布局、动态REM和Vue3响应式API的综合应用，实现从1280px到2560px的完美适配。

本文介绍了在Vue3项目中实现token自动续期的完整方案。核心内容包括：1）基于Pinia的状态管理，实现accessToken和refreshToken的存储与刷新；2）通过axios拦截器处理401错误，自动刷新token并重试请求；3）采用请求队列机制防止并发刷新冲突；4）结合主动刷新策略提升用户体验。方案还涵盖安全存储、CSRF防护、错误处理、性能监控等企业级特性，支持多租户和离线场景，并提供了丰富的开发调试工具，形成了一套完整的JWT认证解决方案。

摘要：实现表格复选框联动控制，要求：1)状态为1时复选框可用；2)选中记录后，后续只能选择相同templateType的数据。通过watch监听选中项变化，获取首个选中项的模板类型；在getCheckboxProps中判断当前行是否满足条件（状态=1且模板类型匹配），动态设置disabled属性。使用Vue3的ref和watch实现数据响应，确保选中项与模板类型的一致性。

CSS Grid布局通过auto-fit和minmax()函数实现响应式卡片布局： 核心代码：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，卡片最小宽度200px，剩余空间均分 自动换行：容器变窄时自动换行，无需媒体查询 auto-fit vs auto-fill：前者折叠空轨道使内容填满空间，后者保留空轨道 优势：代码简洁、自适应强、维护简单，适用于产品网格、相册等场景 这种现代布局方式彻底简化了响应式设计流程。

通过以上方式，可以在 Vue 应用中高效地集成 WebSocket 功能，实现实时通信需求。建议根据项目规模选择原生实现或使用成熟的库（如 Socket.io）在 Vue 中使用 WebSocket 可以实现实时双向通信，适用于聊天应用、实时数据监控等场景。在 Vue 组件中直接使用原生 WebSocket API。

本文介绍了一个基于Element Plus的3D模型管理系统，主要功能亮点包括：1) 实现el-table的合并单元格功能，使主模型及其子行共享序号和状态显示；2) 采用专业的数据展示方式，通过不同样式区分主模型与子行；3) 提供完整的筛选功能，包括按名称、编号、分类和状态的筛选；4) 设计了现代化的UI界面，包含渐变标题栏、卡片式布局和响应式设计；5) 实现多种交互功能如3D预览、AR预览、模型上传和下载等。系统通过处理原始数据为展平结构，并利用span-method方法实现单元格合并，优化了数据展示效果

本文介绍了基于Element Plus和Ant Design Vue封装的两种文件上传组件(el-uploadMUpload和a-uploadMUpload)的实现方案。两种组件都提供了文件类型校验、大小限制、上传数量限制等功能，并支持自定义上传逻辑。其中el-uploadMUpload组件通过计算文件hash值进行上传，支持获取文件ID；a-uploadMUpload组件增加了登录校验和进度监控功能。两种组件都支持图片预览功能，可通过slot自定义上传按钮样式，适用于不同UI框架的上传需求。实现细节包括文

可以使用数组的filter()方法来实现。这样就把checked属性为true的对象添加到了一个新的数组中。可以使用Array的filter和push方法来实现。首先创建一个空数组result，然后遍历给定的数组对象，如果当前对象的checked属性值为true，则将其添加到result数组中。接下来，当用户取消选择时，可以使用Array的filter方法来过滤出被取消选择的对象，然后通过Array的splice方法将其从result数组中删除。在这个例子中，我们使用了数组的push和filter。

要计算从某一毫秒到现在有几天，可以使用Day.js和JavaScript的Date对象来获取当前日期，然后计算两个日期之间的天数差异。这个示例代码将计算从2021年9月30日到现在已经过去了多少天，并将结果输出到控制台。

如果`item.positionSide`等于`LONG`，则返回`long`，如果`item.positionSide`等于`SHORT`，则返回`short`。这里使用了JS对象字面量中的键值对和对象属性访问符号。这段代码通常用于根据位置方向获取相应的操作方向。这段代码是一个对象字面量，它的含义是，，则这个条件语句没有任何作用，变量。这段代码是一个简单的条件语句。

SVG 可以用来绘制任何形状，包括虚线。通过设置元素的边框样式来实现虚线效果。属性控制虚线的样式，可以自定义虚线的大小和间距。使用伪元素来模拟虚线的效果。使用 CSS 伪元素实现虚线。使用 SVG 实现虚线。

Vue3中使用transition过渡实现滑动切换效果。

2、当状态为1时，表示之前已经选择过，显示状态为勾选并禁用状态，禁止取消。selectStatus: "0", // 0未选中 1选中 2不可选。注意：表头上的全选按钮，只能操作状态为0的数据，其他数据不能操作。1、当状态为0时，表示前台页面可以自由选择和取消。3、当状态为2时，表示不可选择，显示为禁用状态。表格根据从后端获取的数据进行状态显示和控制。

defaultExpandAllRows这个属性仅仅是用来设置默认值的，只在第一次渲染的时候起作用，后续再去改变，无法实现响应式。

截流函数（throttle）和防抖函数（debounce）都是用于解决函数触发频率过高的问题，可以提升页面性能，减少不必要的计算，优化用户体验。

根据需求实现当前两列数据中有相同数据时，合并列单元格。

0.01203000、0.01203200、0.01203002 通过js方式将小数末尾无效的0去掉。

ts项目中导入自定义js文件提示 无法找到模块“@/api/xxx”的声明文件当 import 一个没有类型声明的第三方库时，TypeScript 不知道 import 进来的东西是什么类型，只能，这也就是我们常说的。所有正常的前端项目都会禁止 implicit any 出现，所以就报错了。这些方法，因为这样一来我们就远离了 TypeScript 给我们的保护。

是一个常见的别名，用于表示主远程仓库。你可以使用其他别名来命名其他的远程仓库，例如。现在，你的本地 Git 仓库已经配置了多个上传仓库地址。命令时，Git 会将代码推送到所有配置的远程仓库。

这样，你就将别人的更新合并到了你的分支中。如果有冲突，你需要手动解决冲突。解决冲突后，提交更新。git 克隆了别人的项目，我自己又创建了一个代码仓库去修改拉下来的项目代码。如果你想在将别人的更新合并到你的分支之前先查看更新的差异，你可以使用。当别人的代码更新后，我如何将他修改的部分和我自己的合并。original_repo_url 克隆的仓库地址。

1为最后光标所在位置。按tab健依次到$2,3,4..............跳转到指定位置到同时选中默认文本，方便修改。快捷提示窗对该代码片段对描述。触发快捷提示的字符串前缀。

JavaScript实现将Map数据key:value数据转换成数组对象格式。

CSS的scroll-snap-type和scroll-snap-align参数可以实现滚动吸附效果，让滚动操作更加流畅自然。下面是关于这两个参数的详细说明以及使用教程。

DOM检查一个元素是否被聚焦const hasFocus = (ele) => ele === document.activeElement获取一个元素的所有兄弟元素const siblings = (ele) => .slice.call(ele.parentNode.children).filter((child) => child !== ele);获取选中文本const getSelectedText = () => window.ge

hasOwnPropertyObject的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性判断自身属性是否存在var o = new Object();o.prop = 'exists';function changeO() { o.newprop = o.prop; delete o.prop;}o.hasOwnProperty('prop'); // truechangeO();o.hasOwnProperty('.

在vue2中通过Object.defineProperty实现数据响应式，组件初始化时，对data中的item进行递归遍历，对item的每一个属性进行劫持，添加set,get方法。后来新加的newProperty属性，并没有通过Object.defineProperty设置成响应式数据，修改后不会视图更新解决一Vue.set()Vue.set( target, propertyName/index, value )或this.$set(target, propertyName/in..

说明点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据刷新页面参数丢失编程式导航方法一：通过 params 传参路由配置如下{ path: '/detail/:id', //若id后面加?代表这个参数是可选的 name: 'detail', component: Detail }通过 $router.push 中 path 携带参数的方式// 列表中的传参goDetail(row) { this.$router..

数组的常用方法lengthlength 是一个可读可写的属性，用来表示数组的长度（即数组元素个数）。通过访问 length 属性，可以获取数组长度；而通过修改 length 的值，可以增加或减少数组元素，甚至可以完全清空数组元素。length 属性的读、写操作示例如下：var arr = [1,2,3];alert(arr.length);//读取数组长度,结果为3arr.length = 1;//修改数组长度为1，此时数组只剩第一个元素arr.length = 0;//快速清空

1、all如果数组所有元素满足函数条件，则返回true。调用时，如果省略第二个参数，则默认传递布尔值。const all = (arr, fn = Boolean) => arr.every(fn);all([4, 2, 3], x => x > 1); // trueall([1, 2, 3]); // true2、allEqual判断数组中的元素是否都相等const allEqual = arr => arr.every(val => val

网页动画图像、Flash 动画和 JavaScript 实现的效果图片，我们用最基础的CSS也能实现。制作一个简单的gif动画图，上图就是效果图。用CSS3制作动画图，你需要了解两个css属性。其一是 @keyframes因为它限定了CSS 样式和动画逐步从目前的样式更改为新的样式的变化过程。浏览器兼容的时候需要在keyframes上加前缀，-webkit-, -ms- 或 -moz- 。keyframes中有两个属性，from和to，from里面的内容定义动画开始的状态，to记录动画结束的

文本对齐方式CSS最常用的对齐方式，居中对齐、左对齐（默认）、右对齐，而且实现起来也是非常的简单p{ text-align: center; text-align: left; text-align: right;}但是两端对齐你有用过吗？只需要添加text-align-last:justify样式即可<div class="justify-text"> <div class="li">账号</div> <div clas

v-if判断active满足0的时候写法是：v-if="active === 0"那如果active同时要满足0，1，2三个值的时候，如果在v-if里用 || 并列写如：v-if="active === 0 || active === 1 || active === 2"写法很明了，但是很不简介一：最简便的写法就是//[ ]里可以放字符串，数值等v-if="[0,1,2].includes(active) "普通写法v-if=" type==1 || type==2 |..

滚动条样式一/* 样式一 *//*滚动条整体样式 body:: 只给body加样式 ::给全部*/::-webkit-scrollbar { width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px;}/*滚动条里面小方块*/::-webkit-scrollbar-thumb { border-radius: 4px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background:

<router-link>标签是用于在Vue不同页面之间跳转，但它不是跳转到外部链接，相反，我们一般使用<a>标签跳转到外部链接。扩展<router-link>组件非常简单，只需将它包装到我们自己的定制组件中。Ok，我们需要构建一个AppLink组件来处理链接，无论是外部的还是内部的。AppLink组件AppLink组件的 props 要包含router-link的所有props。为什么？因为这样我们组件的“接口”就可以模仿 Router...

1. 将一个 prop 限制在一个类型的列表中使用 prop 定义中的validator选项，可以将一个 prop 类型限制在一组特定的值中。export default { name: 'Image', props: { src: { type: String, }, style: { type: String, validator: s => ['square', 'rounded'].includes(s) ..

效果图主要代码// 结构<a v-for="(item, index) in optWkList" :key="item.id" :class="{ active: item.isBtn }" @click="optBtn(item, index)"> {{ item.name }}</a>// 数据optWkBtn: '',//默认optWkList: [ { name: 可复刻, isBtn: false,.

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，...

v-model<div id="app"> <input type="text" v-model="num"> <input type="text" :value="num" v-on:input="num=$event.target.value"> <h2>{{num}}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/v

Web 开发过程中，总会遇到各种各样的布局，比如下面的各种“优惠券”，一起来看看吧一、最佳实现方式首先，碰到这类布局的最佳实现肯定是mask遮罩。关于遮罩，可以看一下CSS3 Mask 安利报告。这里简单介绍一下基本语法很简单，和background的语法基本一致.content{ -webkit-mask: '遮罩图片' ;}/*完整语法*/.content{ -webkit-mask: '遮罩图片' [position] / [size] ;}...