- 博客(100)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Mac m系列芯片安装node14版本使用nvm + Rosetta 2
由于苹果 M 系列芯片（包括 M4）使用的是 ARM 架构，而 Node.js 14 是在英特尔 x86 架构时代发布的，因此在 M 系列 Mac 上安装 Node.js 14 可能会遇到兼容性问题。会找不到nvm,这时候你可能想是不是要重新安装nvm，其实是不需要的，nvm本身是一个shell脚本管理器，它可以在不同架构的终端中使用同一个安装目录。如果没有，手动添加，输入。确保在Rosetta终端中加载nvm，在Rosetta终端中，检查。重新打开新终端（Rosetta 模式），安装 nvm。
2025-07-29 14:39:34
1296
原创 从0到1深入理解vite
每次稍微改一点点东西，就会非常麻烦我们需要把App.tsx通过tsc转换为App.jsx，再通过React-complier转换为js文件有一个东西能够帮我们把tsc,react-complier,less,babel,uglifyjs全部集成到一起，我们只需要关心我们写的代码，如果代码一变化，就会全部把上述流程全部走一遍，这个东西就是构建工具。
2024-09-05 16:05:01
1674
原创 上传excel文件后修改表格内容报错The requested file could not be read, typically due to permission problems that ha
只要遇到返回是promise pending状态的 一定要检查一下代码中是否有未注意的异步操作。
2024-08-23 13:23:20
1276
原创 wangeditor报错Error: Cannot find a descendant at path [3] in node: {“children“:
出现这个问题原因是富文本编辑器写在`dialog`中，但是`dialog`没有单独封装组件也放在当前页面中，而每一次打开`dialog`中的`Editor`并没有销毁
2024-08-23 12:03:52
1741
原创 js项目引入判断浏览器版本号，如果版本过低提醒用户升级版本
直接在项目中引入当前js即可， 可以在把当前js放入public中当做静态文件在index.html中引入，==需要确保这里的地址是你们部署的nginx中的转发路径，并不是当前文件的相对路径==
2024-07-02 10:54:09
794
原创 前端根据文件url路径判断文件预览或者下载以及自定义
需求：点击不同附件浏览器查看效果不同，比如附近类型为`pdf`，则打开一个新的`tab`页在线预览，如果是`zip`包等，则直接下载，如果是`image`，则弹窗展示当前图片
2024-01-05 16:04:29
910
原创 element form中input使用@keyup.enter.native回车页面刷新问题
会自动触发form的submit提交事件。当form中只有一个文本框的时候，使用。,阻止form提交默认事件。
2023-10-27 17:36:59
603
原创 b站看视频3倍速及手动控制弹幕显示行数
弹幕行数最少是1/4，看课的时候弹幕太多很影响观看体验，可以设置css的高度控制弹幕的显示行数，height默认是100%，可以自己调整相应的像素。B站的播放速度最大只有2倍速，但是很多时候看视频想要更高倍速的，可以试试设置
2023-04-29 19:30:02
1200
原创 前端最全面试题整理（持续更新）
此文章的题是同事给我发的一个PDF文档里的题，原版我也不清楚是哪里的，好像是某个培训机构的题库。题比较全，但是原版很多题的答案不是很清晰，在此基础上我重新补充了一下
2023-02-17 23:56:03
6814
1
原创 npm ERR cb() never called报错原因及解决办法
我看网上好多答案都是清除npm缓存，或者重装node，本着不重装node的原则，网上的方法除了重装node试了个遍，最后竟然是重启大法搞定的，重启大法就是好！！！
2022-07-14 10:52:49
8675
4
原创 基于element Select二次封装带滚动分页的选择器
实现效果select选择器滚动到底部请求下一页组件封装<template> <el-select v-model="selectValue" filterable remote :filter-method="handleSearch" clearable v-loadmore="loadMore" v-bind="$attrs" > <el-option v-for="item in
2022-02-16 17:12:01
1069
2
原创 element表格内组件执行多次的原因以及解决方法
如图: table表格里引用了自己封装的select组件，但是子组件在created里总是执行两次(因为我在created里请求接口了),后来发现是表格里写了fixed的缘故,fixed会让表格重新复制一遍，这样就相当于加载了两次表格的dom，所以子組件才会执行两遍fixed复制可以查看我的另一篇博客,讲的相对细致https://blog.csdn.net/weixin_44157964/article/details/120205080解决方法:如果fixed没有用到的话,可以去掉fixed如
2022-01-24 17:57:42
4215
2
原创 element button自定义图标
实现效果如图，我想实现二维码的图片可以根据不同状态进行disabled的切换，本来是用两个img实现的，但是img还需要设置图片不可点击，虽然css使用cursor:no-drop也能实现，后来突然想到button就默认支持disabled呀，我只用把这个二维码的图片设置为button的自定义图标，我就可以使用button的disabled去控制是否可以点击了代码实现button的icon属性自定义一个图标名称，这个自定义的图标名称会默认添加到button下i标签的class上，我们只需要设置i标签
2021-10-15 16:25:51
10900
原创 基于element dialog二次封装弹窗组件
实现效果组件封装<template> <el-dialog :title="title" :width="width" :visible.sync="dialogVisible" :close-on-click-modal="false" v-if="dialogVisible" v-bind="$attrs" > <slot></slot> <div slot="footer
2021-09-30 14:24:35
927
原创 前端状态标识组件封装
实现效果没有失败的截图,失败就是红色的点组件封装<template> <span class="badge"> <span :class="{ 'badge-status-dot': !!status, [`badge-status-${status}`]: !!status }" /> <span class="badge-status-text">{{ text }
2021-09-28 16:00:56
494
原创 el-table中同时使用expand和fixed，展开内容被分割成三段解决办法
问题描述如下图所示，el-table中，如果同时使用expand和 fixed的话，expand中的内容会被分割成三份,展开的内容不具有连续性解决结果展示解决最终效果如下,expand中的展开内容连续展示,不会被分割问题分析如下图所示,如果加了fixed之后,element会把table复制两份(如果只加一侧fixed,则只会复制一份),我们在页面上看到的结果是三个表格最终合并之后的样式可以看到,左中右这三个表格是独立存在的,如果只双击中间的内容,左右的内容并不会被同时选中解决办法
2021-09-09 17:34:03
5592
6
原创 el-select二次封装带有全选和数量统计功能
实现效果二次封装el-select组件<template> <div :style="{ width }" class="select-all"> <el-select multiple v-model="selectedList" @change="changeSelect" @remove-tag="removeTag" placeholder="请选择" class="select-
2021-09-01 16:32:59
884
原创 重学javascript 1(持续更新)
数据类型原始值类型「值类型/基本数据类型」number 数字string 字符串boolean 布尔null 空对象指针undefined 未定义symbol 唯一值bigint 大数对象类型「引用数据类型」标准普通对象 object标准特殊对象 Array、RegExp、Date、Math、Error……非标准特殊对象 Number、String、Boolean……可调用/执行对象「函数」functiontypeof 检测数据类型以二进制进行检测对象：对象都是以000开头
2021-07-25 15:39:38
263
1
原创 js面试0.1+0.2!==0.3原因以及解决方法
问题原因因为js底层都是按照二进制来存储数据的,十进制的小数转化为二进制如下图它的计算过程如下:给该小数乘以2,然后取整,然后获取小数继续乘以2取整，以此循环所以十进制的小数转换为二进制会出现无限循环，对于无限循环的情况，会自动截掉多余的部分，只存储64位，所以，十进制的小数，在计算机底层存储的时候，就已经“失真”了0.1+0.2在进行运算的时候，是按照二进制来计算的，把计算的结果变成10进制，交给客户端呈现。而浏览器呈现的数值是有长度限制的，超过长度限制的也会被截取掉，截取后的数值从小数最后一位
2021-07-24 23:07:14
753
原创 js for循环遍历每一项异步请求，遍历结束后执行使用promise.all
场景：数组遍历中每次遍历都需要去请求getStaffCover接口，拿到该接口的结果拼接到数组的每一项，等到数组遍历完之后，拿到拼接好的数组。拼接的数组必须是最终遍历的结果，所以得等到所有的请求结束之后进行操作，使用map可以返回每一次异步请求的Promise合集，注意这里不需要return，然后使用Promise.all等待执行完所有的异步操作，然后才会执行后面的代码解决 const promise = nv.aiFaceData.items.map(async item => {
2021-07-08 18:04:48
7642
原创 flex布局超出一行显示省略号失效(占满整行解决方法）
实现效果：如图二报错问题：如图一，标题并没有显示省略号，并且还独占一行问题原因：因为整个li是flex布局，detail为右侧占flex：1，并没有设置固定的宽度，当title设置不换行时，拿到的宽度时整个li的宽度，所以需要把detai设置width:0代码结构解决方法：给父元素的width设为0 li { width: 100%; height: 68px; display: flex; align-items: center; justify-
2021-07-05 20:06:35
5757
4
原创 css更改滚动条样式
实现效果如下.comment-list{ &::-webkit-scrollbar { width: 6px; } &::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(128, 128, 134, 0.8); } &::-webkit-scrollbar-track {
2021-07-05 15:09:21
155
原创 element 表格固定高度滚动时出现多余线条
解决方法/deep/ .el-table::before { z-index: inherit;}
2021-06-29 17:53:44
658
原创 vue 数组监听新旧值相同的解决方法
场景:我使用的是数组的splice和push更改数组 , 一般使用watch监听也就使用新值就可以 , 刚好这次还需要用到旧值，正常的数组监听只能监听到新值的改变，新老值打印并不能打印出旧值的数（新值和旧值一样），如果需要获取旧值，需要新建一个computed属性，使用JSON转换，然后再监听这个computed，就可以监听到新旧值的改变computed:{ timeMark() { return JSON.parse(JSON.stringify(this.timeList));
2021-06-29 14:02:10
1236
原创 element menu自定义图标以及css动态修改svg颜色
需求：如下图，使用element menu切换菜单的时候当前菜单需要高亮，正常的menu使用的是icon，会自动根据点击变化颜色，但是如果有自定义的图标就需要使用svg，这时候需要动态的设置svg的颜色svg的颜色是在标签内通过fill属性写死的，使用CSS3滤镜filter中的drop-shadow可以更改 .el-menu-item.is-active { .menu-icon { left: -80px; filter: drop-shadow($
2021-06-18 15:21:35
8273
原创 全局安装vue-cli报错EEXIST: file already exists
解决方法：npm install -g vue-cli --force 报错图中已经提示了 ，使用force覆盖
2021-06-07 17:38:04
1978
原创 vue项目打包之后在本地运行最简单的方法
看到网上很多都说使用express-generator,但是个人感觉还是有点麻烦，下面方法用两句命令就搞定啦一、在bash命令行输入npm install -g serve二、接着输入serve -s dist然后如下图，就可以启动了
2021-04-25 15:09:16
2577
1
原创 前端面试必问（后台管理系统的权限控制与管理）
此文章根据视频教程进行整理前端面试官必问系列-后台系统的权限控制与管理，建议搭配视频教程一起食用效果更佳在Web 系统中，权限很久以来一直都只是后端程序所控制的． 为什么呢？ 因为Web 系统的不质围绕的是数据， 而和数据库最紧密接触的是后端程序． 所以在很长的一段时间内， 权限一直都只是后端程序要考虑的话题． 但是随看前后端分离架构的流行， 越来越多的项目也在前端进权限控制一、 权限相关概念1.1 权限的分类后端权限从根不上讲前端仅仅只是视图层的展示， 权限的核心是在于服务器中的数据变，所以
2020-09-05 22:58:45
30410
21
原创 Webpack4从入门到精通以及和webpack5对比
一、Webpack 简介1.1 webpack 是什么webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。1.2 webpack 五个核心概念1.2.1 Entry入口(Entry)：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。1.2.2 O
2020-09-05 15:36:22
1554
1
原创 mobx基础及在react中的使用
一、mobx入门https://cn.mobx.js.org/一、observable可观察的状态https://cn.mobx.js.org/refguide/observable.htmlmapimport {observable} from 'mobx'// 声明const map = observable.map({a: 1, b: 2});// 设置map.set('a', 11);// 获取console.log(map.get('a'));//11console.log
2020-08-29 11:40:22
2115
原创 react中如何支持装饰器(decorators)
create-react-app 中支持decorators安装yarn add @babel/core @babel/plugin-proposal-decorators @babel/preset-env创建 .babelrc{ "presets": [ "@babel/preset-env" ], "plugins": [ [ "@babel/plugin-proposal-decorators",
2020-08-29 11:33:55
947
原创 react-native基础知识以及从零搭建
React native基础React native介绍使用JavaScript和React编写原生移动应用React Native应用是真正的移动应用，React Native产出的并不是“网页应用”， 或者说“HTML5应用”，又或者“混合应用”。 最终产品是一个真正的移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。 你要做的就是把这些基础组件使用JavaScript和React的方式组合起
2020-08-28 23:42:54
1648
原创 react报错[Intervention] Unable to preventDefault inside passive event listener due to target being tre
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See 解决：在style全局样式添加* {touch-action: pan-y;}， pan-y表示启用单指垂直平移手势(上下滑动事件)。* { touch-action: pan-y;}...
2020-08-17 12:42:12
2741
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人