MessageBox 对话框组件
MessageBox.vuescript1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283<script setup lang="ts">import { ref, reactive, computed, watch, nextTick, type Ref } from 'vue';import { isFunction, isNil } from 'lodash-es';import type { MessageBoxProps, MessageBoxAction } from './types';import VrOverlay from ...
Message 消息提示组件
Message.vuescript1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071<script setup lang="ts">import type { MessageProps } from './types';import { computed, onMounted, ref, watch } from 'vue';import { useOffset } from './methods';import { typeIconMap } from '@veyra/utils';import VrIcon from '../Icon/Ico ...
Dropdown 下拉菜单
Dropdown.vue
Script 部分123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<script setup lang="ts">import { ref, computed, provide } from 'vue'import { omit, isNil } from 'lodash-es'import type { DropdownProps, DropdownEmits, DropdownContext } from './types'import { useId, useDisabledStyle } from '@veyra/hooks'import { DROPDOWN_CTX_KEY } from & ...
Collapse 折叠面板Collapse.vuescript1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556import { ref, provide, watch } from 'vue'import { each } from 'lodash-es'import type { CollapseItemName, CollapseProps, CollapseEmits } from './types'import { debugWarn } from '@veyra/utils'import { COLLAPSE_CTX_KEY } from './constants'const COMPONENT_NAME = 'V ...
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 ...
