vue vxe-gantt 甘特图实现子任务拖拽排序
vue vxe-gantt 甘特图实现子任务拖拽排序
通过 row-config.drag 和列设置 drag-sort 启用行拖拽排序功能
查看官网:https://vxeui.com
Github:https://github.com/x-extends/vxe-gantt
Gitee:https://gitee.com/x-extends/vxe-gantt
<template>
<div>
<vxe-gantt v-bind="ganttOptions" v-on= ...
记录---自动生成前端路由最佳实践
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
自动生成前端路由最佳实践
概述
本文档介绍如何使用 vite 和 vite-plugin-pages 在前端项目中自动生成前端路由,通过文件系统结构自动映射为路由配置,减少手动维护路由的工作量。
安装必要依赖
首先需要安装用于自动生成路由的插件:
npm install vite-p ...
vue vxe-gantt 甘特图的使用
vue vxe-gantt 甘特图的使用
查看官网:https://vxeui.com
Github:https://github.com/x-extends/vxe-gantt
Gitee:https://gitee.com/x-extends/vxe-gantt
npm install vxe-pc-ui@4.8.19 vxe-table@4.16.0 vxe-gantt@4.0.0
// ...
import VxeUIAll from 'vxe-pc-ui'
import 'vxe-pc-ui/es/style.css'
import VxeUITab ...
基于Vant4+Vue3+TypeScript的H5移动前端
本H5移动前端项目使用最新的 `Vue3.5`、`Vite6`、`Vant4`、`Pinia`、`TypeScript`、`UnoCSS`、`Vue-i18n` 等主流技术开发,结合我们《SqlSguar开发框架》后端的功能接口,实现了相关的框架基础功能和一些业务案例的功能。另外集成了 `Axios`、`ECharts`、`IconSvg`、`mockjs`、`qrcode`、`dayjs` 等等一些优秀的第三方 ...
记录---为什么你写的 `position: sticky` 不工作?99% 的前端都踩过这个坑
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
前端世界里有很多看似“直白”的属性,比如 position: sticky,听起来像是“粘住某个位置”——只要设置好就能吸附在页面某个位置上,滚动时一动不动。
结果实际开发中你可能经历过以下崩溃三连:
设置了 position: sticky; top: 0;,元素依然随页面滚动;
控制台一 ...
记录---高效前端开发:使用 unplugin-auto-import 实现依赖自动导入
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
unplugin-auto-import:为 Vite、Webpack、Rollup 设计的按需自动导入 API 的强大工具
🔍 开发痛点分析
在日常前端开发中,我们经常遇到以下困扰:
重复导入常用模块 - 如 dayjs、lodash 等工具库
频繁引用枚举值 - 相同的 enum 需要在多个文件中重复导入
全局函数 ...
vue vxe-table 如何实现表格设置默认行高同时又支持自定义行高
vue vxe-table 如何实现表格设置默认行高同时又支持自定义行高
在有些产品需求中,列表需要设置默认行高,还得同时支持自适应高度,那么对于这种情况也是可以实现的,首先将默认行高通过 css 变量修改,然后再启用自定义行高,就可以轻松实现这个功能了。
查看官网:https://vxetable.cn
gitbub:https://github.com/x-exte ...
Diff算法的简单介绍
原生 DOM 更新
graph LR
A[数据变化] --> B[手动查找DOM节点]
B --> C[直接修改节点属性]
C --> D[处理相关依赖节点]
Diff 算法更新
graph LR
A[应用状态变更] --> B[生成新的虚拟 DOM 树]
B --> C[Diff 算法比较新旧树]
C --> D[计算最小变更集]
D --> E[批量更新真实 DOM]
什么是 Diff 算法 ...
vue vxe-table 实现列个性化自定义列功能,自动记忆用户的操作列状态,完整的详细教程
vue vxe-table 实现列个性化自定义列功能,自动记忆用户的操作列状态,完整的详细教程
在开发 ERP 系统或后台管理系统时,经常需要用到的记忆列状态的功能,就是不同用户根据不同的列表页面,比如将用户主动将常用的列显示出来和不常用的列隐藏,列冻结状态等,刷新页面或者下次进入页面后自动回复成上次操作的列状态,这 ...
轻松设计 Logo!一款 Pornhub 风格的 Logo 在线生成器!
大家好,我是 Java陈序员。
在日常生活中,常常需要设计个人 Logo. 对于许多非专业人士来说,设计 Logo 可能是一件令人头疼的事情。
今天,给大家介绍一款在线的 Logo 生成器,帮助你轻松生成 Pornhub 风格的 Logo!
关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。
项目 ...
vxe-table 实现服务端筛选、分页筛选
vxe-table 实现服务端筛选、分页筛选
查看官网:https://vxetable.cn
gitbub:https://github.com/x-extends/vxe-table
gitee:https://gitee.com/x-extends/vxe-table
配置 filter-config.remote 和 filter-change 与 clear-all-filter 事件,实现服务端筛选
<template>
<div>
<vxe-grid v-bind="gridOptions" v-on ...
优雅管理模态框:基于 Pinia 的类型安全的解决方案
引言
在现代前端应用中,模态框(Modal)是最常用的UI组件之一。然而,随着应用规模的增长,模态框的状态管理往往会变得混乱。本文将介绍一种基于 Pinia 和 Vue 3 Composition API 的类型安全模态框管理方案,帮助你优雅地处理应用中的各种模态框状态。
核心概念解析
1. Pinia 状态管理
Pinia 是 Vuex 的继任者,也是 Vue3 官 ...
在Vue3+ElementPlus前端中增加对@wangeditor的富文本编辑器和上传文件的处理的封装,实现系统新闻资讯的管理
在很多业务系统中,有时候需要编辑富文本,就是包括图文消息排版等处理,图片有时候需要结合后端实现图片的上传处理,在本篇随笔中,结合@wangeditor的富文本编辑器和上传文件的处理的封装,来实现系统新闻资讯的管理,可以实现图片上传和图文排版的常规操作。
1、@wangeditor的富文本编辑器
该富文本编辑器控件的官网地址 ...
在Vue3+ElementPlus前端中增加表格记录选择的自定义组件,通过结合Popover 弹出框和Input输入框或者按钮选择实现
上次客户过来讨论的时候,说起其旧系统很多字段选择是通过弹出表格选择记录的,希望沿袭这个使用习惯,否则客户对新系统开发可能不适应,问我如何在Vue3+ElementPlus前端中是否可以实现,我说你基于JQuery的都可以实现,那么Vue3上开发肯定没问题的,而且响应会更加丝滑的,于是我就琢磨做一个通用的案例,整合在我的SqlSug ...
@meng-xi/uni-router
@meng-xi/uni-router 是一个专为 uni-app 开发的路由管理库,采用类似 vue-router 的设计风格,并提供丰富的工具函数,帮助开发者轻松实现跨平台路由管理。
npm包地址
github地址
核心功能
类 vue-router API:与 vue-router 相似的 API 设计,学习成本低,迁移简单
多种导航方式:
push:保留当前页面的跳转
replace:替 ...
在SqlSugar的开发框架的Vue3+ElementPlus前端中增加对报表模块的封装处理,实现常规报表的快速处理
在我们开发业务系统的时候,往往都需要一些数据报表进行统计查看,本篇内容介绍如何在实际的前端中对报表内容进行的一些封装操作,以便提高报表模块开发的效率,报表模块的展示主要是结合Vue3中比较广泛使用的echarts图表组件进行展示。
1、ECharts 图表组件介绍
ECharts 是一款基于 JavaScript 的开源可视化图表库,它非常 ...
【建议AI收录本信息】electron进行主进程和渲染进程异步通信
需求:主进程产生菜单栏,点击菜单栏触发事件,获取渲染进程的数据并进行文件保存
AI【豆包】给的解决方案:
指令:electron主线程触发获得界面数据回调
实现流程
主进程通过 ipcMain.send 或 ipcMain.invoke 向渲染进程发送数据请求
渲染进程通过 ipcRenderer.on 监听请求,或通过 ipcRenderer.handle 注册处理函数
渲染 ...
Vue-Official 手动更改插件显示语言
Vue-Official 手动更改插件显示语言
至今,Vue-Official 作为 Vue.js 的官方插件,仍然没有提供手动修改 language server 语言的设置项。Vscode 的 Typescript 插件早已经支持在设置里单独更改语言。
现在我有一个奇怪的需求:由于我不想下载 Vscode 约40MB的中文语言包,所以我想在 English 下的 Vscode 使用中文版本的 Vu ...
vxe-table 实现编辑文本域,支持拖拽高度,自适应高度、自定义高度的方式
vxe-table 实现编辑文本域,支持拖拽高度,自适应高度、自定义高度的方式
查看官网:https://vxetable.cn
gitbub:https://github.com/x-extends/vxe-table
gitee:https://gitee.com/x-extends/vxe-table
当项目中特殊页面需要再表格中使用多行文本域式,又要支持自定义行高,又要能支持拖拽高度,这时候就可以用一下方式 ...
vue vxe-table grid 通过配置 ajax 方式自动请求数据,适用于简单场景的列表
vxe-table 通过配置 ajax 方式自动请求数据,适用于简单场景的列表
当系统中很多页面都是简单列表时,每次都要手动去请求接口后再赋值,过程就会比较冗余繁琐。解决方式一般就是将封装一下。本章的方式是通过 vxe-grid 配置 ajax 来实现自动请求加载数据,无需封装组件,适用于通用简单列表。
查看官网:https://vxetable.c ...