- 博客(234)
- 收藏
- 关注
RSS订阅原创 Vue 中 this.$emit(‘mount‘) 的妙用
例如在一个组件的 created 钩子中调用 this.$emit('mount')，然后在 mounted 中通过 this.$on('mount', ...) 监听该事件。在 created 钩子中，组件通过 Promise.all 异步加载数据（如部门列表、部署时间等）。在 mounted 钩子中，组件的 DOM 已挂载，但需要依赖异步加载的数据来初始化表单或加载表格。通过 $emit('mount')，确保数据就绪后才执行后续逻辑，避免因数据未加载导致的空值错误。二、这种模式的核心作用。
2025-06-12 16:45:43
35
原创 设置vue-quill-editor编辑器不可编辑
这行代码的作用是尝试通过修改DOM属性来禁用Quill编辑器的编辑功能，不推荐的原因是：直接操作DOM属性可能绕过Quill内部状态管理，引发不一致的问题。Quill官方推荐使用enable方法控制状态，也就下面这种方法。
2025-06-06 10:30:59
135
原创 vue-quill-editor 富文本编辑器禁止编辑
需求：详情页只允许查看富文本编辑器的内容，不可编辑。更改鼠标指针样式 */1.设置编辑框不可编辑。2.设置工具栏不可点击。
2025-06-04 09:57:50
372
转载 vue实现富文本编辑器上传（粘贴）图片
在使用vue-quill-editor粘贴图片的时候，经常是将图片转给base64，再传到数据库，但是base64不太好存储。先将图片上传服务器，在将图片插入到富文本编辑器，同时光标后移动一位。使用的富文本编辑是:vue-quill-editor。
2025-05-28 13:33:38
31
原创 解决文件和图片下载乱码问题❗️
当下载图片或文档时，若未指定 responseType: ‘blob’， ，axios 默认按文本处理，导致二进制数据损坏。在调用 upload 接口时，确保指定 responseType: ‘blob’， 以便正确接收二进制数据。设置 responseType: ‘blob’ 后，浏览器正确解析二进制流，文件得以完整保存。问题原因：下载文件时未正确设置响应类型，导致二进制文件被错误处理。responseType: ‘blob’ // 添加 responseType。问题：1.下载的文件乱码；
2025-05-20 11:30:59
223
原创 el-tree中的this.$refs.tree.setChecked
第一种写法需确保node-key="menuId"且数据准确，适合明确配置的场景。因为它不依赖node-key的配置，直接通过节点对象操作，更直观且不易出错。需确保node.menuId存在且与node-key配置一致。此方式不依赖node-key的配置，通用性更强。直接传入节点对象（node），
2025-04-27 10:06:20
913
原创 问题：el-tree点击某节点的复选框由半选状态更改为全选状态以后，点击该节点展开，懒加载出来子节点数据以后，该节点又变为半选状态
用forcedFullCheckedNodes来记录那些被用户手动全选的节点ID，这样在加载子节点时，可以检查父节点是否在这个Set中，如果是，就强制其子节点为全选状态，从而保持父节点的全选状态。用`Set`来跟踪那些被强制全选的节点，以确保即使子节点加载后，父节点的状态仍保持正确。子节点加载后，组件重新计算父节点状态，发现并非所有子节点被选中，因此父节点恢复半选状态。用户点击父节点复选框将其从半选变为全选（此时子节点尚未加载）。点击节点展开触发懒加载，加载子节点。当子节点加载后，自动选中所有子节点。
2025-04-18 14:22:50
375
原创 el-tree节点半选状态的设置，以及父子节点之间的联动必要点
仅通过 setChecked 无法实现半选效果，需直接操作节点的 indeterminate 属性。// 手动设置半选状态。
2025-04-18 12:51:05
193
原创 一个页面有多个页签，取消当前所处页签的权限
在路由切换或权限变更时，检查当前页签是否在 validTabs 中。根据用户权限和页签配置，生成当前可访问的页签列表。若当前页签失效，跳转至首个有效页签或默认页签。步骤1：动态获取可访问页签列表。步骤2：检查当前页签是否有效。步骤3：自动重定向至有效页签。
2025-04-15 09:52:10
159
转载 el-tree和el-table联动
label: "全部",type: 0,label: "一级 1",type: 0,label: "二级 1-1",type: 1,// 对应表格数据的id},],},label: "一级 2",type: 0,label: "二级 2-1",type: 1,},label: "二级 2-2",type: 2,},],},label: "一级 3",type: 0,label: "二级 3-1",type: 1,},label: "二级 3-2",
2025-02-27 17:31:11
60
转载 前端通过‘代理配置’的方式解决跨域
同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。如果没有vue.config.js文件，那就找到项目中config文件夹中的index.js文件。这是因为我们发送请求的端口是8081，与服务器的端口不一致，导致跨域问题。
2025-02-08 16:29:19
314
原创 qs.stringify（data）和JSON.stringify（data）的区别
如果你需要将数据序列化为 JSON 格式，使用。如果你需要将数据序列化为 URL 查询字符串格式，使用。两者在功能和用途上有明确的区分，选择合适的方法取决于你的具体需求。
2025-01-24 17:13:16
1000
转载 一篇文章搞懂Vuex
其中参数state参数是必须的，也可以自己传递一个参数，如下代码，进行计数器的加减操作，加法操作时可以根据所传递参数大小进行相加，减法操作没有传参每次减一。
2025-01-17 14:53:06
43
原创 JSON.stringify（res，null，2）的含义
转换为格式化后的 JSON 字符串，便于阅读和展示。这在调试、日志记录、数据传输等场景中非常有用。例如，当你需要将一个复杂对象的结构清晰地展示在控制台或日志文件中时，使用。可以让输出的字符串具有良好的格式，方便查看各个属性及其值。将 JavaScript 对象。
2025-01-13 16:41:08
575
原创 删除VSCode上 origin/分支名，但GitLab上实际上不存在的分支
如果在 Visual Studio Code (VSCode) 中看到的分支在 GitLab 上实际上并不存在，这通常是因为 VSCode 缓存了旧的远程分支信息。这将列出所有的远程分支，你应该会发现那些在 GitLab 上不存在的分支不再显示。这个命令会从所有远程拉取最新的分支信息，并删除那些在远程仓库中已经不存在的分支。这个命令会更新远程分支的引用，并删除那些在远程仓库中已经不存在的分支。这个命令会移除所有已经从远程仓库中删除的分支的本地引用。
2024-12-25 09:47:03
645
转载 Vue项目 跨域 解决方案与 vue.config.js 配置解析
出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。这是因为我们发送请求的端口是8081，与服务器的端口不一致，导致跨域问题。
2024-12-05 11:31:30
680
转载 为什么会产生跨域，以及解决跨域的方法
一、跨域1、为什么会产生跨域答：因为浏览器的同源政策，就会产生跨域。比如说发送的异步请求是不同的两个源，就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑，就会产生一个同源政策，不是同一个地方出来的是不允许进行交互的。2、怎么解决跨域解决跨域的方法：第一种jsonp的方法。第二种使用CORS解决跨域问题，即跨域资源共享，在后端设置响应头部，加一句代码：access-control-allow-origin:"*"或者允许交互的域名。
2024-12-05 11:15:18
189
转载 一个页面从输入URL到页面加载显示完成，这个过程都发生什么？
转载于:https://www.cnblogs.com/WaTa/p/5477374.html。-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。9、生成Dom树、解析css样式、js交互。(DNS解析)，解析获取相应的IP地址。1、首先，在浏览器地址栏中输入url。5、握手成功后，浏览器向服务器发送。3、在发送http请求前，需要。10、客户端和服务器交互。4、浏览器向服务器发起。求，将数据返回至浏览器。
2024-12-05 10:58:42
1450
原创 render-header=null和render-header=（）=＞{}
如果你使用了一个空函数 `render-header=() => {}` 作为 `render-header` 的值，这意味着你提供了一个表头渲染函数，但是这个函数没有返回任何内容（或者返回了 `undefined`）。因此，如果 `render-header=null`，表头里面的 `label` 属性是会起作用的。3. 由于你的 `render-header` 函数返回了 `undefined`（或者没有返回任何内容），它实际上覆盖了 `label` 的作用，导致 `label` 不会被显示。
2024-12-04 09:45:50
421
原创 [element-ui]根据 el-table的某一列值大小设置该列背景颜色宽度
注意：在 CSS 中，`background Size` 属性是用来调整背景图像的尺寸的，而不是用来设置背景颜色填充的宽度。所以是上面的代码使用了 `linear- gradient` 函数来创建一个从左到右的渐变，其中绿色部分根据 `ratio` 的值来决定宽度（以百分比表示），剩余部分则是透明的。这样，您就可以根据 `value ` 的值动态地改变背景绿色的填充宽度了。
2024-11-18 16:03:02
522
1
原创 点击echarts柱状图任何地方都可以进行路由跳转
需求：鼠标悬浮到柱状图上面给E charts设置cursor：pointer样式。问题：鼠标悬浮到柱子上面有小手的图标，但是悬浮到柱子旁边空白地方没有小手的图标。背景：在vue页面点击E charts柱状图任何地方都可以跳转。解决办法：在原来添加小手样式的地方，添加。
2024-10-18 13:34:04
201
原创 重置时把el-tree树节点选中状态取消
在某些情况下，你可能需要在 DOM 更新后清空选中状态，这时可以使用。当你重置树的数据时，可以同时清空选中状态，以确保树的状态完全重置。如果需要更细粒度的控制，可以遍历所有节点，并手动清除其选中状态。如果树组件在对话框中，可以在对话框显示时清空选中状态。根据你的具体需求和树的配置，选择最适合的方法来重置。如果要取消所有选中状态，可以将其设置为。如果你需要设置某个节点为选中状态，可以使用。要重置 Element UI 的。方法来清空所有选中的节点。并取消所有节点的选中状态。
2024-10-15 16:13:48
3862
1
原创 小需求：(vue2) 判断el-table某一行某一格里面是否包含‘百度‘两个字,如果包含，点击‘百度‘两个字跳转到‘百度‘页面，并给‘百度‘两个字加蓝色颜色
**文本处理**：`handleText` 方法中，使用正则表达式查找所有“百度”的出现，并将其替换为一个带有 `style="color: blue;这样，点击的链接文本“百度”将显示为蓝色。这样设置后，表格中的“百度”文字将显示为蓝色，并且点击时会打开新的标签页跳转到百度首页。-- 使用 v-html 来渲染可能包含 HTML 的内容 -->// 使用正则表达式查找“百度”并包装成蓝色链接。{ content: '你好百度！
2024-09-13 14:09:36
326
原创 前端使用AES加密
在前端开发中，使用AES（高级加密标准）加密是一种常见的做法，尤其是在需要保护用户数据安全的情况下。：AES有多种加密模式，如ECB（电子密码本模式）、CBC（密码块链接模式）、CTR（计数器模式）等。：不要在客户端硬编码密钥，考虑使用服务器端加密和解密，只在前端使用加密来保护传输过程中的数据。：AES加密需要一个密钥，通常为128位、192位或256位。密钥的长度决定了加密的强度。：在某些模式下，如CBC，需要一个初始化向量来保证加密的随机性。：当需要使用加密的数据时，使用相同的密钥和模式进行解密。
2024-08-19 10:43:11
858
原创 vue v-for动态渲染元素，元素长度超过限制样式设置
动态渲染元素时，如果元素的长度超过限制，可以通过一些简单的 CSS 和 JavaScript 来实现展示省略号的效果。这样，每项文本的长度都会被动态计算并截断，如果超过10个字符就显示省略号。在 Vue.js 中，使用。的值来控制文本显示的长度。
2024-07-19 13:22:33
616
原创 vue2里面 v-for循环渲染多个E charts柱状图（以6个为例）
如果你需要为6个不同的柱状图配置6组不同的数据，你可以在Vue组件中定义一个数组来存储每组图表的数据和配置。这个示例提供了一个灵活的方式来为多个图表配置不同的数据和配置项。请根据你的实际数据和需求调整。
2024-07-17 17:26:17
617
原创 vue v-for动态渲染元素有的元素带书名号 有的不带怎么实现所有元素左对齐
如果书名号的宽度不固定，可以使用JavaScript来动态计算并调整样式。然后在Vue模板中使用。
2024-07-17 17:23:23
219
原创 每个账号设置独立的cookie
请注意，实际应用中，用户ID的获取和Cookie的设置应该更加安全，例如使用HTTPS来防止中间人攻击，以及确保Cookie的安全性（如设置HttpOnly和Secure属性）。此外，还需要考虑跨域访问控制和用户隐私政策等因素。如果需要为每个账号设置独立的Cookie，可以在Cookie中包含一个与用户账号相关的唯一标识符。这样，即使在同一台电脑上，不同的账号登录时也会设置不同的Cookie，从而区分不同的用户。函数来设置带有用户ID的Cookie。函数会检查这个Cookie，从而识别用户是否为同一账号。
2024-07-11 07:16:53
324
原创 鼠标悬浮时效果：给a标签添加底边线 底边线离文字近一点（文字和底边线代码一致，效果无色差，最重要的是不影响布局）
标签上时，底边线的颜色变为黑色，同时文字颜色也有所变化，以提供视觉反馈。/* 伪元素需要content属性 *//* 确保伪元素在a标签内显示 *//* 为a标签添加一些内边距 *//* 为a标签添加一些外边距 *//* 鼠标悬浮时文字颜色变化 *//* 文字颜色变化过渡效果 *//* 背景颜色变化过渡效果 *//* 鼠标悬浮时底边线颜色 *//* 底边线紧贴底部 *//* 设置相对定位 *//* 移除下划线 *//* 左边界对齐 *//* 右边界对齐 *//* 底边线高度 *//* 初始为透明 */
2024-07-09 10:23:51
458
原创 设置某些路由为公开访问，不需要登录状态即可访问
在单页面应用（SPA）框架中，如Vue.js，路由守卫是一种非常有用的功能，它允许你控制访问路由的权限。Vue.js 使用 Vue Router 作为其官方路由管理器。路由守卫主要分为全局守卫和组件内守卫。请注意，你需要替换登录状态检查逻辑和路由组件的导入路径以适应你的应用程序。此外，确保你的登录状态逻辑是安全的，并且不会暴露敏感信息。
2024-07-07 21:50:26
678
原创 vue和js实现点击跳转 统计点击量 刷新页面不丢 使用localstorage存储
存储点击量是一种简单有效的方法，它允许你即使在页面刷新后也能保留数据。不支持过期时间，因此如果需要在一定时间后清除数据，你需要在代码中手动实现这一逻辑。来获取存储的点击量，如果没有存储则默认为0。点击按钮后，点击量增加，使用。更新存储的点击量，并更新页面上的显示。中是否已有点击量数据，如果没有，则初始化为0。：在点击事件的回调函数中，增加点击量，并更新。：给需要统计点击量的元素绑定点击事件。：在更新点击量后，执行页面跳转操作。// 页面加载时初始化点击量。：在页面加载时，再次从。：在页面加载时，检查。
2024-07-05 08:21:17
602
原创 使用el-col和el-row布局，有版心，一页有两栏布局 三栏布局 四栏布局 使用vue动态渲染元素
这样，你就可以根据用户的操作动态地改变页面的布局列数。：通过Vue的数据属性来控制渲染的列数。使用Vue结合Element UI的。分别定义头部、主要内容和底部。来定义整个页面的容器，其中。
2024-06-30 09:46:54
1440
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人