明天也要努力-CSDN博客

原创关于博主

专业技能1.熟悉HTML5、CSS3，以及scss、stylus等css预编译处理器，了解 photoshop 基本操作，如切图等；2.使用过常见的前端UI框架,如Ant Design、Element UI、Vant等；3.熟悉JavaScript，以及 ES6-ES10 等前端新语法，熟悉组件化、模块化思想和开发方式；4.熟悉Vue.js 2.x及其生态圈，了解移动端、微信小程序以及 uni-app 开发；5.了解并使用过前端自动化构建工具（如：webpack）以及版本控制工具（git、SVN

2021-03-27 22:22:43 1067 3

原创 Vue3中状态管理器 ( Pinia ) 详解及使用

Pinia 对比 VuexPinia 同时支持 Vue2 以及 Vue3 ，这让同时使用两个版本的小伙伴更容易上手；Pinia 中只存在 State，getter，action，剔除掉了 Vuex 中的 Mutation 及 Module；Pinia 中的 action 可同时支持同步任务、异步任务；更友好的支持了 TypeScript ，无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断；

2024-02-19 17:25:48 925

原创 Electron中打包应用程序及相关报错解决

要创建可分发文件，请使用项目中的 make 脚本，该脚本最终运行了 electron-forge make 命令。在脚本运行后，可以看到一个 out 文件夹，其中包括可分发文件与一个包含其源码的文件夹。转换脚本完成后，Forge 会将一些脚本添加到您的 package.json 文件中。再运行 npx electron-forge import ，就可往下一步进行了。out/make 文件夹中的应用程序应该可以启动了。切换 node 版本，将 node 切换至最新版本。

2024-02-01 11:29:57 525

原创 Electron中主进程（Main Process）与渲染进程 (Renderer Process) 通信的方式

在 renderer 文件夹下新増 app.js 文件，此处的文件表示渲染进程的 js 文件，可以操作渲染进程（浏览器）中的dom。

2024-01-14 21:55:15 1027

原创解决 JavaScript中添加 if 判断，require 始终执行的问题

项目中需要根据不同的版本添加不一样的 css 样式，于是在 main.js 中添加 if 条件判断，发现即使没有进入判断里，require 始终会引入。查阅 require.js 机制后发现，require 依赖前置，所以添加 if 限制无效。

2023-12-10 18:21:41 1390 1

原创 JavaScript中判断网络状态的几种方法

为了判断是否离线，在页面加载后，可先通过 navigator.onLine 取得初始的状态，然后通过ononline、onoffline 事件来确定网络连接状态是否变化。一个缺点：navigator.onLine 和 online、offline事件却不是万能的，只能判断无线和网线是否连接，而不能进一步判断该网络是否能够上网。

2023-10-22 11:42:50 3458

原创解决 Element-ui中表格（Table）使用 v-if 条件控制列显隐时数据展示错乱的问题

在 el-table-column 上需根据不同 v-if 条件来控制列显隐时，就会出现列数据展示错乱的情况（要么 A 列的数据显示在 B 列上，或者后端返回有数据的但是显示的为空），如下所示。，这样渲染的时候就不会因为复用原则导致列数据混乱了。关于key值，一般习惯使用字段名，也可随机生成一个值，只要具有唯一性就可以。

2023-10-22 11:28:35 5453 2

原创 CSS中通过自定义属性（变量）动态修改元素样式（以 el-input 为例）

需求：通常我们动态修改 div 元素的样式，使用 :style 和 :class 即可；但想要动态修改如：Element-ui 中输入框（input）组件的字体颜色时，由于 el-input 的样式嵌套很深，需要修改的实际是 .el-input__inner 这个样式类的 color，但我们在 HTML 中没法直接拿到这个类名。声明变量颜色 colorVal 如： red，并在需要修改的地方，为 --inputColor 变量赋值；为对应的 CSS 类引入变量 --inputColor；

2023-10-22 01:03:49 2176

原创 Vue中使用 Scss 实现配置、切换主题

本项目中的公共样式文件均位于 src/assets/css 目录下，其中 index.scss是总的样式文件的汇总入口，common.scss 是供全局使用的一些基本样式(常量）， _theme.scss、_handle.scss 两个文件是进行主题颜色配置的文件。如下图，将 index.scss 在 main.js 文件中引入即可全局使用。

2023-10-20 22:03:17 2026

原创 Vue中全局限制输入特殊字符

2.1 自定义限制输入特殊字符指令// 禁止输入特殊字符 Vue . directive('emoji' , {// 正则规则可根据需求自定义 const regRule = / [`~^!:"{}|.\/;'\\[\]·~！} });2.2 在 main.js 中引入该自定义组件2.3 在组件中使用在需要校验的输入框（多行文本框）加上 v-emoji 即可。

2023-07-30 17:00:37 1638 1

原创 TypeScript中类型详解（数组、联合类型、类型别名、对象、函数、void 、Null 和 Undefined、Never、接口 interface ）

默认情况下 null 和 undefined 是所有类型的子类型（可把 null 和 undefined 赋值给 number 类型的变量）。然而没有类型是 never 的子类型或可赋值给 never 类型(除了 never 本身之外，并且即便 any 也不能赋给 never)；never 类型表示的是那些永不存在的值的类型，never 类型是任何类型的子类型，也可以赋值给任何类型；必然引起 else 分支的编译错误。当一个复杂类型或者联合类型过多或者被频繁使用时，可通过类型别名来简化该类型的使用。

2023-05-30 15:13:14 1535 1

原创 Vue中引入使用 patch-package 为依赖打补丁（以修改 vue-pdf 打包后 [hash].worker.js 路径问题为例）

patch-package npm地址patch-package github文档如果不需要在生产中运行 npm (如：正在制作 web 前端，则可使用 --save dev）

2023-04-30 15:39:50 2666 1

原创 package.json中版本号详解

第一部分：主版本号，当进行不兼容的 API 更改时，则升级主版本；第二部分：次版本号，当以向后兼容的方式添加功能时，则升级次版本；第三部分：补丁版本号，当进行向后兼容的缺陷修复时，则升级补丁版本；第四部分：日期版本号 + 希腊字母版本号（base、alpha、beta 、RC 、 release）；Base此版本表示该软件仅是一个假页面链接，通常包括所有的功能和页面布局，但是页面中的功能都没有做完整的实现，只是做为整体网站的一个基础架构；Alpha。

2023-03-04 15:38:54 2437

原创 Vue中引入使用 babel-polyfill 兼容低版本浏览器

Babel 中文官方文档Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：1. 语法转换；2. 通过 Polyfill 方式在目标环境中添加缺失的特性（通过引入第三方 polyfill 模块，例如 core-js）；3. 源码转换（codemods）；

2023-02-19 22:08:48 7174

原创 CSS中设置( 单行、多行 )超出显示省略号

css设置超出显示省略号可分两种情况：但使用的核心代码是一样的：需要先使用 “overflow:hidden;” 来把超出的部分隐藏，然后使用“text-overflow:ellipsis;”当文本超出时显示为省略号。思路：1、使用 overflow:hidden; 语句不显示超过对象尺寸的内容，就是把超出的部分隐藏了；2、使用 -webkit-line-clamp: 行数; 语句限制显示文本的行数；3、使用 text-overflow:ellipsis; 语句用省略号“…”隐藏超出范围的文本说明

2022-12-05 23:55:54 121967 3

原创 Vue中引入使用 localforage 改进本地离线存储（突破5M限制）

说到本地存储数据，首先想到的是 localStorage，应该很多小伙伴都用过，使用很简单。存储容量限制，大部分浏览器应该最多5M。我就遇到过localStorage存储字符然后尺寸爆掉的情况；仅支持字符串，如果是存对象还需将使用 JSON.stringify 和 JSON.parse 方法互相转换，有些啰嗦；读取都是同步的。大多数情况下，还挺好使的。如果存储数据比较大，如一张重要图片base64格式存储了，再读可能会有可感知的延迟时间；

2022-11-22 18:18:25 2933

原创 Vue中引入使用 element-resize-detector 监听 Dom 元素宽度、高度变化

很多做pc端平台的小伙伴都遇到过这样一个问题：在做侧边栏菜单时会有一个收缩和展开的一个功能，在伸缩的过程中右边的页面的宽度就会随之改变。我上网查了查，也动手试了试 window.onresize = ()=>{}。却不尽人意，因为它只能检测浏览器大小的变化，完全跟我们的需求不沾边。为解决类似此问题，我们可使用 element-resize-detector。

2022-11-13 13:45:29 3129 2

原创 Nginx中配置文件 nginx.conf 详解

从图中可看出主要包含三大块：全局块、event块、http块 { 包含：http全局块和 server块（ server全局块和 location块） }。Nginx 配置中，以 / 开头的路径表示绝对路径，不以 / 开头的路径表示相对路径，相对路径的根目录为 Nginx 的根目录。Nginx 配置的注释是以 # 开头，并且每条语句都以;结束，除了语句块 {}。更多关于 Nginx 配置文档可以参考。

2022-10-28 00:11:29 5108

原创 Vue3中响应式 API ( readonly、shallowReadonly、toRaw、markRaw ) 详解

toRaw() 可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象。（若先触发 changeCar 再触发 changeAddress ，car 的页面信息会进行更新，因为 address 的改变带动了页面的更新）它的 ref 解包行为与 reactive() 相同，但解包得到的值是只读的。接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。

2022-10-23 01:07:53 979

原创 Vue3中响应式 API（ shallowReactive、shallowRef、triggerRef 、customRef ）详解

一般来说，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set。强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。如果一个对象属性数据，后续功能不会修改该对象中的属性，而是新生对象来替换。创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。

2022-10-06 19:38:10 1249

原创 JavaScript中对象解构详解

默认值name : '明天也要努力' , city : '南京' , job : {post : '前端' } };const {post , level = '初级' } } = user;// 明天也要努力 25 undefined 前端初级新变量创建一个全新的变量并分配一个使用对象属性值计算的值name : '明天也要努力' , city : '南京' , job : {post : '前端' } };const {

2022-09-14 00:14:03 6563 1

原创 Vue3中内置组件 Teleport 详解

很简单，假如有非常多的弹窗，那么如何管理它们的 z-index 呢，也就是同时弹窗时的层级关系，如果每个弹窗都在各自的父组件中，那么我们是没法控制的，所有有必要把它们都拧出来，放在同一个父元素下面，这样就可以方便的设置层级关系了。但是如果把子组件放置到了 teleport 组件中，那么我们就可以指定该子组件渲染到父组件之外的其它 DOM 节点下，比如 body 或者其它的 DOM 等等。teleport 是一个内置组件，我们都知道 HTML 是由层级关系的，Vue3 中的组件也是有层级关系的。...

2022-08-28 23:04:16 20149 2

原创 JavaScript中 Generator 函数详解

Generator 函数是 ES6 提供的一种异步编程解决方案。它既是一个生成器，也是一个状态机，内部拥有值及相关的状态，生成器返回一个迭代器 Iterator 对象，可以通过这个迭代器，手动地遍历相关的值、状态，保证正确的执行顺序。function 关键字和函数之间有一个星号(*)，且内部使用 yield 表达式，定义不同的内部状态；调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是遍历器对象（Iterator Object）；...

2022-08-07 21:33:15 1295

原创 Vue3中 v-model 语法糖详解

概览很多同学对Vue的第一印象就是“响应式”、“双向绑定”等特性，而v-model就是实现双向绑定的语法糖，用过Vue的小伙伴一定都非常熟悉。但是在Vue3中，v-model发生了一些改动，使得它不再兼容Vue2的用法，具体是什么呢？非兼容用于自定义组件时，v-modelprop和事件默认名称已更改；prop事件非兼容v-bind的.sync修饰符和组件的model选项已移除，可在v-model上加一个参数代替；新增介绍。...

2022-07-26 00:14:57 9670

转载 ES11、ES12、ES13 新特性概览

传送门：ES6、 ES7、 ES8、 ES9、 ES10 新特性概览1.1 动态 import ()在 ES 2015 定义的模块语法中，所有模块导入语法都是静态声明的：虽然这套语法已经可以满足绝大多数的导入需求，而且还可以支持实现静态分析以及树抖动等一系列重要的功能。但却无法满足一些需要动态导入的需求。例如：若没有动态导入，将难以实现这些需求。虽然可以通过创建 script 标签来动态地导入某些脚本，但这是特定于浏览器环境的实现方式，也无法直接和现有的模块语法结合在一起使用，所以只能作为内部实现机制，但

2022-07-16 23:56:00 4792

原创 Vue3中响应式 API ( reactive、ref、toRef、toRefs ) 详解

我们在写项目中，总会遇到变量的定义，在 Vue2 里面，我们只需要直接定义变量就行，但是在 Vue3 里面，官方为我们推出了定义变量的方式，那么接下来我们来看看，官方给出的函数：reactive、ref、toRef、toRefs。reactive 会对传入的引用类型进行包裹，创建一个该对象的 Proxy 代理。它是源对象的响应式副本，不等于原始对象。它“深层”转换了源对象的所有嵌套 property，解包并维持其中的任何 ref 引用关系。reactive 将解包所有深层的 refs，同时维持 ref 的

2022-07-12 22:26:47 4825 1

原创 Vue3中 ref 属性详解

总结：在 Vue3 中没有 $refs，因此 Vue3 中通过 ref 属性获取元素就不能按照 vue2 的方式来获取。Vue3 需要借助生命周期方法，因为在 setup 执行时，template 中的元素还没挂载到页面上，所以必须在 mounted 之后才能获取到元素。总结：先申明 ref 响应式数据，再返回给模版使用，模板中通过 ref 绑定数据；总结：先定义一个空数组，再定义一个函数获取元素，并把该函数绑定到 ref 上（必须动态绑定），最后在函数中可以通过参数得到单个元素，这个元素一般可以放

2022-07-09 23:05:24 44782

原创 html、body、document、window 的区别

在 JavaScript 中：window 对象是一个虚拟的对象，浏览器在打开 HTML 文档时生成 window 对象，可以把它看作是所使用的浏览器的窗口，其地位很高。因为它是浏览器脚本引擎中的 globalObject。可以用 window 对象访问窗口中绘制的文档、窗口中发生的事件和影响窗口的浏览器特性。浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。BOM的核心对象是 window，它表示一个实例。在浏览器中，window 对象有双重角色，它既

2022-07-06 23:14:59 1700

原创 JavaScript 监听移动端横竖屏状态的几种方式

关于 orientationchange 事件定义和用法：在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。当视图状态发生改变时，监听器对应的函数就会执行，而对应的 MediaQueryList 对象也会传入。这个对象包括两个属性：matches（布尔值），表示CSS media query是否与当前的显示状态匹配；media 对应传入的参数字符串。关于 matchMedia() 方法定义和用法： matchMedia() 返回一个新的 MediaQueryList 对象，表示指定的媒体查询

2022-07-03 18:28:55 3290

原创 CSS中特性查询（@supports）详解及使用

CSS中的 @supports 用于检测浏览器是否支持 CSS 的某个属性。其实就是条件判断，如果支持某个属性可以写一套样式，如果不支持某个属性，可以提供另外一套样式作为替补。可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。@supports 规则由一组样式声明和一条支持条件构成。支持条件由一条或多条使用逻辑与（and）、逻辑或（or）、逻辑非（not）结合的名称 - 值对（name-value pair）组成。可以使用圆括号调整操作符的优先级。声明语法最基本的支持条件就是 CSS 声明，也就是一

2022-06-25 23:35:53 5043

原创 Vue中使用 iframe 嵌入本地 HTML 页面并相互通信

在 public 文件夹下新建 static 文件夹，然后将 html 文件及相关引用拷贝到 static 文件夹下。2. 相互通信vue 文件完整代码html 文件完整代码定义和用法：postMessage() 方法用于安全地实现跨源通信。语法：参数说明otherWindow其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。message

2022-06-18 11:20:46 9808 7

原创 HTML5 移动端页面适配 iOS 系统刘海屏

在 iphone X 之后引入了一个新概念：“safe area（安全区域）”，安全区域指屏幕内不受圆角、齐刘海、底部小黑条等元素影响的可视窗口。如下图：从 iOS11 开始，为了适配刘海屏，Apple 公司对 HTML 的 viewport meta 标签做了扩展viewport-fit 属性使用 @supports 查询机型是否支持 constant() / env() 实现兼容代码隔离，个别安卓也会成功进入这个判断，因此加上-webkit-overflow-scrolling: touch的判

2022-06-10 17:57:45 3781 1

原创 CSS中自定义属性（变量）详解

自定义属性（有时也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(–main-color);）复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。举例：同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义

2022-06-04 16:02:04 8456

Element-ui中 选择器（select）多选下拉框实现全选功能.zip

Vue + Echarts 实现中国地图多级钻取功能.zip

element-tree-plus.zip

空空如也

Element-ui中选择器（select）多选下拉框实现全选功能.zip