vue甘特图vxe-gantt如何设置日期轴显示为周模式
通过 taskViewConfig.scales 参数,可以灵活配置甘特图日期轴的显示层级。本文将介绍如何将日期轴显示为“月 + 周”模式,以及如何自定义每周的起始日期。
核心配置示例
要显示“月 + 第几周”的双层日期轴,只需在 scales 数组中同时配置 'month' 和 'week' 即可。
<template>
<div>
<vxe-gantt v-bind="ganttOptio ...
有趣味的登录页它踏着七彩祥云来了
最近,有一个比较火的很有趣且灵动的登录页火了。
角色视觉跟随鼠标
输入框打字时扯脖子瞅
显示密码明文时避开视线
已经有大神(katavii)复刻了动画效果,并在github上开源了:https://github.com/katavii/animated-login ,基于React实现。
如果你的项目是用Vue开发的,可以考虑用AI将此项目转换成了Vue3的语法写法。
...
自建 Claude Code 镜像!一站式开源中转服务!
大家好,我是 Java陈序员。
对于依赖 Claude 进行代码开发、内容创作的开发者来说,稳定且安全的访问体验,直接决定了工作效率。但官方服务的地区限制、第三方镜像的隐私风险、拼车套餐的成本模糊,成了绕不开的坎。
今天,给大家介绍一款开源的 Claude 中转服务,适用于自建 Claude 镜像!
关注微信公众号:【Java陈序员 ...
vue表单vxe-from配置渲染日期范围选择器的用法
在使用 vxe-form 表单配置渲染时,日期范围选择器(VxeDateRangePicker)支持多种数据格式绑定,包括字符串类型、数组类型以及两个独立字段的方式。本文将详细介绍这三种用法的配置方法。
三种数据绑定方式
通过 itemRender.name='VxeDateRangePicker' 指定渲染控件
字符串格式(逗号分隔)
适用于需要将起止日期以逗号分隔 ...
字体与打印:前端开发最常见的三个“为什么”
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
”浏览器屏幕上看的好好的,为什么打印出来就变了?”
这句话几乎每个做过打印需求的前端开发者都说过。字体被替换、字号失控、图标变方框,这些问题看似玄学,背后却有清晰的技术原因。本文将从打印需求中常遇到的三个问题来解释其背后的原理和对应的解决方法。
字体被替换- ...
🔥 手把手教你实现前端邮件预览功能
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
你是否曾经想过,在浏览器中直接点击一个邮件附件,就能预览完整的邮件内容——包括发件人、收件人、抄送、正文甚至内嵌图片?
今天,我们要揭秘一个基于 Vue 3 和 Vant UI 的邮件预览上传组件,它不仅能上传 .eml 格式的邮件文件,还能在弹窗中完整渲染邮件内容,甚至支持附 ...
vue表格vxe-table实现表头合并,分组表头自定义合并
在开发后台管理系统时,经常会遇到需要展示复杂表格的场景,其中表头合并(多级表头、不规则合并)是一项常见需求。vxe-table 是一款功能强大的 Vue 表格组件,它不仅支持树形分组表头,还提供了自定义列头合并的功能,允许开发者灵活地将任意单元格进行合并,满足各种复杂的表头设计。
形分组表头 vs 自定义合并表头
vxe-t ...
vue 表格 vxe-table 高亮行支持取消操作
在使用 vxe-table 表格组件时,默认情况下,当用户点击某一行时,该行会高亮显示(即成为当前行),并且无法通过再次点击来取消高亮。这种交互适用于需要始终选中一行的场景。
但在某些业务场景下,可能需要允许用户取消选中当前高亮的行(例如,允许不选中任何行)。vxe-table 提供了灵活的配置来实现这一需求
实现方式
通 ...
vue表格vxe-table如何获取拖拽后的行序号
vue表格vxe-table如何获取拖拽后的行序号,通过 row-config.drag 和列设置 drag-sort 启用行拖拽排序功能
通过调用 getFullData 方法获取拖拽后的数据,遍历数据得到序号
<template>
<div>
<vxe-button status="success" @click="resultEvent">获取拖拽后序号</vxe-button>
<vxe-grid ref="gridRef" v-bind="gri ...
vue甘特图 vxe-gantt 如何实现双击连接线自动删除线功能(含二次确认)
vue甘特图 vxe-gantt 如何实现双击连接线自动删除线功能,支持二次确认
https://gantt.vxeui.com
配置说明
实现该功能主要依赖 taskLinkConfig 对象中的两个属性:
isDblclickToRemove
说明:开启/关闭双击删除线的功能。设置为 true 时,用户双击依赖线会触发删除逻辑。
beforeRemoveMethod
说明:删除前的拦截钩子。如 ...
今天吃什么?交给它就够了!一款开源菜谱工具!
大家好,我是 Java陈序员。
在日常生活中,你是否常常遇到如下场景:
“下班到家不想点外卖,却不知道用现有食材做什么”
“囤的食材快过期,翻遍 APP 也找不到适配的菜谱”
“厨房新手怕翻车,想找只用平底锅/电饭煲就能做的菜”
今天,给大家介绍一款开源菜谱工具,帮助你利用现有食材生成菜谱,解决今天吃什么的“世纪 ...
不是有video标签吗?为什么还需要视频播放器?
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
这是一个非常好的问题!确实,HTML5 提供了原生的 <video> 标签,理论上可以直接播放视频,但为什么在实际项目中我们常常还会使用 Video.js、Plyr、hls.js 等“视频播放器”库呢?原因如下:
一、原生 <video> 的局限性
1. 浏览器兼容性不一 ...
vue vxe-table 数据分组与排序的实现方式
vue vxe-table 数据分组与排序的实现方式,当需求需要能支持数据分组并对分组后的子项进行排序时,可配合 sortable 来实现
https://vxeui.com
<template>
<div>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const gridOptions = reactive({
...
告别满屏 v-if:用一个自定义指令搞定 Vue 前端权限控制
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
在企业级应用开发中,权限控制是一个绑不开的话题。前端权限控制虽然不能替代后端校验,但能极大提升用户体验——让用户只看到自己能操作的内容,避免无效点击和困惑。
本文将分享一个 Vue 2 自定义指令的设计思路,实现了声明式的权限控制方案。
设计目标
在动手写代码之前 ...
用好了 defineProps 才叫会用 Vue3,90% 的写法都错了
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
Vue 3 的 Composition API 给开发者带来了更强的逻辑组织能力,但很多人用 defineProps 的方式,依然停留在 Vue 2 的“Options 语法心智”。本质上只是把 props: {} 拿出来“提前声明”,并没有真正理解它的运行机制、类型推导优势、默认值处理方式、解构陷阱等关键点。
这篇 ...
vxe-table 单选设置允许取消选中
vxe-table 单选设置允许取消选中,通过设置 radio-row-config.strict=false 允许取消选中
https://vxetable.cn
设置 radio-row-config.strict=false 允许取消选中
<template>
<div>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script>
export default {
data() {
const gridOpt ...
关于地图渲染加20w数据展示和地图动画怎么做
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
项目背景
公司需要将全年设备安装量通过旗帜的形式展示在全国地图上,实现数据可视化大屏。主要技术挑战:
数据量大:全年设备安装数据约20万条
实时更新:通过WebSocket实时接收数据
动画效果:需要展示数据逐条添加的动态效果
性能要求:需要保持60fps的流畅动画
一、初 ...
vxe-table 给单元格加样式的方式详解,支持 style 和 className 的方式给单元格加样式
vxe-table 给单元格加样式的方式详解,支持 style 和 className 的方式给单元格加样式
https://vxetable.cn
className 方式
行的样色、单元格样式,表头的样式、表尾的样式、全部都可以完全自定义,通过设置 cell-class-name、header-cell-class-name、row-class-name ...等参数,当自定义样式之后可能会覆盖表格的样式,比 ...
vxe-table 如何实现分组列头折叠列功能
实现 vxe-table 分组列头折叠列功能非常简单,只需改变列的 visible 就可以实现
https://vxetable.cn
通过修改列的 visible 属性来精确控制列的显示隐藏
<template>
<div>
<vxe-table
border
height="400"
:data="tableData">
<vxe-column type="checkbox" width="60"></vxe-column>
...
极速安装体验openClaw
🚀 OpenClaw 极速安装与全流程避坑指南:从零到完美运行
OpenClaw 凭借其强大的 AI 自动化能力最近非常火爆。但在 Windows 环境下安装,如果不注意细节,很容易在“第一步”就卡死。本文总结了一套从底层环境搭建到后台服务运行的极速流程,适合所有想体验 OpenClaw 的朋友。
🛠️ 一、 安装前的“地基”准备(必看!)
很 ...