- 博客(16)
- 收藏
- 关注
RSS订阅原创 ant message相同的通知只展示一次
摘要：该方案针对使用axios统一封装时，页面同时调用多个接口导致的重复登录过期提示问题，提出使用防抖机制优化ant-design-vue的message组件。核心实现包括：1）设置超长关闭时间（100秒）；2）通过消息管理器缓存实例并建立key-value映射；3）重复消息时重置定时器；4）提供原型方法统一管理消息生命周期。该方法有效避免了多个相同提示的同时弹出，同时保持标准API调用方式，实现了消息的智能防抖控制。
2025-10-31 16:21:49
237
原创 axios拦截重复请求
本文介绍了如何通过axios拦截器实现重复请求的自动取消功能。核心方法是使用Map对象存储请求的唯一标识和对应的取消函数。请求标识由请求方法、URL和接口类名组合生成，确保唯一性。在请求拦截器中，若发现重复请求则取消前一次请求；在响应拦截器中，及时移除已完成请求。该方案可有效避免重复请求，同时保持特殊情况下允许相同接口调用的灵活性。
2025-08-28 14:18:18
523
原创 nuxt不同开发环境使用不同的资源地址
本文介绍了将官网资源迁移到OSS以提高加载速度，同时确保本地开发调试的方案。解决方案分四步：1）开发时资源放在本地dev_static目录，部署时上传OSS；2）配置静态资源基础路径变量；3）全局混入计算属性、过滤函数和方法；4）Nuxt配置Less全局变量。针对不同使用场景：img标签需替换为自定义组件，CSS背景图使用Less变量，内联样式通过混入方法处理。该方案实现了开发与生产环境资源路径的无缝切换。
2025-05-26 13:51:32
275
原创 设置ant的drawer的底部弹出设置宽度
该自定义指令bottomDrawerWidth用于在Vue组件中动态设置底部抽屉的宽度，并处理相关交互逻辑。指令通过Vue.nextTick确保DOM更新后执行，首先检查抽屉是否可见，若不可见则直接返回。接着，获取抽屉内容容器并设置其宽度、边距、圆角等样式，同时移除阴影效果。指令还定义了点击处理函数，支持通过点击遮罩关闭抽屉，并阻止内容区域点击事件冒泡。最后，在组件销毁时移除事件监听，避免内存泄漏。该指令适用于需要自定义底部抽屉样式和行为的场景。
2025-05-15 09:58:26
179
原创 nuxt SSR服务端渲染官网 调用后端接口 新增的新闻详情页未同步更新 页面404问题
使用nuxt的ssr服务端渲染通过 npm run generate打包只会生成当前存在的新闻详情页后期新增的详情页因为不存在会导致页面404。
2025-04-02 09:42:40
398
原创 vue-scroll内的组件设置height:100%无效
首先从蓝色框我们可以明显看出子元素已经设置了height:100% 但是你会发现 不论你的高度百分比是多少它的高度始终是由内部元素撑开的，不会根据高度百分比的变化而变化。这是因为父元素只设置了min-height，但并没有确定的高度，因此子元素无法根据父元素的高度进行计算。但是这时候我们如果去看__view的高度的话可以看见 他是有高度的并且是他父元素高度的100%这个代码我们理想的状态肯定是蓝色的块高度是屏幕的100%,但是结果却是红色块沾满了屏幕。我们先看下vue-scroll的结构。
2024-01-19 17:28:51
1194
1
原创 vue的click与dblclick冲突
事件触发时设置一个短暂的延时，在这个延时内检查是否还有双击事件触发。如果双击事件在延时内触发，可以认定为双击，否则执行单击操作。可以使用自定义指令，监控点击和双击事件，并根据事件之间的时间间隔来判断是单击还是双击。这两种方法都可以根据实际情况选择适用的方式，根据需求调整延时时间或其他参数。，可能会遇到点击和双击事件之间的冲突。在Vue.js中，如果你同时使用了。），导致两个事件之间产生冲突。）会触发两次点击事件（
2024-01-16 09:58:04
1884
1
原创 拾色器 window.EyeDropper is not a constructor
但是我们有时候会遇到明明我在本地测试的是可以正常使用的，但是上了测试站点却发现在控制台打印window.EyeDropper却是undefined。（HTTPS）中可用。也就是说即使浏览器兼容也只有https协议的页面可以使用。我们在自定义调色盘的时候可能需要使用到取色器。这是因为这个api仅在一些支持的历览器的。
2023-12-13 14:41:04
409
1
原创 uniapp在App.vue中异步获取的数据并存储到vuex中其他页面获取不到
由于用户信息是在app.vue中异步获取的，我们在页面挂载完成后无法获取到异步获取的信息（具体原因目前还没找到，使用await也不行）。在app.vue中先执行getUserInfo函数，将获取用户信息的promise异步操作挂载到Vue的原型上，在在this.$getuser.then执行异步获取数据后的操作。我们在使用uniapp的时候可能会遇到在页面挂载完成后需要使用用户信息，但是在刷新后，却无法获取到信息。想要解决可以使用下面方法。当然你也可以监听用户信息，在用户信息获取到在重新执行初始化函数。
2023-07-30 11:27:44
1525
1
原创 uniapp使用this.$refs.content.addEventListener提示 addEventListener is not a function 错误
这是因为在 Vue 中，$refs 是一个对象，它直接引用组件实例或 DOM 元素，而不是原生的 DOM 元素。要解决这个问题，可以使用 $el 属性来访问原生的 DOM 元素，然后再使用 addEventListener。通过使用 $el 属性，可以访问到 this.$refs.content 的原生 DOM 元素，并且可以正确地使用 addEventListener。
2023-07-14 17:47:51
2757
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人