Vue项目 - 随笔分类 - Mahmud*小麦*

摘要：

后端接口返回的是一个word转64的文档数据，前端需要页面中正确的解析导出文档预览： 1，导出功能的实现修改exportReport接口调用，设置responseType为blob以接收二进制数据修改openExport方法，实现Word文档的自动下载功能添加下载工具函数，处理blob数据转换阅读全文

posted @ 2025-10-14 11:46 Mahmud*小麦* 阅读(116) 评论(0) 推荐(0)

🎈vue3的组件通信和使用场景🌴✔️🍒

摘要：

Vue3 提供了多种组件通信方式，适用于不同的场景。以下是主要的通信方法及其实现方式： 1. Props / Emits (父子组件通信) 使用场景：父子组件之间的直接通信，最基础的方式。  <template> <ChildComponent :title="parentT 阅读全文

posted @ 2025-10-13 10:50 Mahmud*小麦* 阅读(37) 评论(0) 推荐(0)

Vue大屏可视化自适应（等比列缩放）方案✔️✔️✔️✨

摘要：

在vue大屏可视化项目中，自适应是确保在不同尺寸屏幕上正常显示的关键需求。下面我将详细介绍我在项目开发中常用的方案：Scale方案的实现✔️✔️ 1，常用自适应方案 CSS媒体查询 - 针对不同屏幕尺寸编写不同样式 Flex/Grid布局 - 使用弹性布局适应不同尺寸 Rem/VW单位 - 使用相对阅读全文

posted @ 2025-10-11 10:15 Mahmud*小麦* 阅读(204) 评论(0) 推荐(0)

📈📉ECharts技巧：如何按数据批次为柱状图设置不同颜色✔️♨️

摘要：

在数据可视化项目中，我们经常需要将大量数据分组展示，并为不同批次的数据设置不同的颜色以便区分。ECharts中实现按数据批次设置柱状图颜色的方法，适用于从接口获取动态数据的场景！✔️♨️ 方法一：基于数据索引的批次颜色设置实现步骤 1，准备数据 // 模拟从接口获取的数据 const apiDat 阅读全文

posted @ 2025-08-11 17:05 Mahmud*小麦* 阅读(59) 评论(0) 推荐(0)

🪶vue-element-admin上传图片的功能📂🖼️

摘要：

🪶🪶🪶在vue后台管理系统里面，有时候会遇到一个图片上传的功能，做这个功能的时候的思路是这样的：1：首选由前端写一个图片上传的upload标签，选择本地的图片文件之后2:调用后端给的接口，以二进制文件的形式传给后端服务器3:服务器进行处理，处理完成之后将服务器的主机名加到图片名称的前缀上4:返阅读全文

posted @ 2025-05-27 16:38 Mahmud*小麦* 阅读(53) 评论(0) 推荐(0)

简单的了解一哈 Vue3和Vue2的响应式原理🪶？【vue3：proxy | vue2：Object.defineProperty()】🎈🎈🎈

摘要：

vue的新项目开发者经常遇到响应式问题，那么vue2和vue3的响应式原理实现流程和主要的区别是如何~~~ vue3 ——— proxy ♦️ vue2 ———— Object.defineProperty() ？ 1. vue2.x的响应式原理实现原理：通过Object.definePrope 阅读全文

posted @ 2025-04-27 16:40 Mahmud*小麦* 阅读(47) 评论(0) 推荐(0)

🪢Nginx前端部署测试🥓🎈【本地部署测试+线上部署】

摘要：

🪢Nginx前端本地部署测试前端开发中虽然把本地的前端包部署到线上服务器，部署，测试...等都属于运维的工作范围内，但是作为一个前端开发者需要学会这些步骤的😬⚛：今天我就带大家先来个小实验，我们今天就尝试着进行本本地的nginx简单部署，等到后期，我们用购买的服务器进行线上的测试~~ 下载n 阅读全文

posted @ 2025-02-11 11:20 Mahmud*小麦* 阅读(179) 评论(0) 推荐(0)

【大屏可视化】系统（Vue3 + ECharts5）快速实现和应用 🎶🎈🗓️

摘要：

🎶【大屏可视化】系统（Vue3 + ECharts5）🎶 这八部~~按照，难易的顺序来进行绘制！！！💯 横向柱形图竖向柱形图雷达图环形图关系图数据云图数据展示图地图可视化 02：基于 vite 与 tailwindcss 创建大屏可视化项目 1，基于 vite 创建项目，使用：阅读全文

posted @ 2025-01-20 17:30 Mahmud*小麦* 阅读(3987) 评论(0) 推荐(1)

Vue项目实战（后台管理系统详情~~）

该文被密码保护。

posted @ 2024-07-26 10:51 Mahmud*小麦* 阅读(0) 评论(0) 推荐(0)

vue项目中API接口的管理和axios的使用详解（附登录小案例）🚩✔✔✔

摘要：

在项目中，和后台交互数据这块，有三个流行的库。 jQuery ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} }) 阅读全文

posted @ 2024-07-23 16:12 Mahmud*小麦* 阅读(192) 评论(0) 推荐(0)

数据展示动态（跑分）显示

摘要：

1.页面显示（强烈推荐） <template #header> <avue-data-tabs :option="dataOptions" :data="tabData" style="width: 75%;"></avue-data-tabs> </template> 2.具体代码阿和方法实现 2 阅读全文

posted @ 2024-05-28 17:06 Mahmud*小麦* 阅读(19) 评论(0) 推荐(0)

日期选择器：年月日动态切换显示

摘要：

1. 组件样式部分（elementUI）实现 <el-row> <el-col :span="10"> <el-button-group> <el-button :class="{ 'is-active': selectedButton 'year' }" @click="changeToYearP 阅读全文

posted @ 2024-05-28 16:50 Mahmud*小麦* 阅读(304) 评论(0) 推荐(0)

vue 图片转base64格式方法+将base64流数据转成pdf文件可打印的方法✔️✔️✔️

摘要：

1. 图片转base64格式方法（主要的代码）（其实用的还是FileReader） handleRemove(file, fileList) { console.log(file); var reader = new FileReader(); reader.readAsDataURL(file. 阅读全文

posted @ 2023-10-31 16:11 Mahmud*小麦* 阅读(2081) 评论(0) 推荐(0)

Vue中使用vue-count-to（数字滚动插件）

摘要：

效果图 1. 简单介绍 npm官网：vue-count-to vue-count-to 就是一个组件插件，咱们引入进来，可以去打印一下，它就是一个组件实例，使用components注册一下，就可以在模板中使用了，具体方式如下： 2. 安装 npm install vue-count-to 3. 引入阅读全文

posted @ 2023-10-24 15:41 Mahmud*小麦* 阅读(1698) 评论(0) 推荐(0)

实现：修改密码🔑~确认新密码🔒~重置密码🔗~提交操作✔

摘要：

1. 功能效果图： 2. 基本布局先需要引入elementUI插件- 注册基本布局code <template> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>重置密码</span> </div> <! 阅读全文

posted @ 2023-09-06 10:36 Mahmud*小麦* 阅读(359) 评论(0) 推荐(0)

上传图片【选择文件📁+上传图片🎨】

摘要：

1. 上传图片的流程分析：【选择文件📁+上传图片🎨】 2.1 功能步骤 2.1 页面基本布局基本布局 <template> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>更换头像</span> </d 阅读全文

posted @ 2023-09-04 12:01 Mahmud*小麦* 阅读(289) 评论(0) 推荐(0)

localstorage本地存储token，vuex刷新数据丢失问题⚡⚡⚡

摘要：

1.vuex和axios安装，引入，使用 1.1vuexa安装和使用 vuex3.x版本的官网安装教程:安装 | Vuex vuex4.x版本的官网安装教程:安装 | Vuex npm install vuex --save 2.在src下新建文件夹store,并在文件夹中新建文件index.js, 阅读全文

posted @ 2023-08-25 08:53 Mahmud*小麦* 阅读(967) 评论(0) 推荐(0)

element表单校验（注册密码-确认密码）~提交🔑🔒

摘要：

💎目标界面： 1.引入elementUI组件，路由和axios配置 2.实现表单页面布局  <el-form :model="regForm" :rules="regRules" ref="regForm" label-width="10px" class="dem 阅读全文

posted @ 2023-08-24 11:39 Mahmud*小麦* 阅读(586) 评论(0) 推荐(0)

vue eslint 报错 error “Component name “*****“ should always be multi-word”，该怎么办？

摘要：

出现的问题：在 vue-cli 创建的项目中，创建文件并命名后，会报 “Component name "*****" should always be multi-word” 报错；报错截图示例如下： Component name "******" should always be multi- 阅读全文

posted @ 2023-08-23 17:07 Mahmud*小麦* 阅读(4225) 评论(0) 推荐(0)

vue表格分页以及增删改查的实际应用

摘要：

效果： 1：表格以及分页 2：增加一条数据 3：删除一条数据 4：修改一条数据 5：查询一条数据 <template> <div class="tab-container"> <div class="filter-container" style="margin-bottom: 20px"> <el 阅读全文

posted @ 2023-08-06 22:11 Mahmud*小麦* 阅读(130) 评论(1) 推荐(0)

Mahmud

随笔分类 - Vue项目

公告