- 博客(50)
- 收藏
- 关注
RSS订阅原创 v-copyText 自定义指令 —— 复制文本内容
v-copyText该指令用于在元素上绑定点击复制功能。钩子在指令绑定到元素之前触发。如果，则将回调函数存储到，以便在复制完成后调用。否则，将要复制的文本存储在，并绑定click事件执行复制逻辑。
2025-04-03 14:32:38
349
原创 Vue3 + Element Plus + AntV X6 实现拖拽树组件
在本篇文章中，我们将介绍如何使用 Vue 3 和 Element Plus 结合@antv/x6实现树形结构的拖拽功能。用户可以将树节点拖拽到图形区域，自动创建相应的节点。我们将会通过简单的示例来一步步讲解实现过程。
2025-04-02 17:50:35
755
原创 AntV X6 画布配置最佳实践：完整指南
进行流程图、DAG（有向无环图）或其他图形编辑器开发时，合理的画布配置能够极大地提升用户体验和交互效率。组件的初始化配置项决定了整个画布的交互行为。希望这份指南能帮助你优化 X6 画布交互，让你的。等关键功能，并提供优化建议，助你打造更流畅的图形编辑环境。
2025-04-02 16:21:03
364
原创 前端开发中的常用工具函数解析与应用
这些工具函数在前端开发中非常常见且实用，它们帮助我们简化了数据验证和类型判断的过程，减少了代码重复性，提升了开发效率。无论是在表单验证、数据处理，还是链接判断中，这些函数都能派上用场，尤其是在处理用户输入、外部数据交互以及安全性验证时。
2024-12-26 15:53:45
390
原创 Vue 3 + Element Plus 实现文件上传组件：详细解析与实现指南
通过结合 Vue 3 的响应式特性和 Element Plus 的el-upload组件，我们实现了一个功能完善的文件上传组件。这个组件不仅支持文件的上传、校验和删除，还提供了上传进度提示和错误处理。通过自定义的事件机制，我们可以将文件列表从子组件传递到父组件，确保数据的同步和状态管理。在实际开发中，根据不同的需求，组件的功能可以进一步扩展，比如支持上传进度条、拖拽上传、批量处理等。希望通过这篇文章，你能深入理解 Vue 3 文件上传组件的实现，并能够在自己的项目中灵活应用。
2024-12-26 15:52:04
1565
原创 常用JavaScript工具函数封装与优化
在现代Web开发中，许多应用程序都需要处理常见的操作，如日期格式化、表单重置、数据字典回显、树形结构数据构建等。为了提高开发效率并减少重复代码，我们可以将这些常用的操作封装成通用函数，以便在多个项目中复用。通过将这些通用的方法封装成独立的函数，我们能够提高开发效率，并减少重复代码。这些函数能够帮助开发者轻松实现常见的需求，如日期格式化、表单操作、树形结构处理等，进而提升整个项目的可维护性和开发体验。方法可以将两个对象进行递归合并，合并过程中如果遇到对象类型的值会递归合并，非对象类型的值会覆盖源对象中的值。
2024-12-24 17:47:53
551
原创 Vue.js 实现树形结构管理系统的前端设计与实现
本文通过一个树形结构管理系统的实现，展示了如何使用 Vue.js 和 Element UI 组件来处理复杂的数据展示和操作。通过灵活的组件化设计、实时搜索与过滤、表单校验与提交等技术，前端开发可以有效地管理和展示层级结构数据。对于开发者来说，这样的系统提供了很多值得借鉴的设计思路和实现方式，特别是在数据管理和用户交互方面的优化。
2024-12-24 17:45:51
995
原创 vue2 pdf word 下载 用Docxte pdf Word 下载 mplater和JSZip在Vue项目中生成Word文档
这些辅助函数用于处理图像数据，将图片转换为Base64格式，并进一步转换为ArrayBuffer格式，以便在文档中使用。这个函数用于读取模板文件，填充数据，并生成Word文档。函数内部包含读取文件的异步操作，并且处理了可能的错误。在Vue.js项目中，有时我们需要根据模板生成带有动态数据和图片的Word文档。这一部分代码相对复杂，因为涉及到图像处理和数据转换。在Vue组件中，可以调用这些函数来生成和下载Word文档。在项目中创建一个JavaScript文件，例如。如果文档中需要插入图片，可以使用。
2024-07-31 10:35:39
495
原创 uniapp 面试题
Uniapp 是一个基于 Vue.js 的多端应用开发框架，由 DCloud 开发。它允许开发者使用一套代码同时构建 iOS、Android、H5、小程序（微信、支付宝、百度、字节跳动、QQ、钉钉）、快应用等多个平台的应用。
2024-06-17 12:16:40
3326
原创 uniapp面试题
可以使用uniapp提供的API，如uni.navigateTo、uni.redirectTo、uni.switchTab、uni.reLaunch等。开发语言： uniapp使用Vue.js，React Native使用React，Flutter使用Dart。集成测试： 使用Cypress、Puppeteer等工具进行集成测试，模拟用户操作，测试应用的整体功能。自定义组件： 在components目录中创建组件，并在需要的地方引入和使用。性能优越： 使用原生渲染，性能接近原生应用，保证了良好的用户体验。
2024-06-14 11:44:22
1422
原创 在前端开发中，文件上传和预览功能是常见的需求之一。本文将介绍如何利用 Ant Design Vue 组件库实现文件上传与预览功能。我们将使用 Ant Design Vue 中的 Upload 组件来实
- 使用 Ant Design 的 Upload 组件实现文件上传 --> < a-upload v-model: file-list = " fileList " :action="uploadFileParams.url" :headers="uploadFileParams.headers"
2024-05-14 11:22:12
1302
1
原创 wangeditor 富文本 使用及 上传本地图片的方法
文章标题：Vue组件实现富文本编辑器文章摘要：本文介绍了如何使用Vue和Wangeditor插件实现富文本编辑器组件，并详细解释了组件中的各个部分和功能。Vue组件实现富文本编辑器在Web开发中，富文本编辑器是一个非常常见的功能，它能够让用户以所见即所得的方式编辑和排版文本内容。本文将介绍如何使用Vue和Wangeditor插件实现一个富文本编辑器组件。bashnpm install @wangeditor/editor-for-vue2. 创建富文本编辑器组件在Vue项目中，创建一个名为RichT
2023-10-30 16:43:12
1723
原创 Vue3 实现 PDF 预览与下载 缩放 上一页和下一页 放大和 缩小 功能
在现代的 Web 应用程序中，PDF 文件是一种非常常见的文件格式，因为它在多个平台和设备上都能保持一致的文档格式，并且不易受病毒攻击。因此，在许多项目中实现 PDF 预览和下载功能是非常必要的。在本次教程中，我们将使用 Vue3 和 vue-pdf-embed 插件来实现 PDF 预览功能。vue-pdf-embed 是一个基于 PDF.js 的 Vue 组件库，可以轻松嵌入 PDF 文件并进行预览。在上面的代码中，我们已经编写了 downloadPDF() 函数，用于实现 PDF 文件的下载。
2023-10-30 14:51:49
2716
1
原创 基于Vue3和anta的拖拽模态框组件实现车牌号输入功能
创建一个拖拽模态框组件，其中包含一个显示车牌键盘的区域和一个确定按钮。使用Ant Design Vue组件库的DragModal组件来实现拖拽功能，并设置相关样式。在车牌键盘区域内，使用Vue的v-for指令遍历键盘按键，并为每个按键添加点击事件。在确定按钮上添加点击事件，用于提交输入的车牌号。使用Vue的响应式数据机制，监听车牌号的变化，并在变化时更新视图。
2023-09-14 15:17:57
1140
1
原创 自定义导出弹窗
本文将介绍一个基于 Vue3 的组件开发实例，实现了一个自定义导出弹窗。该弹窗允许用户选择需要导出的字段，并可以拖动排序。最后，用户可以保存设置和导出数据。显示一个弹窗来自定义导出配置加载状态显示左侧区域展示可选字段列表右侧区域展示已选字段，并支持拖拽排序保存设置按钮，用于保存用户选择的字段导出按钮，用于导出数据错误处理和加载状态反馈。
2023-08-14 14:01:29
366
原创 下拉选择框组件
以上就是完整的组件代码。在模板部分，我们使用了Ant Design的a-select组件来实现下拉选择框功能，根据需要添加了一些相关属性和事件处理函数。脚本部分包含了一些用于处理选择值、获取选项列表和更新选择状态的逻辑。样式部分定义了一些简单的样式规则。
2023-08-14 11:23:13
331
原创 基于 Vue.js 的可拖拽排序的表格组件
该组件使用了 Vue 3 的 ref、computed 和 defineComponent，以及 setup 钩子函数。在 setup 钩子函数中，我们定义了 newDataSource 这个计算属性，用于监听 props.dataSource 的变化，并在发生变化时派发名为 update:dataSource 的事件向父组件传递新的数据源。同时，我们也定义了几个响应式的变量 dragItem、dragIndex 和 targetArr，分别用于存储当前拖拽的项、当前拖拽项的索引和目标行的数组。
2023-08-14 11:01:09
259
原创 实现可拖拽功能的Vue模态框组件 基于antd Vue3 加ts
在Vue开发中，我们经常需要使用模态框组件来展示提示、对话框等信息。今天我们将介绍如何实现一个可拖拽的Vue模态框组件，使用户可以通过拖拽模态框的标题栏来改变其位置，使用场景后代管理系统。首先，我们需要使用Vue的单文件组件来构建我们的模态框组件。在单文件组件中，我们可以定义模态框的HTML模板和相关的JavaScript逻辑。
2023-08-09 11:03:24
747
原创 uniapp表格
在Vue.js中，使用表格来展示数据是一项常见的任务。本文将为大家解析和注释一个Vue.js可滚动表格组件的代码，帮助读者更好地理解和使用该组件。
2023-07-24 18:17:13
1147
原创 vue2 uniapp加 Search 搜索 或Input 输入框 实现车辆软键盘 app
uniapp 选择车辆组件是一个基于Vue.js的可复用组件，它允许用户输入车牌号并从预定义的车辆列表中选择车辆。组件提供了自动联想和键盘控制功能，以便用户能够快速、方便地选择车辆。
2023-07-11 17:51:17
523
原创 数据持久化vue
在仓库 localStorageTodo(‘todo’).value || []设置 localStorage.set(‘todolist’,state)获取localStorage.get(‘todolist’),
2023-05-11 22:34:57
83
原创 创建项目vue
Vite是一款基于ESM原生模块化开发的构建工具，可以快速启动项目并提供快速的热更新服务。以上就是使用Vite创建Vue3项目的基本步骤，Vite的热更新机制可以在修改代码后快速更新页面，大大提高了开发效率。打开浏览器，在 http://localhost:8080/ 查看项目。打开浏览器，在 http://localhost:3000/ 查看项目。以上就是Vue2创建脚手架的基本步骤，可以根据需要进行配置和修改。安装Node.js和npm（已安装可跳过）安装Node.js和npm（已安装可跳过）
2023-05-11 22:26:08
68
原创 css伪类选择器
first-child：选择某个元素的第一个子元素。:last-child：选择某个元素的最后一个子元素。:nth-child()：选择某个元素的特定子元素。:hover：选择鼠标悬停在元素上的状态。:active：选择元素被点击时的状态。:visited：选择已访问链接的状态。:not()：选择不符合指定条件的元素。:focus：选择元素被聚焦时的状态。
2023-05-03 14:45:44
74
原创 pc端自适应
安装amfe-flexible和postcss-pxtorem。postcss-pxtorem将px转为rem；在main.js中引入amfe-flexible。根目录下添加postcss.config.js。amfe-flexible可进行屏幕自适应；
2023-05-01 19:37:02
291
原创 Vue 项目中，可以使用 postcss-pxtorem 插件将 px 单位自动转换为 rem 单位
这样配置后，项目中的 CSS 文件中的 px 单位就会自动转换为 rem 单位。例如，如果 rootValue 设置为 16，则 1px 会转换为 0.0625rem。在 Vue 项目中，可以使用 postcss-pxtorem 插件将 px 单位自动转换为 rem 单位。
2023-05-01 18:50:43
2137
原创 前端实现购物车逻辑
在购物车组件中，定义一个判断是否全选 使用计算属性 使用get 和set方法 在get中判断在仓库购物车的数组里的sale属性是否位true使用数组方法ever 全部勾选返回true反之亦然，改变是否勾选课程使用set方法接收一个布尔值遍历数组把sale属性改成传过来的值。当用户修改商品数量时，会更新购物车中对应商品的数量，并通过reduce方法重新计算总价。最后将计算出来的总价赋值给total属性，从而实现实时更新总价的效果。可以通过监听商品数量变化的事件计算属性，在事件处理函数中重新计算总价。
2023-04-25 21:35:19
872
原创 参与项目需求讨论，确定项目周期，项目使用框架和插件
在确定使用的技术栈时，需要考虑项目的需求和目标，以及团队的技术水平和经验。可以选择适合项目需求的框架和插件，并根据需要进行自定义开发。通过以上步骤，可以初步确定项目的需求、周期、技术栈和插件，并为后续的开发工作做好准备。在项目需求讨论中，需要了解项目的需求和目标，例如项目的功能、用户群体、预算等。根据项目的需求和目标，可以初步确定项目的周期和进度。在使用插件时，需要根据项目的需求和目标选择适合的插件，并根据需要进行自定义开发。在参与项目需求讨论时，需要了解项目的需求和目标，确定项目周期和使用的技术栈。
2023-04-25 19:43:09
128
原创 减少白屏时间和首屏加载时间，Performance性能分数调优至92
可以使用 gzip、brotli 等压缩算法来压缩资源，减少资源的大小，从而减少页面的加载时间。在打包配置中，可以使用 webpack-bundle-analyzer 等工具来分析项目中的依赖和代码体积，并进行优化。可以使用 webpack 的代码分割功能来拆分代码，减少首屏加载的代码量。在路由中可以使用路由懒加载来延迟加载路由组件，从而减少首屏加载的时间。在 Vue 中可以使用异步组件来延迟加载组件，从而减少首屏加载的时间。在使用图片时，可以使用图片压缩工具来减小图片的大小，从而减少页面的加载时间。
2023-04-25 18:55:13
498
原创 管理系统全局功能实现提升用户体验
其中，settings 对象中存储了用户的自定义设置信息，mutations 中定义了更新 settings (设置)的方法，actions 中定义了异步更新 settings 的方法。其中，state 中的 settings 对象从 localStorage 中读取，mutations 中更新 settings 的同时也将其存储到 localStorage 中。可以在 Vuex 中定义一个全局的 settings(设置) 对象，用来存储用户的自定义设置信息。在组件中使用自定义设置。
2023-04-25 16:45:16
82
原创 负责基于前端的权限设置，通过全局导航守卫配合用户角色和算法，实现管理控制各级用户的路由访问 权限
如果该路由需要登录才能访问，则判断用户是否已经登录，如果未登录则跳转到登录页面；如果用户已经登录，再判断该路由需要的角色是否包含当前用户的角色，如果不包含则跳转到禁止访问页面。如果该路由需要登录才能访问，则判断用户是否已经登录，如果未登录则跳转到登录页面；如果用户已经登录，再判断该路由需要的角色是否包含当前用户的角色，如果不包含则跳转到禁止访问页面。在全局导航守卫中，监听路由的变化，根据当前用户的角色和路由的权限信息来判断是否允许访问该路由。在登录时，根据用户信息确定用户的角色 是老师、学生等。
2023-04-25 00:06:02
112
原创 使用 element ui 和 sass 进行后台页面的搭建
在项目中使用 Element UI 和 Sass 首先需要安装它们。在项目中创建一个 main.scss 文件，里面包含了所有的样式代码。Element UI 中文文档：https://element.eleme.cn/#/zh-CN。在项目中使用 Element UI 组件可以极大地提高开发效率和代码质量。Sass 中文文档：https://www.sass.hk/docs/在项目中使用 Sass 可以让样式代码更加简洁、易读和易于维护。安装 Element UI 和 Sass。编写 Sass 样式。
2023-04-24 23:34:26
421
原创 搭建mumu模拟器
我这台电脑HBuilder X安装路径D:\软件\电脑软件\HBuilderX.3.7.3.20230223\HBuilderX所以adb的路径为:D:\软件\电脑软件\HBuilderX.3.7.3.20230223\HBuilderX\plugins\launcher\tools\adbs将adb的路径配置到HBuilder X开发工具中。
2023-04-22 12:50:18
365
原创 uniapp面试题
存储：uni.setStorage({key:“属性名”，data:“值”})接收：uni.getStorage({key:“属性名”,success(val)
2023-04-21 11:52:52
208
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人