fury的博客

原创 vue3：el-table多选或者自定义数组的shift+鼠标快速多选

请确保你的useFile是这样定义的（关键！// composables/useFile.js 或 storeconst selectedFileList = ref([]) // 必须是 ref！如果是一个普通数组（不是ref），那上述写法也不会触发响应式更新。✅ 保留你的✅ 在逻辑中直接操作（通过解构重命名）✅ 不要给赋值（它是只读的）这样既满足你的约束，又实现完整的 Shift 多选功能！如仍有问题，欢迎贴出useFile的代码，我可以进一步帮你调整。

原创 tsfile.raw提示

你的错误是因为误以为item.file是包装对象，其实它已经是 File 本身。请根据实际数据结构调整代码：Ts编辑// 大多数现代场景下，直接这样即可：除非你明确知道使用的是某个 UI 库的 upload 组件且其返回格式包含.raw。如有具体 UI 框架（如 Element Plus、Naive UI、Ant Design 等），可以提供更多信息，我可以给出更精准的建议。

原创 ＜el-cascader能不能再输入文字的时候实现el-selected的效果

原生不支持远程搜索。若必须用cascader，可通过监听其搜索输入框的input事件（hack 方式）实现，但有兼容风险。更推荐：若以搜索为主，使用el-select+ 扁平化数据；若以级联选择为主、搜索为辅，可预先加载全部数据让filterable本地过滤。如你仍希望坚持用label: '指南',{ value: 'shejiyuanze', label: '设计原则' },// ...并注意处理加载状态和空数据情况。

原创 vue3：find方法

问：finde方法返回什么？是返回布尔值？还是返回满足条件的数组？还是返回满足条件的第一个元素？回答：在 JavaScript 中，数组的find()方法用于查找数组中满足指定条件的元素。

原创 js：arr.some方法使用

arr.some方法返回布尔值，如果数组中有一个满足就会返回布尔值，最终返回的是一个是否有这个条件的布尔值。

原创 vue3：filter

问：filter使用中打印结果是return的true或者false，为什么使用 箭头函数 后简化写法是返回的一个满足条件的新数组？')return!})打印出来是ture或者false，也不是return的满足条件的这个数组元素啊，为什么const added = newList.filter((item) => includes(item))返回的就是满足条件的这个元素呢为什么不是true或者false呢？filter。

原创 vue3：自定义右键菜单怎么设置点击选项菜单不消失？

/v-contextmenu-item>自定义右键菜单怎么设置点击选项菜单不消失？这样对需要设置的现象增加@click.stop方法就可以实现。

原创 js： fined方法

在JavaScript中，find 方法用于数组中查找符合条件的第一个元素，并将其返回。如果找到了符合条件的元素，find 方法会返回该元素；这种方法首先找到元素的索引，然后使用 slice 来提取包含该元素的子数组。使用 find 方法时，如果你确实需要一个数组（尽管通常只有一个元素），确保在找不到元素时返回一个空数组。如果你的目的是确保结果总是数组形式，即使只有一个元素，第一种或第三种方法更适合。// 输出: [3]// 输出: [3]// 输出: [3]

原创 css的p标签中的文字很低但是整个p标签高度很高怎么设置

line-height：1.2em

原创 css设置超过的文字议案程三哥省略号？

原创 vue3：trycatch里面可以在写一个trycatch吗

问：trycatch里面可以在写一个trycatch吗回答：当然可以！在中，你完全可以在一个语句内部再写一个，这叫做。这在处理复杂的异步操作、深层错误处理或需要分别处理不同层级异常时非常有用。

原创 vue3：css穿透方法

【代码】vue3：css穿透方法。

原创 vue3：watch和watcheffect的根本性区别

问：watch和watcheffect的根本性区别回答：watch1 : 0},1 : 0})上述比对：watch是在第一个回调中指定了监听对象：fileDetailList.value.lengthwatchEffect是在回调函数中的等号的右侧指定了监听对象fileDetailList.value.length，两者的监听对象都是fileDetailList.value.length。当然watchEffect可以直接写成：1 : 0})

原创 vue3：vue3 + elementplus + pinia实现js的XMLHttpRequest 下载功能。

问：使用js的XMLHttpRequest 方法，在vue3+ts+elementplus+pinia中实现一个记录下载功能：包括下载进度、下载速度、下载剩余时间、下载进度条、取消按钮取消下载、下载文件名、下载状态（下载中、已取消、下载失败、已完成），实现一个公共组件使用el-table来展示下载的文件可以有多个同时下载，最好用pinia进行多个下载文件的数据存储。回答：下面是一个基于的完整示例，使用实现el-table。

原创 vue3：el-progress的圆形无线滚动，心跳、呼吸效果，加载中的效果

const dynamicPercentage = ref(0) // 初始值。// 模拟呼吸/心跳波形。

原创 vue3：实现一个el-progress呼吸、心跳的动画效果，原型的无限滚动，且有加载的旋转效果有时候长有时候短

你现在看到的效果不再是“死板的半圆旋转”，而是：🌀一个会“呼吸”的圆形进度条：长度不断变化 + 缓慢自旋 + 非线性节奏 → 完美模拟“油在流动”或“心跳加载”效果！你可以根据品牌风格调节频率、颜色、范围等参数，达到理想视觉效果。需要我帮你调成特定风格（比如科技感、温暖呼吸灯等），也可以继续告诉我！

原创 vue3：el-progress

这两个时不能同时设置的，在一条直线的时候el-progress可以无限循环滚动，圆形的同时还可以不断循环进度条，indeterminate为true。但是在type为circle的时候无线滚动就无法生效。

原创 vue3：数组的.includes方法怎么使用

问题回答这句代码什么意思？判断statusKey是否是'waiting'或是什么类型？✅ 字符串（string），比如'waiting'是对象还是数组？❌ 不是对象，也不是数组，只是一个字符串值用在什么场景？控制 UI 显示逻辑，比如按钮是否可点有没有更优写法？可用Set.has()提高性能，但includes更直观✅ 所以这行代码非常常见且合理，是一种简洁有效的状态判断方式。

原创 vue3：如何在改变数组长度和内部元素后让vue自动更新

这样可以出发vue3的响应式更新。

原创 vue3：data.downLoadFileNameList[0] 【0】的下划线出现红色下划线报错？

downLoadFileNameList: [] // ❌ 错误！这是“空元组”，不是“字符串数组”downLoadFileNameList: string[] // ✅ 正确：字符串数组，长度任意TypeScript 看到[]就认为这个数组永远是空的，所以[0]是非法的。// ✅ 正确写法downLoadFileNameList: string[] // ✅ 允许任意长度的字符串数组// 使用。

原创 Vue3：使用computed中造成的问题

map((item, idx) => ({ ...item, index: idx, })) })这样写不行, const internalData = ref([]) // 用来存放一次性生成的数组 watch( () => props.tableGridData, // 监视父组件传进来的原始数据 (newVal) => { // 只在 data 真正改变时重新生成 internalData.value = newVal?在普通渲染循环中保持不变，选中项对应的对象引用也保持不变。

原创 vue3：分页组件使用中切换页码调用两次接口的问题？

初始化pagination组件时total参数是正常的，点击其它页面后触发current-change事件，在对应绑定的事件中像后端请求数据，在返回的数据中，因为重置total，因为返回数据中的total数据为0，导致current-page从点击后的数据从新变为1，再次触发current-change事件。因为我在调用接口的时候设置：params.value.total= 0。所以记得检查返回的数据。

原创 Vue3：elementplus的el-table实现按住shift+鼠标多选

问：elementplus的el-table实现按住shift+鼠标多选。

原创 Vue3：根据el-input封装全局v-focus指令

类可能会一直残留在上一次的 DOM 节点上，导致样式不统一。，不会再出现“只能触发一次”的情况。隐藏/显示，元素始终保持挂载状态，只会触发。，基本可以保证输入框已经真正出现在页面上。，而弹框关闭后 Vue 并没有重新触发。可能仍然早于真实可聚焦的时机。，DOM 并未销毁），或者弹框是通过。，导致后续实例没有再执行聚焦逻辑。的组合，确保每次弹框创建时都走。，每次打开都会重新创建元素，有时候弹框的渲染顺序非常快，（2）在指令里监听弹框的。的弹框），可以在指令内部。销毁后又重新创建，但。

原创 vue3：使用pinia存储一个数组，两个页面分别使用这个数组的数据？

console.log('存储的数据:', this.maskedUserFileIdList);console.log('获取的数据:', result);使用pinia存储一个数组，两个页面分别使用这个数组的数据。// 直接更新状态而不是使用临时数据。// 清空数据（如果需要的话）// 获取数据并深拷贝。

原创 vue3：触发自动el-input输入框焦点

/ 全局或局部注册指令// 使用 requestAnimationFrame 确保在浏览器渲染周期内执行});// 在模板中使用<el-inputv-focus// ...其他属性。

原创 vue3：调用接口的时候怎么只传递一个数组进去，得到一个key-value数据

问：/*** 发送取消屏蔽请求* @param userFileIds 用户文件ID数组*/这是我的调用接口的代码，现在userFIleds传进来是一个数组，console中也是数组，但是{userFileIds}打印出来却是：这样的数据格式，为什么？

原创 elementplus：新版本的el-upload

这是我的代码，现在新增的时候ElMessage.error('上传列表已存在该文件，请勿重复上传')会触发但是uploadRef.value!.handleRemove(file)这段代码没有执行，重复的文件仍然上传上去了，请问怎么回事，我该怎么做。ElMessage.error('上传上传列表已存在该文件，请勿重复上传')ElMessage.info('文件总数超出3个，请重新上传')这样写才能正常触发handleRemove方法。

原创 vue3：el-date-picker三十天改成第二十九天的23:59:59

这个逻辑限制的是：**从 `announceStartTime` 开始，最多 30 天后**，但这个“30天后”是精确到 **00:00:00** 的，所以您选择 **第30天的任何时间（如 23:59:59）** 都会超出这个限制，从而被禁用。选择时间范围：从 `announceStartTime` 的 **00:00:00** 到 **30天后的前一天的 23:59:59**结束时间：`2025-04-30 23:59:59`（而不是 `2025-05-01 00:00:00`）

原创 js：监听用户刷新chrome

怎么监听到，用户是使用chrome的ctrl+r 或者 ctrl+shift+r或者直接监听chrome浏览器是否刷新页面vue3 scriptsetup？

原创 vue3：多个单独设置的localstorage怎么合并成一个对象

多个单独设置的localstorage怎么合并成一个对象。

原创 vue3：封装公共utils-＞pageState.ts公共组件，可控制存储和清理多sessionStorage

开始，我是用的是一个页面分别单独存储多个localstorage的值，但是后来发现我需要对每一个页面都存储不同的键值对，这就涉及到我现在的单个存储不行，要以页面进行区分key，value是每个页面的所有要存储的localstorage的值组成的对象，每个页面有一个对象，里面的值互不影响。我刷新浏览器chrome，希望清空之前的sessionStorage的记录，只保留当前所在路由的sessionStorage，且所在的也要重置sessionStorage。

原创 js：beforeUnload这个方法能不能监听到关闭浏览器和刷新浏览器行为

*自定义提示信息受限**：出于安全和用户体验考虑，现代浏览器（如 Chrome、Firefox）**不再显示开发者自定义的提示文本**，而是显示浏览器统一的确认对话框，内容类似“你确定要离开此页面吗？👉 此时整个页面都在被销毁，**Vue 的运行时环境也被立即终止**，所以 `onUnmounted` 等钩子**根本来不及执行**。**`beforeunload` 可以在 Vue 3 中使用**，且是**唯一能拦截刷新/关闭浏览器行为的方法**。用户始终可以选择“离开页面”。

原创 js：const x = {...x, ...x}

如果 partialState 中的属性与 currentState 中的属性有相同的键，那么 partialState 中的属性会覆盖 currentState 中的属性。这样，newState 就是一个合并了 currentState 和 partialState 的新对象，其中 partialState 中的属性优先级更高。...currentState 表示将 currentState 对象的所有属性复制到新的对象中。

原创 监听页面刷新JS

在 Vue 3（`<script setup>` 语法）中，要监听用户是否刷新页面（包括使用 `Ctrl+R`、`Ctrl+Shift+R` 或点击刷新按钮等），**无法直接区分是哪种方式触发的刷新**，因为浏览器在页面刷新前会销毁当前上下文，但你可以通过 `beforeunload` 事件来**监听页面即将被卸载（包括刷新、关闭、跳转）** 的时机。- `Ctrl+R` 和 `Ctrl+Shift+R` 都会触发 `beforeunload`。✅ ①方法：使用 `beforeunload` 事件（推荐）

原创 Vue3：new ResizeObserve

现在ecarts折线图当宽高改变的时候，会导致折线图样式发生变形。// 新增 ResizeObserver 监听容器尺寸变化。// 在停用和卸载时清理监听。

原创 vue3：legend数据悬浮框经过函数处理加上单位

问：tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', } }我希望鼠标悬浮上去悬浮框中的数据可以经过calculateFileSize函数进行处理回答：您好！您想在 ECharts 的 tooltip 中对显示的数据进行格式化处理，这是一个很常见的需求。您希望将 tooltip 中的数值通过函数（例如将字节转换为 KB、MB 等）进行处理。ECharts 的 tooltip 提供了formatter。

原创 js：13KB或者xxxkb、xxxMB\xxxtb\xxb等多种情况怎么获取后面的单位

问：13KB或者xxxkb、xxxMB\xxxtb\xxb等多种情况怎么获取后面的单位回答：当然可以！以下是使用从类似13KBxxxMB2TB等字符串中提取单位（如KBMBTB）的完整方法。

原创 uploader组件，批量上传怎么设置实时滚动

chunk Uploader.Chunk 实例，它就是该文件的最后一个块实例，如果你想得到请求响应码的话，chunk.xhr.status 就是。rootFile 当前文件文件所属的根 Uploader.File 对象，它应该包含或者等于成功上传，const scrollToCurrentFile = (fileId) => { /// 文件跟踪。const fileList = fileListRef.value // 获取 ul 容器。// 平滑滚动到文件位置。上述代码即可实现跟随下滑。

原创 ElementPlus:ElMessageBox增加type

问:ElMessageBox.alert(message, '警告', { 怎么加上type类型回答:在使用（Element Plus 的 MessageBox 组件）时，如果你想添加typesuccesserrorwarninginfo等），可以在配置对象中添加type属性。你原本的代码是这样的：Javascript浅色版本你可以这样加上type类型：Javascript浅色版本。