BreenCL的博客

通过Vue+Vite实现一个Excel表格去重工具

解决Vite+Vue3打包项目本地运行html白屏和报错问题

绘制世界地图并根据返回经纬度数据进行定点，将定点数据展示在世界地图内

一个基于Vue3和Element Plus即拿即用的小型分页器组件

项目下使用绘制图谱；图谱节点为两个地址，节点间存在多条连线情况需求；鼠标悬浮到节点上方时，高亮当前节点并出现气泡提示，展示相关信息；点击图谱连线后需要高亮关联节点和当前连线；图谱大小需要保证自适应（这里可以是根据窗口自适应，也可以是可调整大小的弹窗内的自适应

用户可以输入一段和一段用于，这则表达式可以提供几个快捷，如：i、g、m、s，用户输入正则表达式后可以选择修饰符并根据输入的正则表达式字符串和选择的修饰符来生成一个完整的正则去匹配测试字符串并返回结果。

在Vue2.x项目中使用AntV X6组件库绘制流程图，需要实现以下需求：需求1：左侧菜单中的模块可以拖拽进入画布中生成对应的流程图模块需求2：流程图中的节点之间可以进行连线交互需求3：点击对应的节点后可以进行操作节点（删除、查看节点的相关信息参数）需求4：鼠标悬浮在连线上时可以删除当前连线隐含需求：节点样式需要满足`UI`设计，所以需要自定义节点样式............

前端大文件上传（分片上传）一、问题日常业务中难免出现前端需要向后端传输大型文件的情况，这时单次的请求不能满足传输大文件的需求，就需要用到分片上传业务需求为：用户可以上传小于20G的镜像文件，并进显示当前上传进度前端：vue3.x+Element Plus组件+axios二、解决解决思路简单为前端选择文件后读取到文件的基本信息，包括：文件的大小、文件格式等信息，用于前端校验，校验完成后将文件进行切片并通过请求轮询把切片传递给后端Vue的元素代码如下，主要借助el-upload组件：&l

Vue3.x项目搭建一、目标通过vite搭建一个Vue3.x版本的项目，使用JavaScript语法，配合使用Vue3.x全家桶，包含：Vuex和vue-router，并引入Element Plus组件库二、实践环境准备：Node.js、VSCode、Chrome浏览器（安装Node、VSCode编译器这些就不多做赘述了，VSCode建议配合使用Volar插件，有需求自行查找安装方法即可）提醒：项目中所有依赖都是通过npm包管理工具进行安装，读者可以使用cnpm或yarn等工具进行安装

浏览器修改滚动条样式前言：在Vue项目中会有使用到滚动条的情况，但是会遇到原生滚动条的样式不满足UI设计，因此需要改变滚动条的样式，下面使用两种方式来修改滚动条的样式，以Vue项目举例1.第一种利用Element UI在Vue2.x的项目中我们可以利用Element UI组件el-scrollbar来改变滚动条的样式，虽然API文档中并没有给出el-scrollbar的使用方法，但可以正常使用的，使用方法如下：<template> <div class="outer"&

随着Vue3.2版本的更新，script-setup语法糖也随之产生，免去了写setup函数和export default的繁琐步骤，自定义指令可以直接获得并使用，文章侧重于组件以及组件传参使用，响应式相关内容详见文档Vue3文档。

Vue3.x使用Element Plus组件登录过期多次弹窗问题一、问题Vue3.x版本配合使用Element Plus组件库，当前用户登录过期时，出现多次弹窗，效果如下图所示：出现的原因，后端进行身份过期的判断，当过期时请求接口参数code!==200，前端响应拦截时做了统一错误抛出处理；二、解决解决方法分为两种：第一种（与Vue2.x版本问题类似）：这种方式适用于在响应拦截时统一进行了抛错提示处理，利用一个状态值进行限制，当code!==200时在响应拦截处对响应数据进

Vue2.x使用Element组件登录过期多次弹窗问题一、问题Vue2.x版本使用Element组件库中message消息提示组件时会出现当前用户登录失效时，接口返回非成功的code，在相应拦截中进行抛错处理导致出现多次弹窗的问题，如下所示：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Z90xkVd-1638165836170)(C:\Users\Breen\AppData\Roaming\Typora\typora-user-images\image-2021

Vue实现自定义列表拖动列表排序并展示一、问题列表通过编辑页面可以对表头信息进行拖动编辑，编辑内容包括：排序列表的顺序、列表每一列是否需要展示总体规划为两大需求：拖动排序列表、根据排序好的表头顺序展示对应的列表信息二、解决1.解决自定义列表拖动排序首先，解决拖动排序的问题，因为是Vue项目，所以可以利用组件库中vuedraggable组件对列表进行拖动排序下载vuedraggable组件（使用cnpm同理）npm install vuedraggable -S在需要使用该

Vue动态组件的使用实现组件整合大屏展示一、问题项目中开发多个可视化的页面（组件），现需要根据选择的数据和屏幕的配置数据将多个页面整合在同一个页面内，并且根据配置数据划分占比以及位置关系（横向位置，垂直高度统一，横向宽度根据配置数据的占比进行划分）最终效果如图：二、解决解决思路，主要利用Vue的动态组件，配合CSS的flex布局方式实现首先最好将大屏的页面路由放在一级路由下，单独的一个界面，这样大屏界面的样式不会受到其它界面的影响根据返回的数据动态设置屏幕的html部分代码如

Vue解决Element组件el-tooltip滚动时不消失的问题一、问题在给列表中的某些值外层嵌套了Element组件中的el-tooltip后，在滑动鼠标滑轮时el-tooltip的提示框不会消失（或不会立即消失，被滚动到顶上），影响了界面的显示；产生这种情况的原因是因为el-tooltip是监听鼠标是否移动，所以当鼠标不移动只进行滚动的时候提示并不会消失，由于组件内设置了z-index的属性，滚到上面后依然悬浮在页面上层影响界面的显示，具体问题如图所示：二、解决解决思路为监

Vue中使用ECharts报echarts Uncaught (in promise) TypeError: Cannot read property ‘getAttribute’ of null错一、问题在Vue中使用ECharts时会出现如图的报错，简单翻译就是没有获取到属性名，也就ECharts没有找到可以渲染图表的DOM元素，所以抛出错误二、解决回看代码中html的部分使用了v-if和v-else，由于Vue的特性，加上了v-if和v-else属性的两个DOM并不会同时挂载DOM树

Vue中实现点击复制文字一、问题点击文字右侧的图标进行复制文字内容，成功后给予提示，方便用户粘贴二、解决利用clipboard库实现首先安装clipboardnpm install clipboard --save之后在点击的元素中（这里是一个图标）动态绑定需要复制的内容（也就是h2标签中的文本内容），这里非常关键，一定不要把关系搞混了！<div> <h2>{{name}}</h2> <img class="t

一、问题需要将Excel文件进行导入，传递给后端，成功导入后接收到后端返回的数据重新渲染列表二、解决利用Element组件Upload实现文件上传（导入功能），具体代码如下：<!-- html部分 --><el-tooltip content="导入队伍" placement="top-start"> <el-upload :show-file-list="false" action="" :http-request="putinTeam"> &l

Vue上传图片并回显或展示返回数据一、问题需求：需要将图片上传至后端并回显展示，或展示所需数据二、解决利用Element组件Upload上传组件进行解决其中HTML部分代码如下所示：<!-- 上传 --><el-upload :show-file-list="false" action="" :http-request="uploadImg"> <el-input v-model="img" placeholder="请上传"></el-

Vue从后端获取数据并导出为Excel下载一、问题后端返回的是二数据流，前端需要将数据导出成为Excel文件进行下载二、解决首先判断请求类型，以post请求为例，需要在二次封装axios中设置responseType值的类型为blobexport async function $_post_excel(url, obj = {}) { /* request payload */ return await axios({ method: "post", url: u