m0_47483157的博客

原创 前端预览文件，支持.docx.word.pdf.excel.image/png/jpeg/gif/bmp/tiff格式文件,保留原文件样式，封装未为一个组件，单个需求自行代码截取，简单好用，轻松搞得。

前端预览文件，支持.docx.word.pdf.image/png/jpeg/gif/bmp/tiff格式文件，封装未为一个组件，简单好用，轻松搞得！

原创 el-table利用折叠面板 type=“expand“ 嵌套el-table，并实现 明细数据多选，选中明细数据后返回原数据得嵌套格式

【代码】el-table利用折叠面板 type="expand" 嵌套el-table，并实现 明细数据多选，选中明细数据后返回原数据得嵌套格式。

原创 为了在前端项目打包后删除 console.log 日志，可以采用不同的方法来实现这一目标。以下是几种常见的方式，包括在 Webpack 和 Vite 中的具体实现。

在生产环境中，我们希望移除所有的 console.log 日志。在生产环境中，我们希望移除所有的 console.log 日志。如果 process.env.NODE_ENV 的值为 'production'，则 isProduction 为 true，表示当前环境为生产环境。在 vue.config.js 中，我们可以使用 configureWebpack 方法来配置 webpack 的相关选项。首先，我们需要判断当前环境是否为生产环境。首先，我们需要判断当前环境是否为生产环境。

原创 如何在 Vue 中创建一个带有表格和表单的弹窗

本文将通过一个具体的示例来介绍如何在 Vue 应用中实现一个带有表格和表单功能的弹窗组件。我们将使用 Element UI 库中的 el-dialog 组件来构建这个弹窗，并结合 el-table 和 el-form 来展示数据并允许用户进行编辑。

原创 UE3+nest.js前后端部署-Linux中Nginx配置文件前端界面路径，后端反向代理接口

或者 查看 /etc/nginx 目录，大多数 Linux 发行版的 nginx.conf 文件位于 /etc/nginx 目录下。保存并退出： 按 Esc 退出插入模式。输入 :wq 并按 Enter 保存并退出。不保存并退出： 按 Esc 退出插入模式。并按 Enter 不保存并退出。1.输入查找命令，这个命令会在整个文件系统中搜索名为 nginx.conf 的文件。一、配置代理的文件是nginx.conf，首先找到它的目录。

原创 什么是iframe，火爆的微前端解决方案方案，教你快速看懂使用

iframe（Inline Frame） 是一种 HTML 标签，它允许在一个网页内部嵌套加载另一个网页，从而实现在主页面中展示外部网页内容的功能。iframe 创建了一个独立的浏览上下文，拥有自己的文档对象模型（DOM）和执行环境，这意味着它不会与主页面共享JavaScript变量或CSS样式，提供了较好的隔离性。基本用法直接在模板中使用 标签： 在Vue组件的模板部分，你可以直接插入标签，并设置src属性指向你想要嵌入的页面URL。2.设置 src 属性：s

原创 宝塔面板配置node/npm/yarn/pm2....相关全局变量 npm/node/XXX: command not found

2.跳转至node目录下,我的node版本是v16.14.2。我的里面有node,npm,pm2,yarn......2.1 如果不知道自己node版本多少就跳转到。3.继续查看bin当前文件下的目录。1.打开终端 , cd 到根目录。然后查找当前目录下的文件。确定自己的node版本。4.输入命令添加至全局。

原创 Linux宝塔面板使用教程 - Centos/Alibaba Cloud Linux，解放命令实现可视化

使用前注意事项：为了您的正常使用，请确保使用全新或纯净的系统安装宝塔面板，不支持已部署项目/环境的系统安装。

原创 VUE3+nest.js前后端部署-服务器linux中部署Node.js环境

一.安装分布式版本管理系统Git (Alibaba Cloud Linux 3/2、CentOS 7.x)六.安装多个Node.js版本 ,当前安装得是18版本，可以运行步骤五获取全部得Node.js版本。二.使用Git将NVM的源码克隆到本地的~/.nvm目录下，并检查最新版本。四.修改npm镜像源为阿里云镜像，以加快Node.js下载速度。如果遇到网络问题有个方法直接取消网络代理。七.查看已安装的Node.js版本。三. 配置NVM的环境变量。五.查看Node.js版本。

原创 VUE3+nest.js前后端部署-服务器linux中部署Redis应用

六.指定redis必须存放在/usr/local/redis目录，想删除直接删除这个文件，不添加该关键字Linux会将可执行文件存放在/usr/local/bin目录，自愿改。一、登录Xshell7 && 服务器 开放Mysql 3306端口， Redis 6379 端口。八.修改配置 /usr/local/redis下有一个redis.conf的配置。九.运行 redis-cli 并指定远程 Redis 服务的 IP 地址和端口。八.添加 Redis 二进制文件路径到 PATH 中。

原创 VUE3+nest.js前后端部署-服务器linux中安装数据库Mysql8

(Press y|Y for Yes, any other key for No) :Y #输入Y确认使用已设置的密码。（2）在输入密码时，系统为了最大限度地保证数据安全，命令行将不做任何回显。如果以下报错为密码错位，复制粘贴得注意空格，初始密码重新尝试。5.运行以下命令，启动并设置开机自启动MySQL服务。运行以下命令后，输入root用户的密码登录MySQL。6.运行以下命令，获取并记录root用户的初始密码。3.运行以下命令，查看MySQL版本号。2.运行以下命令，安装MySQL。

原创 Vue.js 中使用 Element UI 的表格列选择selectable 可选控制

1.定义 selectable 函数： 在 Vue 组件的 methods 或者 computed 属性中定义一个函数，该函数接收两个参数：当前行的数据 row 和行的索引 index。函数应返回一个布尔值，指示该行是否可被选中。2.绑定 selectable 函数： 在 标签中，使用 type="selection" 创建一个选择列，并通过 :selectable 绑定上面定义的函数。

原创 前端文件下载得几种方式，前三种一行代码解决

【代码】前端文件下载得几种方式，前三种一行代码解决。

原创 使用JavaScript优雅实现每页一图的打印功能

步骤二：生成打印HTML内容接下来，定义buildPrintContent函数，它负责根据图片数据生成HTML字符串，确保每张图片被包裹在一个具有.invoice-page类的中，以便于应用打印样式。

原创 vue中引入Big.js解决0.1 + 0.2 ！== 0.3 的 精度问题

确保在进行加减乘除等运算时，使用 Big.js 提供的方法而不是 JavaScript 原生的运算符，以确保高精度计算的正确性。：Big.js 提供了各种数学运算方法，如加法、减法、乘法、除法、取余等。：Big.js 允许你将 Big.js 对象格式化为字符串，可以控制小数点位数、千位分隔符等。函数来创建 Big.js 对象，可以接受数字、字符串或另一个 Big.js 对象作为参数。：你可以使用 Big.js 提供的方法来控制数学运算的精确度，包括小数点位数和舍入方式。

原创 VUE3-nest前后端部署教程-----1.购买服务器安装Xshell7

XFTP安装，用于轻松地通过网络传输文件 减少繁琐得 linux 命令 修改文件。F12打开下载链接复制到迅雷下载更快 下载链接。下载后双击打开傻瓜式安装全部点击 下一步。学生可以选择高校认证免费获得6个月。为服务器登录账号密码。HTTP（端口80）点击左侧替换右侧文件。

原创 前端分片导出文件（多种文件格式）思路简单

前端分片导出文件（多种文件格式）

原创 element-plus el-table动态循环展示el-table-column得label+prop

后端返回字段 code: "|KDFL|test0815003|KDFLLD230815000003|" 当做 el-table-column 得 prop展示。后端返回字段 name: "|KDFL|order001|skin001|" 当做 el-table-column 得 label 展示。1.element-plus使用el-popover。2.table循环group数组展示。需求二：增加table问号提示。

原创 vue3+element-plus 实现问号提示功能

1.effect="dark" 不写为白色背景提示，添加后为黑色背景提示。2.placement="top-start" 设置提示出现得位置。3.:width="180" 设置提示得宽度。4.content="此处写提示语句" 填写要。

原创 大屏Echarts界面却换后改变浏览器视口宽度后再次返回Echarts界面，Echarts消失问题

原因也很简单，当时组件内做的监听是浏览器窗口大小发生变化时，可以触发 Echarts 自带的 resize 方法，但是当菜单收缩展开时，浏览器大小没有变化，自然也就触发不了 resize 方法。这是因为你之前你改变dom的时候，Echarts重画失败了，可是你切回来的时候，dom虽然相对于你切出去之前可能变了，但是对于监听器来说，他只关注于当前dom大小是否改变了。接着，就可以在onActivated()生命周期中单独给一个resize方法，不管他窗口大小是否变化了，都resize一次。

原创 *vue.js大屏Echarts自动滚动计时器滚动清除失败问题*

1.在Echarts函数里面使用clearInterval清除不生效,建议使用window.clearInterval，但是也不生效。timeroption.value) 得时候再次执行计时器，确保上次得计时器已经被清除。window.clearInterval(timeroption.value) 不生效。(加上window原因是因为window指向全局，不加就指向this)解决 ：直接给timeroption.value = null 赋值。2.使用了防抖效果，

原创 Vue2 diff 算法 和 Vue3 diff算法 区别

原创 Vue2.0 和 Vue3.0的区别

原创 js计时器每日零点调用，设置闹钟原理

前端大屏有个需求逻辑，每天的凌时刷新一次数据，，于是就想到了使用计时器，拿到明天零点的时间，获取当前的时间，两个时间戳相减获取的毫秒作为计时器的倒计时。2.记得离开界面后清除计时器window.clearInterval(slideShowTimer.value)在进入界面后立即调用函数，每次进入界面都会重新刷新倒计时的时间。1.写在onMounted调用函数SetInterval()，

原创 html倒计时

【代码】html倒计时。

原创 js秒格式为 时分秒格式

【代码】js秒格式为 时分秒格式。

原创 element type=“expand“ 折叠面板一次只能打开一个折叠面板且每次拿到当前id调用接口

设置table \\type="expand"2.expandDetail获取点击行得数据使用如何大于两条就清空第一条。toggleRowExpansion()函数。

原创 后端返回list前端转为trre格式

【代码】后端返回list前端转为trre格式。

原创 VUE3中获取el-tree 复选框选中的数据

使用ref跟getCheckedNodes（）属性 获取复选框选中的数据数据

原创 vue3element-plus折叠面板只能开启单条

【代码】vue3element-plus折叠面板只能开启单条。

原创 实现复制功能

【代码】实现复制功能。

原创 盒子自适应

盒子自适应

原创 Vue3 ElementPlus Table表格实现单选

说明：代码使用vue3+ts+elementplus中的table组件完成利用elementplus table中的@selection-change方法，设置单选。并用css隐藏全选按钮。完整代码如下：：

原创 VUE将代码json格式展示到界面

有一个需求后端把系统日志传给前端，传出得格式为没有空格换行得字符串格式代码，需要全端格式化展示在界面。

原创 VUE中多条数据并发请求allSettled

当接口请求数据多条时想并发请求时使用Promise.allSettled 方法 ，无论请求成功或者失败都返