辞忧*的博客

在vue3+ts+vite项目中使用echarts，避免打包体积过大使用按需引入，并基于引入功能进行组件封装。

vue3+vite项目中多处使用el-tooltip组件进行提示，避免重复代码过多封装公共组件，通过接收鼠标当前event位置和要展示的提示信息，在组件内部进行数据处理并展示。

在vue3+ts+vite项目中使用signalr配合后台进行通信，通过内置连接管理和分组功能完成项目多页面连接功能，主要实现全局连接，信息接收发送、重连通知等并封装全局通信组件，主要通过pageId来区分每个菜单页面。

在vue3项目中封装时间日期选择器功能，主要实现开始结束日期选择功能，支持限制可选日期范围最大时长不超过当前时间，便于页面功能开发。

在vue3+ts中使用websocket进行通信功能，主要实现 WebSocket 的连接、断开、重连、发送消息等功能，并且通过 eventBus 实现了消息的跨组件通信。

【代码】基于element ui的el-drawer进行组件封装。

应项目需求，为避免代码重复，耦合性高，使用 vue + vant UI 来进行公共代码封装。本次封装头部标题区块。目标样式创建目录在src / components / 创建 headTips 文件封装组件html – headTips/index.vue<template> <div class="headTips"> <van-nav-bar :title="text" :left-arrow="shows"> &lt.

页面内容展示