- 博客(30)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Vue3.x+Element Plus仿制Acro Design简洁模式分页器组件
一个基于Vue3和Element Plus即拿即用的小型分页器组件
2023-02-21 14:27:52
874
1
原创 Vue3.x中使用AntV G6绘制力导图实现自适应
项目下使用绘制图谱；图谱节点为两个地址，节点间存在多条连线情况需求；鼠标悬浮到节点上方时，高亮当前节点并出现气泡提示，展示相关信息；点击图谱连线后需要高亮关联节点和当前连线；图谱大小需要保证自适应（这里可以是根据窗口自适应，也可以是可调整大小的弹窗内的自适应
2022-12-05 09:31:25
4095
2
原创 将输入的字符串按输入的正则表达式匹配并返回结果（仿正则表达式测试）
用户可以输入一段和一段用于，这则表达式可以提供几个快捷，如：i、g、m、s，用户输入正则表达式后可以选择修饰符并根据输入的正则表达式字符串和选择的修饰符来生成一个完整的正则去匹配测试字符串并返回结果。
2022-09-22 16:39:25
679
原创 Vue项目中使用AntV X6绘制流程图
在Vue2.x项目中使用AntV X6组件库绘制流程图，需要实现以下需求：需求1：左侧菜单中的模块可以拖拽进入画布中生成对应的流程图模块需求2：流程图中的节点之间可以进行连线交互需求3：点击对应的节点后可以进行操作节点（删除、查看节点的相关信息参数）需求4：鼠标悬浮在连线上时可以删除当前连线隐含需求：节点样式需要满足`UI`设计，所以需要自定义节点样式............
2022-07-05 16:14:36
12556
25
原创 前端大文件上传和下载（分片上传）
前端大文件上传（分片上传）一、问题日常业务中难免出现前端需要向后端传输大型文件的情况，这时单次的请求不能满足传输大文件的需求，就需要用到分片上传业务需求为：用户可以上传小于20G的镜像文件，并进显示当前上传进度前端：vue3.x+Element Plus组件+axios二、解决解决思路简单为前端选择文件后读取到文件的基本信息，包括：文件的大小、文件格式等信息，用于前端校验，校验完成后将文件进行切片并通过请求轮询把切片传递给后端Vue的元素代码如下，主要借助el-upload组件：&l
2022-04-02 16:05:04
12408
9
原创 通过vite搭建Vue3.x项目
Vue3.x项目搭建一、目标通过vite搭建一个Vue3.x版本的项目，使用JavaScript语法，配合使用Vue3.x全家桶，包含：Vuex和vue-router，并引入Element Plus组件库二、实践环境准备：Node.js、VSCode、Chrome浏览器（安装Node、VSCode编译器这些就不多做赘述了，VSCode建议配合使用Volar插件，有需求自行查找安装方法即可）提醒：项目中所有依赖都是通过npm包管理工具进行安装，读者可以使用cnpm或yarn等工具进行安装
2022-03-01 10:59:28
2567
原创 Git解决fatal: Could not read from remote repository.的问题
Git解决fatal: Could not read from remote repository.的问题一、问题当使用Git Bash时，执行命令git pull或者git push的时候出现如下问题：二、解决1. 第一种原因：因为git仓库的用户信息和本地的用户信息不匹配造成的，解决方法也很简单，在git仓库中删除当前用户配置的key后重新生成并配置即可；执行ssh-keygen –t rsa –C "git仓库邮箱"，重新生成密钥；执行git config --glob
2022-01-19 16:55:39
67345
8
原创 Vue项目修改浏览器滚动条样式
浏览器修改滚动条样式前言：在Vue项目中会有使用到滚动条的情况，但是会遇到原生滚动条的样式不满足UI设计，因此需要改变滚动条的样式，下面使用两种方式来修改滚动条的样式，以Vue项目举例1.第一种利用Element UI在Vue2.x的项目中我们可以利用Element UI组件el-scrollbar来改变滚动条的样式，虽然API文档中并没有给出el-scrollbar的使用方法，但可以正常使用的，使用方法如下：<template> <div class="outer"&
2021-12-10 15:13:16
8552
1
原创 Vue3.x语法糖script setup和相关API的使用
Vue3.x语法糖script setup和相关API的使用前言：随着Vue3.2版本的更新，script-setup语法糖也随之产生，免去了写setup函数和export default的繁琐步骤，自定义指令可以直接获得并使用，文章侧重于组件以及组件传参使用，响应式相关内容详见文档Vue3文档1.组件自动注册区别于Vue2.x，使用script setup语法糖后，引入自定义组件时可以免去components注册的过程，直接引入组件，需要注意的是不能使用name属性修改组件名称了，实例如下：&
2021-12-09 14:59:58
1074
2
原创 Vue3.x使用Element Plus组件登录过期多次弹窗问题
Vue3.x使用Element Plus组件登录过期多次弹窗问题一、问题Vue3.x版本配合使用Element Plus组件库，当前用户登录过期时，出现多次弹窗，效果如下图所示：出现的原因，后端进行身份过期的判断，当过期时请求接口参数code!==200，前端响应拦截时做了统一错误抛出处理；二、解决解决方法分为两种：第一种（与Vue2.x版本问题类似）：这种方式适用于在响应拦截时统一进行了抛错提示处理，利用一个状态值进行限制，当code!==200时在响应拦截处对响应数据进
2021-11-29 15:15:36
1422
原创 Vue2.x使用Element组件登录过期多次弹窗问题
Vue2.x使用Element组件登录过期多次弹窗问题一、问题Vue2.x版本使用Element组件库中message消息提示组件时会出现当前用户登录失效时，接口返回非成功的code，在相应拦截中进行抛错处理导致出现多次弹窗的问题，如下所示：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Z90xkVd-1638165836170)(C:\Users\Breen\AppData\Roaming\Typora\typora-user-images\image-2021
2021-11-29 14:16:57
2117
原创 Vue2.x实现自定义列表和列表拖动排序并展示
Vue实现自定义列表拖动列表排序并展示一、问题列表通过编辑页面可以对表头信息进行拖动编辑，编辑内容包括：排序列表的顺序、列表每一列是否需要展示总体规划为两大需求：拖动排序列表、根据排序好的表头顺序展示对应的列表信息二、解决1.解决自定义列表拖动排序首先，解决拖动排序的问题，因为是Vue项目，所以可以利用组件库中vuedraggable组件对列表进行拖动排序下载vuedraggable组件（使用cnpm同理）npm install vuedraggable -S在需要使用该
2021-09-22 13:56:44
2554
原创 Vue2.x动态组件的使用实现组件整合大屏展示
Vue动态组件的使用实现组件整合大屏展示一、问题项目中开发多个可视化的页面（组件），现需要根据选择的数据和屏幕的配置数据将多个页面整合在同一个页面内，并且根据配置数据划分占比以及位置关系（横向位置，垂直高度统一，横向宽度根据配置数据的占比进行划分）最终效果如图：二、解决解决思路，主要利用Vue的动态组件，配合CSS的flex布局方式实现首先最好将大屏的页面路由放在一级路由下，单独的一个界面，这样大屏界面的样式不会受到其它界面的影响根据返回的数据动态设置屏幕的html部分代码如
2021-08-27 15:48:09
870
原创 Vue2.x解决Element组件el-tooltip滚动时错位不消失的问题
Vue解决Element组件el-tooltip滚动时不消失的问题一、问题在给列表中的某些值外层嵌套了Element组件中的el-tooltip后，在滑动鼠标滑轮时el-tooltip的提示框不会消失（或不会立即消失，被滚动到顶上），影响了界面的显示；产生这种情况的原因是因为el-tooltip是监听鼠标是否移动，所以当鼠标不移动只进行滚动的时候提示并不会消失，由于组件内设置了z-index的属性，滚到上面后依然悬浮在页面上层影响界面的显示，具体问题如图所示：二、解决解决思路为监
2021-08-20 15:31:48
8143
2
原创 Vue中使用ECharts报错echarts Uncaught (in promise) TypeError: Cannot read property ‘getAttribute‘ of null
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树
2021-08-19 09:44:37
3590
原创 ES6及ES6+对象、数组方法使用（含力扣题目）持续更新...
1.apply()方法：通过apply可以编写用于不同对象的方法var person = { fullName: function() { return this.firstName + " " + this.lastName; }}var person1 = { firstName: "Bill", lastName: "Gates",}person.fullName.apply(person1); // 将返回 "Bill Gates"
2021-08-05 16:42:31
232
原创 宏任务与微任务与异步
在ES5之后，JavaScript引入了Promise，不需要浏览器的安排JavaScript引擎本身就可以发起任务了宿主发起的任务称为宏任务JavaScript引擎发起的任务称为微任务同操作系统一样，等待的行为是一个事件循环，整个循环做的事情基本上就是反复的”等待—执行“1.宏任务在任务队列（task queue）中的函数每次执行的过程都是一个宏观任务宏任务的队列就相当于事件循环宏任务中JavaScript的Promise还会产生异步代码，JavaScr..
2021-07-30 14:56:28
276
原创 Vue2.x中实现点击复制文字
Vue中实现点击复制文字一、问题点击文字右侧的图标进行复制文字内容，成功后给予提示，方便用户粘贴二、解决利用clipboard库实现首先安装clipboardnpm install clipboard --save之后在点击的元素中（这里是一个图标）动态绑定需要复制的内容（也就是h2标签中的文本内容），这里非常关键，一定不要把关系搞混了！<div> <h2>{{name}}</h2> <img class="t
2021-07-19 13:59:26
1117
原创 Vue2.x+Element实现文件导入
一、问题需要将Excel文件进行导入，传递给后端，成功导入后接收到后端返回的数据重新渲染列表二、解决利用Element组件Upload实现文件上传（导入功能），具体代码如下：<!-- html部分 --><el-tooltip content="导入队伍" placement="top-start"> <el-upload :show-file-list="false" action="" :http-request="putinTeam"> &l
2021-07-16 16:12:44
699
原创 Vue2.x+Element上传图片并回显或展示返回数据
Vue上传图片并回显或展示返回数据一、问题需求：需要将图片上传至后端并回显展示，或展示所需数据二、解决利用Element组件Upload上传组件进行解决其中HTML部分代码如下所示：<!-- 上传 --><el-upload :show-file-list="false" action="" :http-request="uploadImg"> <el-input v-model="img" placeholder="请上传"></el-
2021-07-14 15:53:46
3723
原创 Vue2.x从后端获取流数据并保存为Excel、CSV或其它格式下载
Vue从后端获取数据并导出为Excel下载一、问题后端返回的是二数据流，前端需要将数据导出成为Excel文件进行下载二、解决首先判断请求类型，以post请求为例，需要在二次封装axios中设置responseType值的类型为blobexport async function $_post_excel(url, obj = {}) { /* request payload */ return await axios({ method: "post", url: u
2021-07-14 11:33:58
1805
翻译 前端面试题（包含基础和Vue）（持续更新...）
面试题目一、HTML和CSS1.CSS动画使用@keyframes创建动画@keyframes myfirst{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}@-moz-keyframes myfirst /* Firefox */{from {background: red;}to {background: yellow;}
2021-06-28 15:30:04
1301
原创 云计算习题
一、选择题1、云计算是对（ D ）技术的发展与运用。A. 并行计算 B. 网格计算 C. 分布式计算 D. 以上都是2、将基础设施作为服务的云计算服务类型是（ A ）。A. IaaS B. PaaS C. SaaS D. 以上都不是3、下列选项中，哪条不是GFS选择在用户态下实现的原因（ D ）。A. 调试简单 B. 不影响数据块服务器的稳定性
2020-12-24 14:29:39
25782
3
原创 CSS常用布局二（flex布局）
flex布局前言：flex是flexible box的缩写，译为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局，只需要设置“display:flex"即可；行内元素可以通过设置”display:inline-flex“实现；需要注意的是，如果设置了flex布局，则子元素的float、clear和vertical-align属性将失效；1.基本概念使用了flex布局的元素，称为flex容器（flex container），简称为”容器“。它所有的子元素自动生成容器成员，
2020-07-20 19:00:07
2634
原创 CSS常用布局一（三栏布局）
CSS常用布局一（三列布局）一、常用的布局前言：浏览网站时会发现圣杯布局和双飞翼布局已经是现今大多数网页布局的主流，因此也成为了前端工程师需要掌握的重要布局方式。而两种布局的效果基本一样，实现了一个两侧宽度固定，中间宽度自适应的三列布局样式。圣杯布局的来历是2006年发在a list part上的文章In Search of the Holy Grail；双飞翼则源自淘宝UED，两者都算是对页面的一种形象的表达，两中布局的异同如下：相同点：两侧宽度固定，中间宽度自适应的三栏布局；中间栏要放在
2020-07-20 12:21:12
587
Vue3.x+AntV G6+Element Plus
2022-12-04
Vue+Antv X6绘制流程图demo
2022-07-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人