Button 按钮Button.vuescript1234567891011121314151617181920212223242526272829303132333435363738394041424344454647import { ref, computed, inject } from 'vue';import type { ButtonProps, ButtonEmits, ButtonInstance } from './types';import { BUTTON_GROUP_CTX_KEY } from './constants';import { throttle } from 'lodash-es';import VrIcon from '../Icon/Icon.vue';defineOptions({ name: 'VrButton',}) ...

Alert 警告提示组件分析 组件功能概述Alert 组件用于显示不同类型（如成功、警告等）的提示信息，支持关闭、图标、居中对齐等功能，通过 v-model 或 v-show 控制显示状态。 核心代码解析 Script 部分1234567891011121314151617181920212223242526272829303132333435363738394041<script setup lang="ts">import type { AlertProps, AlertEmits, AlertInstance } from './types'import { ref, computed } from 'vue'import { typeIconMap } from '@veyra/utils'import VrIcon from '../Icon/Icon.vue'defineOptions({ ...

通俗版Promise解释首先要理解前端的同步异步任务流程 同步 vs 异步任务同步任务（排队买奶茶）1234567// 你站在柜台前干等，不做其他事console.log("1. 点单：我要珍珠奶茶");console.log("2. 等店员制作...（干等5秒）");// 模拟同步等待const start = Date.now();while (Date.now() - start < 5000) {} // 直接阻断后面的进程，阻塞5秒console.log("3. 拿到奶茶，开心喝！"); 异步任务（外卖通知）123456console.log("1. 手机下单奶茶");// 异步操作：下单后先做其他事，等通知setTimeout(() => { console.log("3. 外卖员通知：奶茶到啦！");}, 5000); // 5秒后才触发回调，不阻塞主进程console.log("2. 下单成功，先去打游戏 ...

项目中z-index的规划设计技术规范：夹层模型 整个结构分为APP层和页面组件层。APP只有一个，但页面有很多。 12345671~999：都是页面内比较正常的元素1000~1999：弹窗的灰色遮罩背景之类的组件，或者是能够遮住全屏的加载动画2000~2999：弹窗面板，比如突然弹出来一个界面提示框，登录框、警告框之类的3000~3999：页面鼠标交互层：比如在这个界面，会有一个鼠标点击一下就能让屏幕上多出来一个小桃心的上浮动画，这个小桃心就可以用绝对定位一个div来实现。但他的z-index必须很高，比弹窗组件还要高。 有了界面层，其实还应该有个全局的APP层，APP层是完全高于界面层的一种层。和界面一样，也有遮罩层、弹窗面板层和鼠标交互层。为了方便记忆，直接设定APP层为四位数上万。 1也就是10000~~19999,20000~~29999,30000~39999。 值得注意的是，该模型中不仅有向上的考虑，还有0以下的考虑 1可以设定一个页面背景层，让z-index：-1 1然后再设计一个APP通用背景层，z-index：-2。 总结 11000以内都是正常页面，上千级 ...

本文是基于 EChart 官方文档进行的简化 快速上手 - 使用手册 - Apache ECharts ECharts安装1pnpm install echarts --save 导入全局导入12// 引入 ECharts 核心模块import * as echarts from 'echarts/core'; 按需导入1由于不同图表类型需要导入的东西非常杂乱，以下为导入分类总结 渲染器（必） 12// 引入 Canvas 渲染器import { CanvasRenderer } from 'echarts/renderers'; 图表类型 12345678// 引入柱状图图表import { BarChart } from 'echarts/charts';// 引入折线图图表import { LineChart } from 'echarts/charts';// 引入饼图图表import { PieChart
...

键盘乱键问题真的很崩溃，机械键盘的乱键问题居然还能连带到本机的键盘上😅 最后发现步骤其实很简单，然后我乱修了两个小时🙃 步骤机械+本机键盘出厂设置 1fn + esc 长按五秒以上 重启电脑 1还有我电脑开机是有一个键盘驱动选项的，直接给拒了 重新配置机械键盘（蓝牙啊啥的）

盒子格式化上下文外部显示类型（display-outside） 1规定盒子如何与统一格式上下文中的其他元素一起显示 内部显示类型（ display-inside ） 123规定盒子内部布局方式，比如display: flex (外部显示为block ) 参与BFC（块级格式化上下文）display:inline-flex (外部显示为inline) 参与IFC（内联级格式化上下文） BFC块级格式化上下文 FC（Formatting Context）（格式化上下文） 所有的盒子都属于FC 可能属于一个BFC（block）(div/p/h1)、也可能是IFC（inline）(a/span/i/img) 会生成BFC的情况 BFC的作用帮助盒子一个挨着一个沿着垂直方向排布 margin就是由BFC来解析的 两个盒子都设置margin时候会折叠，就是BFC在起作用 1在同一个BFC里，两个盒子的margin才会折叠 1HTML可以形成标准流，因为本身就是一个独立的BFC环境 1在BFC中，每个元素的左边缘是紧挨着包含块的 ...

吐槽最初技术栈为Vue+Electron+TS，太甜美的难了。。。配置报错问题一大堆，一路报错问AI一路改，长达三个小时把文件改的乱七八糟无法收尾忍痛放弃新开项目 **最后技术栈选择为 **Vue+Electron+Vite+JS ，包管理工具选择为 pnpm 完整代码见github仓库 ......(还没推，因为dist文件太大的原因没办法传，目前还在寻找更合理的推送方案) 主步骤初始化创建 1pnpm create vite Tclick --template vue 依赖 package.json 直享版 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960{ "name": "clock", "private": true, "version": "0.0.0", " ...

WebSocket 低延迟，双向实时通信(双全工)，长期运行 简介相比HTTP协议，WebSocket是一种****实时通信协议 在实时通讯前，HTTP通过****轮询解决实时问题 轮询：客户端定期向服务器发送请求 长轮询：客户端发出请求后，保持连接打开，等待新数据响应后再关闭连接 Comet：保持长连接，返回请求后继续保持连接打开 WebSocket的连接只需要建立一次 建立连接理论须知需要HTTP向服务器发起一次常规Get请求，并在这个请求头上携带Upgrade Upgrade作为升级请求将传递给服务器，协议从HTTP升级为WebSocket 在此之后客户端和服务器即可随时向彼此发送消息 具体代码前端 1const socket = new WebSocket("ws://localhost:8080"); 123456789socket.onopen =function(event){ console.log("Websocket连接已打开")}socket.onmessage =functio ...