- 博客(41)
- 收藏
- 关注
RSS订阅
原创 从零开始创建vue3项目——包含项目初始化、element-plus、eslint、axios、router、pinia、echarts
从零开始创建vue3项目——包含项目初始化、element-plus、eslint、axios、router、pinia、echarts
2024-07-23 17:41:22
2946
原创 Vue2函数式组件实战：手写可调用的动态组件，适用于toast轻提示、tip提示、dialog弹窗等
在Vue2开发中，函数式组件提供了一种动态调用的灵活方案，特别适合全局弹窗、消息通知等需要脱离当前组件树的场景。本文通过实战代码演示如何实现一个可命令式调用的组件：通过`Vue.extend`创建构造器，结合单例模式管理实例，并自动处理DOM挂载与销毁。相比传统组件写法，函数式组件无需预置模板即可在任意位置调用，但需注意手动管理实例生命周期以避免内存泄漏。文章详细剖析了核心实现逻辑，对比了不同方案的优劣，并提供了多实例支持、SSR兼容等进阶优化建议，帮助开发者在灵活性与可维护性之间取得平衡。适用于需要动态控
2025-04-01 16:53:53
488
原创 CSS布局陷阱：max-width与定位属性组合引发的意外折行及解决方案
在CSS布局实践中，开发者常会遇到一个隐蔽的排版问题：当元素同时设置`max-width`与定位属性（absolute/fixed）时，配合`left`偏移和`transform`变换使用，会出现内容未达最大宽度却提前折行的异常现象。其本质原因是定位元素与变形属性的组合导致逻辑可用空间被压缩——浏览器在计算`left`百分比偏移时参考父容器宽度，而`transform`的百分比转换却基于元素自身宽度，形成环形依赖的宽度计算。通过创建分层容器结构，将定位属性与尺寸控制分离（外层容器承载`position/tr
2025-03-24 16:41:14
492
原创 仿Ant Design Vue风格自定义浏览器滚动条样式
本文详细讲解了如何通过CSS自定义浏览器滚动条样式以匹配Ant Design Vue风格。核心步骤包括：使用::-webkit-scrollbar系列伪元素选择器定制滚动条轨道、滑块、箭头按钮样式，重点解决了默认样式不统一的问题。关键代码演示了滚动条宽度、滑块圆角、悬停效果及SVG箭头图标集成，同时指出需关注-webkit前缀兼容性和移动端适配要点，为Ant Design Vue项目提供即用方案。
2025-03-11 13:22:00
432
原创 vue2项目中使用markdown-it插件教程，同时解决代码块和较长单词不换行问题
markdown-it插件可以将流式数据转换为markdown格式，并渲染成html，在页面中展示，# 可能遇到的问题1. markdown-it中渲染代码块时，转换为code标签，导致内部段落不会自动换行，不分段会导致撑开宽度，设置white-space:normal即可2. markdown-it组件中，如果输入较长的单词，不会自动换行，导致宽度撑开；结合::v-deep和*选择器，在markdown-it组件内设置word-break: break-all 和 overflow-wrap: br
2025-03-07 17:03:07
2050
原创 Vuex 跨 Module 方法调用，使用root:true解决
开启命名空间(namespaced: true)对于防止多个模块间可能存在的同名mutation/action造成干扰；使用 { root: true } 让特定上下文中发生的更改能被正确识别并应用至整个应用程序范围内的目标位置；
2025-02-22 17:15:52
320
原创 前端js面试知识点思维导图（脑图）
本文围绕 js 相关面试要点展开，涵盖数据类型、继承、this、作用域、数组、异步编程、内存泄漏、es6、原型、执行上下文等方面，具体涉及各知识点的概念、判断方法、实现原理、应用场景及相关特性等内容。
2024-11-29 16:57:55
1049
原创 解锁 Vue 项目中 TSX 配置与应用简单攻略
本文探讨在 Vue 项目中如何配置 TSX 写法，涉及安装关键插件到 Vite 与 TypeScript 的详细配置步骤。同时，展示了 TSX 在 Vue 中的各种实用语法示例，包括 v-model、v-show、v-if 等常见指令的 TSX 实现方式，以及数组遍历、事件绑定、样式引入和父子组件传参等重要应用场景。
2024-11-27 17:54:17
1005
原创 tsx中使用el-dialog设置visible.sync，解决弹窗右上角叉号失效问题
在 Vue 2 中，.sync 修饰符用于在父子组件之间同步属性值。然而，在 TSX 中并没有类似的 .sync 修饰符。如果要在 TSX 中实现类似的功能，需要手动实现。具体来说，可以通过监听 update:visible 事件来更新 dialogVisible 的值。
2024-11-22 09:37:44
912
原创 vue前端使用pdfjs与pdfdist-mergeofd 实现预览pdf并翻页，同时解决预览pdf显示模糊的问题
pdfjs与pdfdist-mergeofd 实现预览pdf并翻页，同时使用css的transform属性解决预览pdf显示模糊的问题
2024-10-28 10:19:04
1241
原创 使用js和canvas、html实现简单的俄罗斯方块小游戏
使用js和canvas、html实现简单的俄罗斯方块小游戏，点击开始游戏后，使用键盘上的←→控制移动，↑控制方块旋转，↓控制方块加速下落，累计一行即可消除并获得分数，触碰到顶部时游戏结束html代码复制即用，可阅读注释
2024-10-24 17:23:40
1338
原创 解决vue使用pdfdist-mergeofd插件时报错polyfills
该插件主要是为了解决pdf-js和ofd-js共同使用时产生的依赖冲突问题，这个错误是由于 pdfjs-dist 库在 Webpack 5 中缺少对 Node.js 核心模块的 polyfill。Webpack 5 不再默认包含这些 polyfill，因此需要手动配置它们。
2024-10-24 16:20:23
511
原创 使用js和canvas实现绘制一只丑萌的小猫，一步步绘制
使用js和canvas实现绘制一只丑萌的小猫，一步步绘制，闲来无事就画了个这个东西，真的怪丑的，大家看个乐子就好，下面的html文件复制即用
2024-10-18 17:25:00
668
原创 前端vue相关常见面试题，包含MVVM、双向绑定原理、性能优化、vue2和vue3性能对比等
前端vue相关常见面试题，包含MVVM、双向绑定原理、性能优化、vue2和vue3性能对比等
2024-09-30 17:15:43
1647
原创 前端项目场景相关的面试题，包含验证码、图片存储、登录鉴权、动态路由、组件划分等项目场景实际的面试题
前端项目场景相关的面试题，包含验证码、图片存储、登录鉴权、动态路由、组件划分等项目场景实际的面试题
2024-09-30 17:13:45
1846
1
原创 vue结合element-ui实现列表拖拽变化位置，点击拖动图标拖动整个列表元素，使用tsx格式编写
vue结合element-ui实现列表拖拽变化位置，点击拖动图标拖动整个列表元素，使用tsx格式编写
2024-09-30 16:40:43
988
原创 前端算法学习，包含复杂度、双指针、滑动窗口、二叉树、堆等常见题型和方法，含leetcode例题
前端算法学习，包含复杂度、双指针、滑动窗口、二叉树、堆等常见题型和方法，含leetcode例题
2024-09-23 16:33:42
450
原创 前端面试常见手写题,包含手写实现 new instanceof 浅拷贝 深拷贝 call/apply 防抖节流 promise 函数柯里化 快速排序、桶排序、计数排序、promise.all等
前端面试常见手写题,包含手写实现 new instanceof 浅拷贝 深拷贝 call/apply 防抖节流 promise 函数柯里化 快速排序、桶排序、计数排序、promise.all、数组和对象扁平化、async/await等
2024-09-11 20:46:24
584
原创 前端CSS面试常见题
前端CSS面试常见题，包含边界塌陷、bfc、csshack、src和href的区别、浏览器内核、兼容性问题、flex和grid优劣对比
2024-09-11 16:02:30
689
原创 vue2结合element-ui使用tsx格式实现formily自定义组件
使用vue2结合@formily/element，使用tsx文件格式编写，实现自定义formily组件
2024-09-02 15:09:45
929
原创 vue3配置permission.js和router、pinia实现路由拦截
vue3配置permission.js和router、pinia实现路由拦截
2024-08-01 15:33:13
1313
1
原创 记录使用el-form的resetFields时遇到的表单数据回显失败的问题，去除nextTick解决
记录使用el-form的resetFields时遇到的表单数据回显失败的问题，去除nextTick解决
2024-07-25 21:11:46
771
原创 使用el-table的案例小结——包含跨页多选、双击行、分页器、编辑\删除行、动态根据分页生成序号
使用el-table的案例小结——包含跨页多选、双击行、分页器、编辑\删除行、动态根据分页生成序号
2024-07-24 10:40:57
1904
原创 uniapp微信小程序连接websocket报错1006 abnormal closure
uniapp微信小程序连接websocket报错1006 abnormal closure
2024-06-09 21:20:59
1491
原创 福州大学苏立超老师《大数据库系统》第二章复习提纲“NoSQL和NewSQL”
福州大学苏立超老师《大数据库系统》第二章复习提纲“NoSQL和NewSQL”
2024-06-07 18:32:47
900
2
原创 Vue3中实现父子组件通信，有props，emit，ref绑定，provide方法
Vue3组件通信是构建复杂应用的核心技能，本文精要解析四种高效通信方案：1. Props传值 - 父组件通过属性绑定传递数据，子组件使用defineProps接收，实现单向数据流控制；2. 自定义事件 - 子组件通过defineEmits定义事件，利用$emit触发父组件监听的方法，完成子到父数据传递；3. 组件引用 - 使用ref绑定组件实例，结合defineExpose暴露子组件方法，实现跨组件直接调用；4. 依赖注入 - 通过provide/inject实现跨层级通信，轻松管理全局状态。全文基于Vue
2024-06-04 15:55:40
647
原创 vue实现在元素左上角/右下角创建三角形
设置不同的border-width和border-color即可灵活实现不同位置不同方向的三角形，感兴趣的读者可自行尝试。给target设置宽高背景颜色等，这里略过，注意给target添加。类似的要在右下角添加三角形的话。这是左侧目标方向的元素。然后再添加如下代码即可。
2024-06-02 20:20:55
574
1
原创 uniapp微信小程序实现勾选相关协议后手机号快速验证登录
uniapp微信小程序的一键登录只能使用给定的button并设置open-type其中getPhoneNumber绑定的是相关事件可查看:希望实现功能：当用户点击按钮时，先判断是否已勾选自定义的相关协议，（隐私条款之类的），再调用相关手机号快速验证接口。
2024-05-27 16:52:48
1240
前端js面试知识点思维导图（脑图）
2024-11-29
集成vite、axios、element-plus、echarts、pinia、prettier、eslint的vue3模板
2024-10-12
基于adam优化的对抗数据生成
2024-10-08
使用urlib实现爬虫，获取东方财富网的股票信息
2024-09-29
配置了socket合法域名后还是无法连接，如何解决？（相关搜索：微信小程序）
2024-05-21
TA创建的收藏夹 TA关注的收藏夹
TA关注的人