weixin_41940856的博客

原创 基于 Vue3 的智能电梯模拟器实现与优化

智能电梯模拟器是一个基于 Vue3 框架开发的 Web 应用，用于模拟电梯的运行逻辑和用户交互。通过这个模拟器，用户可以直观地了解电梯的调度算法、状态变化以及用户体验优化方案。本项目不仅实现了基本的电梯控制功能，还通过精心设计的 UI 界面和流畅的动画效果，提供了接近真实电梯系统的操作体验。本项目基于 Vue3 框架实现了一个功能完善、体验良好的智能电梯模拟器。通过 LOOK 调度算法实现了电梯的智能调度，通过精心设计的 UI 界面和动画效果提升了用户体验。

原创 Vue 3 + Ant Design Vue 打造高度通用的动态可编辑表格

通过这种配置化的方式，我们将一个特定的业务组件提升为了一个通用的 UI 框架。现在，无论你的业务是管理 “资质”、“技能” 还是 “联系人”，都可以复用同一个组件，只需编写相应的配置即可。这极大地提高了开发效率，减少了重复代码，并使得维护变得更加容易。这个通用组件还可以进一步扩展，例如支持更多的表单组件类型（如checkboxradiotextarea等）、更复杂的联动逻辑或更自定义的单元格渲染。

原创 Vue3 中 ECharts Tooltip 无法显示？问题根源与解决方案

Vue3 中 ECharts Tooltip 无法显示的核心问题是使用ref深度代理 ECharts 实例，导致其内部事件机制失效。通过将ref替换为shallowRef，既能保持实例的响应式引用，又不会破坏其内部结构，是最简单高效的解决方案。在 Vue3 中集成第三方库时，需注意响应式 API 的选择：复杂实例用shallowRef，普通数据对象用refreactive，避免因响应式代理引发的隐性问题。

原创 vue实现浏览器通知

【代码】vue实现浏览器通知。

原创 vben里使用其他图标

本文档提供了vben组件中图标使用的参考资料链接。主要包括:1)Jeecg官方图标使用指南;2)Icones图标库网站;3)Iconify图标设计平台。用户可通过这些链接获取图标名称,直接在项目中复制使用。文档简洁明了地列出了三个实用的图标资源网站,方便开发者快速查找和使用图标组件。

原创 vben表格多选禁用

【代码】vben表格多选禁用。

原创 解决pnpm build打包报错

摘要：该报错提示在配置文件中存在异步生成器函数转换问题，原因是当前环境不支持转换到目标版本（es2015）。解决方案是在vite.config.ts文件中添加配置：重新定义应用配置，设置构建目标为es2020，并添加生产环境下的console和debugger清理功能。通过调整构建目标和覆盖默认配置来解决异步生成器函数的兼容性问题。

原创 vue3 + echarts 实现多折线图

摘要：本文实现了一个基于ECharts的双线图表组件，支持动态数据更新和响应式布局。组件通过props接收数据(data)和配置项(option)，使用watch监听数据变化自动更新图表，并添加窗口大小改变事件监听实现自适应调整。组件采用Typescript开发，包含完整的生命周期管理，在销毁时释放图表资源。图表配置包含提示框、图例、XY轴样式和两条不同颜色的折线，可通过参数控制图表高度，默认200px。该组件可复用性强，通过简单引入即可在页面中展示趋势对比数据，支持自定义高度和标题等配置。

原创 vue3 + echarts 实现横向柱形图

这是一个基于Vue 3和ECharts实现的水平条形图组件。组件具有以下特点：1）支持自定义高度、柱形颜色和X轴分割线颜色；2）包含悬浮提示框功能，显示数据名称和值；3）响应式布局，自动适应窗口大小变化；4）右侧显示数据标签；5）采用双series实现条形和标签分离。组件通过props接收数据源，数据格式为包含name和value的对象数组。使用时只需传入data和height等参数即可快速生成美观的水平条形图。组件还实现了数据变化监听和资源释放功能。

原创 vben表格 多选 支持分页勾选

【代码】vben表格 多选 支持分页勾选。

原创 vben弹窗中 ant DatePicker滚动页面脱离

【代码】vben弹窗中 ant DatePicker滚动页面脱离。

原创 Vben ApiSelect前端模糊搜索

【代码】Vben ApiSelect前端模糊搜索。

原创 vben中Input框showCount不显示字数问题

一定要注意maxlength中l一定要小写。

原创 不同详情页跳转回主页面，控制tab

【代码】不同详情页跳转回主页面，控制tab。

原创 vben框架点击详情页左侧菜单会折叠解决

title: '年度上报',

原创 taro小程序更新提醒

在app.ts文件里onLaunch（）方法中添加如下方法：

原创 css不同尺寸图片不缩放

<divv-for="(item, index) in list":key="index"class="img"> <img :src="item" alt="" /></div>//css .img { width: 500px; height: 500px; img { width: auto; height: auto; max-width: 100%.

原创 ant-vue 在原有table基础上动态添加列

result = data.map((item, index) => ({ title: item[0], dataIndex: item[0], align: "center", customRender: (text, record, index) => record.list[item[0]], }));

原创 vue预览图片

<div v-for="(item4, index4) in item2.imageUrls" :key="index4"> <a-row type="flex" justify="space-between"> <a-col :span="3" class="contentImg"> <img :src="item4" @click="handlePreview(it.

原创 v-for遍历时在遍历后的数据后面加上符号处理

<span v-for="(item1, index1) in list" :key="index1"> <span >{{item}}</span> <span v-if="index1 != list.length - 1" :key="`${index1}_1`" >、</span >..

原创 同级组件传值或者一个组件根据另个组件值变化刷新页面

vueBus1、实例化一个vueBusimport Vue from 'vue'const bus = new Vue()export default bus 2、在需要传值页面使用import vueBus from '@/utils/vuebus' vueBus.$emit('key',vue)3、接受值改变的页面import vueBus from "@/utils/vuebus";mounted() {vueBus.$on("key", function

原创 ant-vue a-tree-select相关

1、递归遍历后端数据满足组件要求 handleTreeData = (treeData) => { let treeData: any = []; treeData.map((item) => { let treeObj: any = {}; treeObj.title = item.orgName; treeObj.value = item.orgId; treeObj.key = item.orgId; it

原创 ant-design-vue 点击弹窗外的区域不关闭弹窗

1、官方组件自带点击弹窗区域外关闭弹窗2、点击弹窗区域外关闭弹窗不关闭属性为：:maskClosable="false"例如 <a-modal :title="title" :width="500" :visible="visible" :maskClosable="false" :confirmLoading="confirmLoading" :destroyOnClose="true" @cancel="handleCance

原创 ant-design-vue 中v-decorator设置默认值

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言 一、pdfh5是什么？ 二、使用步骤 1.安装库 2.引入库 总结前言在vue3+ts项目的移动端使用pdf预览提示：以下是本篇文章正文内容，下面案例可供参考一、pdfh5是什么？官方源码：https://github.com/gjTool/pdfh5二、使用步骤1.安装库yarn add pdfh52.引入库import Pdfh5 from.

原创 前端四种undefined

1、已声明，未赋值例如：let a;console.log(a)2、访问某个对象不存在的属性let obj={}console.log(obj.a)3、函数调用少了参数function fn(a,b){console.log(a,b)}fn(c)4、函数的默认返回值function e(){console.log('0000')}console.log(e())...

原创 JSON.parse()与JSON.stringify()的区别

JSON.parse()【从一个字符串中解析出json对象】例子：//定义一个字符串var data='{"name":"good"}'//解析对象let a = JSON.parse(data)console.log(a)结果是：{name: 'good'}JSON.stringify()【从一个对象中解析出字符串】var data={name:'good'}let b=JSON.stringify(data)console.log(b)结果是： {"name":"g

原创 移动端vue3中使用pdf预览

Pdfh5源码地址https://github.com/gjTool/pdfh5使用步骤1、安装yarn add pdfh52、在需要使用的页面引入 <template> <div id="pdf-view"> <div id="pdf"></div> </div></template>import Pdfh5 from "pdfh5";import "pdfh5/css/pdfh5.cs

原创 ant-design-vue列表第一列索引

原创 ant-design-pro 如何高效地使用Mock数据进行开发 唐金州 报错处理

报错：Proxy error: Could not proxy request /api/dashboard/chart?ID=12345 from localhost:8080 to http://localhost:3000/.修改为：

原创 2020总结及2021计划

2021的第一天，那就祝大家万事胜意吧最近一段时间看到好多人都在写去年的总结与今年的计划，大学读书的时候我也有这习惯，但是立的flag好像还没实现，比如说找个媳妇，哈哈，说来惭愧，一朝被蛇咬！先来去年的总结吧：1、顺利硕士毕业，最感谢自己的父母与这么年来陪我度过学生生涯的老师，感恩！2、勉强签了一份互联网的工作吧，刚过了试用期，慢慢适应吧，加油，送给自己吧！3、从后端到前端，打开新世界吧！4、好像也没啥了2020计划：1、努力工作，熟练掌握vue与react及ts吧2、找个媳妇3、少吃，

原创 内网工具

内网穿透工具natapp:5 C 6 9 1 7 B C

原创 解决antdesigntable表格fixed后出现空白列

解决方案：将所有列的宽度加起来等于:scroll="{x:m}"里m的值,然后其中一列不设置宽度去自适应宽度

原创 解決vue项目出现 Cannot find module ‘babel-eslint‘问题

全局安装npm install eslint babel-eslint -g即可

原创 Bootstrap中样式引入失败问题

重新安装一下bootstrap，见官网https://getbootstrap.com/

原创 Warning: [antdv: LocaleProvider] `LocaleProvider` is deprecated.

原因： ant design vue升级后国际化组件出现问题需如下更改即可

原创 华数Java面试

1、java的Collection类详解数组： 存储同一种数据类型的集合容器.数组的特点：1. 只能存储同一种数据类型的数据。2. 一旦初始化，长度固定。3. 数组中的元素与元素之间的内存地址是连续的。注意： Object类型的数组可以存储任意类型的数据。集合：集合是存储对象数据的集合容器。集合比数组的优势：1. 集合可以存储任意类型的对象数据，数组只能存储同一种数据类型 的数据。2. 集合的长度是会发生变化的，数组的长度是固定的。------| Collecti

原创 大华Java面试（PJ）

文档：3、大华面试（PJ）.note链接：http://note.youdao.com/noteshare?id=6b88e2b6ab010fbdbc2ed5507e394836&sub=333505689E3542458030E6A7A1C1B21D

原创 联通浙江产业互联网Java面试

一面：视频面二面：主键线程池bean周期三面：领导面

原创 无端科技Java面试

一、广度优先遍历与深度优先遍历https://blog.youkuaiyun.com/weixin_42289193/article/details/81741756二、根据前序和中序遍历构建二叉树/** * Definition for binary tree * public class TreeNode { * int val; * TreeNode left; * TreeNode right; * TreeNode(int x) { val = x; } * } */ public clas.

原创 海康面试（高可用方向）

1、垃圾回收器的基本原理是什么？垃圾回收器可以马上回收内存吗？有什么办法主动通知虚拟机进行垃圾回对于GC来说，当程序员创建对象时，GC就开始监控这个对象的地址、大小以及使用情况。通常，GC采用有向图的方式记录和管理堆(heap)中的所有对象。通过这种方式确定哪些对象是"可达的"，哪些对象是"不可达的"。当GC确定一些对象为"不可达"时，GC就有责任回收这些内存空间。（1. 不可用不可达------>这种情况GC会帮我们回收掉,而C++不会2. 不可用可达 ------>这种情况会存在