四岁爱上了她的博客

原创 input输入框焦点的获取和隐藏div,一个自定义的下拉选择

本文展示了一个基于Vue和Element Plus的下拉框交互组件实现。通过全局点击事件监听，实现了输入框聚焦时显示对应下拉框，点击外部自动隐藏的功能。组件包含两个表单输入框，每个输入框下方可显示独立的下拉区域，支持自定义UI内容。关键技术点包括：使用ref动态注册DOM元素、通过isSwitchingInput状态管理避免切换时的闪烁问题、利用contains方法判断点击区域位置。该实现提供了灵活的下拉框控制方式，既可通过按钮主动隐藏，也能智能响应外部点击事件。

原创 自定义生成二维码

这是一个Vue实现的二维码生成器组件，提供丰富的自定义选项：可配置二维码内容、大小（100-500px）、颜色及背景色；支持添加Logo图片并设置大小（10-100px）；可添加底部文字并调整文字大小（10-30px）和颜色。组件包含配置面板和实时预览区域，通过v-model双向绑定各参数，实现动态生成二维码效果。内置示例URL和Logo地址，方便用户快速测试功能。整体采用响应式设计，配置项布局清晰，支持颜色选择器和数值输入框，用户体验良好。

原创 关于 elementplus的 el-autocomplete 的基本使用

本文介绍了如何使用Vue3和Element Plus的el-autocomplete组件实现一个带搜索建议的输入框。关键功能包括： 通过fetch-suggestions属性实现异步搜索建议 支持模糊匹配（含"xx"的选项）和精确匹配两种搜索模式 提供清除输入(@clear)、选择建议项(@select)和失焦(@blur)等事件处理 组件样式通过scoped CSS进行定制 采用Vue3的Composition API编写组件逻辑，包括响应式数据定义和事件处理函数 代码示例展示了完整的

原创 vue3+socketio一个即时通讯的小demo

Socket.IO 实时通讯实现摘要 本文实现了一个基于Socket.IO的实时通讯系统，包含以下核心功能： 前后端连接： 前端使用socket.io-client，后端使用express+socket.io 采用手动连接模式（autoConnect: false） 核心功能： 连接状态管理（connected状态） 消息广播与历史消息存储 随机中文消息生成功能 关键技术点： 使用Vue3的reactive管理状态 监听器动态绑定/解绑（防止重复绑定） CORS跨域配置（前后端口一致） 服务端消息历史存储

原创 vue3实现实现手机/PC端录音：recorder-core

本文介绍了如何使用recorder-core插件在Vue项目中实现录音功能。首先封装了一个recorderCore.js文件，集成了录音核心功能，包括获取麦克风授权、开始/停止录音、暂停/恢复录音等操作。该文件引入了Recorder核心库及MP3/WAV格式支持。在Vue组件中，通过导入该封装文件，可调用getPermission()获取录音权限，startRecorder()开始录音，stopRecorder()停止录音并将音频数据通过FormData提交到语音转文字接口。文中还提供了音频文件大小校验（不

原创 vue3使用插槽写一个自定义瀑布列表

本文实现了一个基于Vue3的瀑布流布局组件，采用CSS多列布局方案。通过column-count和break-inside属性实现自适应列数，每列最小宽度150px，支持动态高度图片展示。组件接受items数组作为数据源，通过插槽机制灵活渲染内容。父组件示例中展示了随机高度图片的加载效果，利用getRandomFromArray方法生成不同高度的图片项，并通过break-inside: avoid确保项目不被分割到不同列。该方案相比传统grid布局更适合瀑布流场景，且性能优化支持万级数据渲染。

原创 CentOS更换yum源

CentOS更换yum源

原创 mysql基本查询使用

mysql基本使用

原创 Vue3自定义指令

自定义指令

原创 前端使用xlsx和file-saver自定义导出excel表格，无需写页面直接导出数据。末尾有一个插件方式使用

使用excel直接导出表格数据，无需写一个页面在导出

原创 Vue3+Antv X6流程图基本使用

安装 antv/X6。

原创 vue3+AntvS2基本使用与导出excel

安装 antv/s2 和 antv/s2-vuenpm i @antv/s2npm i @antv/s2-vuereact项目自行更换 antv/s2-vue在vue3里使用新建一个名为 PageThreeLook.vue 的文件。由于数据有时很大，所以这边是在后端返回数据后就先计算，然后再渲染的。计算是再 getPageList（）方法里进行<!-- 预算与实际---页面 --><template> <div class="home">

原创 git常用命令

本地推送到远程(本地必须被commit之后)本地仓库和远程仓库建立连接。git 配置用户名和邮箱。git创建分支/切换分支。git从暂存区撤回修改。从远程仓库更新本地代码。克隆远程指定分支到本地。

原创 vite创建的vue项目怎么使用jsx来实现elementPlus表格表尾的合计有多行大的方法

elementPlus表格的表尾合计有多行

原创 vue使用原生表格例子

vue使用原生表格的例子

原创 给图片添加水印

【代码】给图片添加水印。

原创 vue文件下载

【代码】vue文件下载。

原创 vue3封装拖拽自定义组件

main.js引入这个指令文件。

原创 input输入框的一些复习

【代码】input输入框的一些复习。

原创 vue脚手架和vite创建的项目的环境配置已经跨域的处理注意事项

开发环境文件生产环境文件。

原创 css折叠的导航栏

导航栏点击多个的效果 <div class="cont"> <!-- 第一个导航 --> <div class="nav_a"> <input type="checkbox" name="chk" id="chk1"> <label for="chk1"&

原创 vue3中使用animate.css

main.js注册：import ‘animate.css/animate.min.css’注意：animate__animated 这个类名是固定的，然后后面再跟上一个动画的类名。注意：import ‘animate.css’ 不适合在vue3项目。引入：npm install animate.css --save。使用：class=“animate__animated 动画名称”

原创 dayjs使用小结

【代码】dayjs使用小结。

原创 react使用npm i @reduxjs/toolkit react-redux

至此我们依旧创建好了仓库，并且仓库也和代码绑定了，接下来是使用仓库里的代码了。two文件子模块里创建模块文件，文件里写入以下代码。创建一个 store文件夹，里面创建。这段子模块仓库代码里面有同步方法(index,js文件写入以下代码。在入口文件那引入store。

原创 vuex的使用

至此，我们已经创建了一个仓库了，接下来是在文件中使用仓库。modules文件夹。

原创 vue页面路由缓存的一种方法

从 名片查询页面进入到名片图表或着名片折线图表页面，返回的名片查询页面是不需要刷新的，但是从其它页面进来是需要刷新的。

原创 一种类似卡劵的效果

上下两部分中间那个缺失半圆角用的是背景颜色图片+圆形渐变完成的。

原创 vue-pdf的注意事项

vue2和vue3预览PDF文件的操作

原创 SpreadJS+vue3练手使用

【代码】SpreadJS+vue3练手使用。

原创 element的描述列表使用

第二部分是2个插件把指定区域内容变成pdf。第一部分是 描述列表的设置。

原创 vant-list的上拉加载和下拉刷新 + uniapp小程序页面高度计算

vant-List的上拉加载和下拉刷新模版

原创 elementbi表格的列合并，注意这是列合并不是行合并，以及表格动态列显示与隐藏

表格列合并，表格列显示与隐藏

原创 import导出方式的不同

import导出的不同方式

原创 在vue3和上挂载方法，以及在页面中怎么使用原型（公共）上的方法

【代码】在vue3和vue2上挂载方法，以及在页面中使用setup语法糖 该怎么使用原型（公共）上的方法。

原创 微信小程序使用阿里图标

原创 promise多请求并发

promise多请求并发，失败成功都要执行不能失败了就终止请求

原创 使用canvas怎么实现文本内容自动换行

本章主要讲了一个canvas画文本的时候宽度超出自动换行

原创 vue2和vue3项目打包添加时间戳

vue2和vue3打包时文件添加时间戳

原创 vue2+elementUI表格实现实现多列动态合并

elementUI表格的多列合并

原创 移动端页面固定顶部和底部，中间区域可以滚动。

【代码】移动端页面固定顶部和底部，中间区域可以滚动。