- 博客(54)
- 收藏
- 关注
RSS订阅原创 TypeScript系列之-- 带你深层次理解联合&交叉类型(类型收窄)
比如 Person 有 name 和 age 的属性，而 Student 在 name 和 age 的基础上还有 grade 属性，就可以这么写。如果有一个 getLength 函数，入参是联合类型 number | string，返回入参的 length。交叉类型和 interface 的 extends 非常类似，都是为了实现对象形状的组合和扩展。联合类型 | 是指可以取几种类型中的任意一种，而交叉类型 & 是指把几种类型合并起来。如果要对对象形状进行扩展，可以使用交叉类型 &。
2024-07-17 17:24:33
287
原创 深层次理解JavaScript中的super关键字
let obj1 = { name: '张三', getName() { return this.name; }} let obj2 = { name: '李四', getName() { return super.getName(); }} Object.setPrototypeOf(obj2, obj1);console.log(obj2.getName());
2024-07-16 16:32:07
327
原创 uni-app上传失败超出文件限制解决方法-分包处理-预加载
Error: 系统错误，错误码：80051,source size 2089KB exceed max limit 2MB [20240703 10:53:06][wxbf93dfb6cb3eb8af] [1.06.2405010][win32-x64]分包的页面会出现，第一次进入加载过长，可设置分包页面预加载，只需在pages页面这只即可。如果上述还无法解决，你就只能分包了，下面是整理的保姆教程。如果你是主包要跳转分包的页面，那么你的路径应该是。‘’/主包名/路径’’
2024-07-03 11:30:25
437
原创 TypeScript系列之-- 带你深层次理解对象类型回归本质探究原理
有的时候，你不能提前知道一个类型里的所有属性的名字，但是你知道这些值的特征。这种情况，你就可以用一个索引类型 (index signature) 来描述可能的值的类型b: 'lin',type可以定义对象类型name: Name实现继承(交叉类型。
2024-06-03 17:54:56
651
原创 判断浏览器是否支持MathML，提供一种浏览器标签渲染兼容的的思路
浏览器兼容 搜狗 猎豹 当我们使用MathML做公式展示，可能最大的问题就是浏览器兼容，当前主流版本都兼容了，可以支持无痕渲染MathML但总有刁民搞事情，比如低版本猎豹，搜狗浏览器。
2024-05-30 18:32:45
294
原创 TypeScript系列之-- 数组和元组类型
第一种，可以在元素类型后面接上[]第二种方式是使用数组泛型，Array如果数组想每一项放入不同数据怎么办？用元组类型。
2024-05-28 14:56:55
205
原创 整理前端新出的操作工具&好用又好玩（Custom Formatter，Oxlint，Nuxt DevTools，component-party）
2.前往proferences中的Console，勾选'Enable custom formatters'选项。Oxlint 是一个 JavaScript linter，旨在捕获错误或无用的代码，默认情况下不需要任何配置。通过各种任务的简单代码片段比较 React、Vue、Svelte、Angular、Ember 等框架语法区别。使vue3中的reactive object 在Chrome在console中更易理解的方式展现。当 ESLint 的完全缓慢成为工作流程中的瓶颈时，它可以作为增强功能。
2024-05-27 14:58:27
424
原创 响应式页面布局处理-一篇打尽
最后，你可以通过给子元素设置 flex 属性来控制它们的大小和扩展方式，flex 属性是 flex-grow, flex-shrink 和 flex-basis。布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。引入javascript脚本来实现font-size很屏幕之间的计算 ，就是拿到视口的。pc端平常用到的响应式布局 大致就如下三种，当然也会有其他方法，欢迎评论区补充。宽度 根据比例设置相应的根元素字体 从而设置相对参数的基准。
2024-05-24 18:35:52
264
原创 TypeScript系列之-深度理解基本类型&画图讲解
（含 Array, Function,Date.....）以上所有，加上再加上自定义类型。
2024-04-10 18:11:55
538
原创 在VsCode中写vue的css,代码提示一直不出现或提示错误
在我们vue项目正常写css样式，便会出现一下提示，如：但有时无提示，那么这种情况有以下几种解决方案。
2024-04-10 16:34:37
2502
原创 HTTP 常见的状态码以及其适用场景
（客户端继续发送请求，这是临时响应）：这个临时响应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。：客户端在发送POST数据给服务器前，征询服务器情况，看服务器是否处理POST的数据，如果不处理，客户端则不上传POST数据，如果处理，则POST上传数据。（使用代理）： 请求者只能使用代理访问请求的网页。（临时重定向）： 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。：协商缓存，告诉客户端有缓存，直接使用缓存中的数据，返回页面的只有头部信息，是没有内容部分。
2024-04-07 18:31:24
744
原创 git系列之--- git pull 和 git fetch理解与区别
git pull是相当于从远程仓库获取最新版本，然后再与本地分支merge，即git pull = git fetch + git merge。相比起来，git fetch 更安全也更符合实际要求，在 merge 前，我们可以查看更新情况，根据实际情况再决定是否合并。同样如果上述没有冒号，则表示将远程origin仓库的master分支拉取下来与本地当前分支合并。如果上述没有冒号，则表示将远程origin仓库的master分支拉取下来到本地当前分支。在作用上他们的功能是大致相同的，都是起到了更新代码的作用。
2024-04-07 10:30:21
615
原创 设计模式系列之--观察者模式-画图讲解
观察者模式已经是比较常见的设计模式了，并且使用的频率也比较高,那么我们什么时候用，简而言之就是，当我们一个主体改变，它所有下级要跟着改变的时候就需要用了，比如：换肤，全局数据修改，有点类似于全局状态机，只不过它可以监听改变的过程。
2024-03-28 18:52:06
478
原创 面试题系列一之-css画三角形(原理解析)
用html写一个三角形的图标算是一个比较简单的,但是工作中用的还是比较多的，面试也可能会问，但了解背后的原理才能熟练使用。4.如果我们像得到下面的三角形，我们把上面左右隐藏就行，效果如下。然后这样会占用矩形的面积，大小不是三角形，完美的做法如下。
2024-03-14 18:50:34
255
原创 设计模式系列之-策略模式(优化过多代码if…else)
想象有一个开关按钮，每次按下去都可以切换不同的灯光模式（例如：强光、柔光、闪烁），这里的每种灯光模式就是一个策略，而开关按钮就像是上下文，它决定了使用哪种灯光模式。这就是策略模式的核心思想。函数内部包含过多if…else时候就可以用策略模式来优化。简而言之：算法的使用与算法的实现分离开来。1.首先写出需要使用的策略算法。2.然后判断使用的场景。
2024-03-13 16:54:16
343
原创 二次封装 element-plus的Table 表格组件，减少代码臃肿
为什么要二次封装element-plus的Table 表格组件，言简意赅：以后难免会在表格里面加一些统一的逻辑，可以在表格里面书写重复的方法或样式。
2024-03-11 18:25:51
597
1原创 解决数学计算公式在前端项目里的展示，涉及换肤适配各个框架
但是我们项目里面用到公式可能就一个页面，引一个第三方库进来会显得十分臃肿，而且配置起来也十分的麻烦，除非涉及公式编辑或者书写的需求。有时候我们项目里面会嵌套一些数学公式说明。3.放到项目里面给相应的样式。
2024-02-21 10:33:23
421
原创 轻松在uni-app中去掉编译后微信小程序的滚动条-告别无用属性&最终解决方案
首先如果你使用的是页面级滚动，即使uni-app中的pages.json中有相关配置，在编译到小程序中也是没有效果的，因为小程序原生不支持，如下：那么在uni-app页面滚动是不是scroll-view，答案是的，但是我们没办法在顶层设置，因为官方没有暴露相关api，那么要想去掉滚动条，我们就只能在自己的页面使用scroll-view视图组件，取代全局的滚动视图。下面上简易代码效果图：如果你的组件不是占满全屏，比如有头部导航。
2024-02-02 14:16:25
1476
原创 循环渐进的玩转拖拽vue-draggable-plus
我们在做分组拖拽的时候，会用到VueDraggable，它是基于, 但我们想实现一些功能，可能很难在它的文档上找到相应的api，所以下面使用几个需求(双组拖拽，大小限制，头部尾部默认项，)，深度理解这个VueDraggable组件库的用法。
2024-01-30 15:44:07
1312
原创 扒一扒2023谷歌调试工具Chrome DevTools 的新功能，说不定用的上
有时，您只想运行代码一次，无论加载页面多少次，且如果代码在服务器上运行，您不想在客户端上再次运行它。支持对象语法的 Nuxt 插件，以便更好地控制插件顺序和更容易的挂钩注册。为此,有一个新的工具：callOnce。可以直接在文件中自定义内置选项。，在第一次使用它们时自动安装。Nuxt3.7版本中默认打开。该版本支持 Vue 3.4。您可以设置以下配置，关闭。该版本支持Vue3.3。
2024-01-28 13:25:42
315
原创 2024年了，Nuxt3新特性，总结一波
有时，您只想运行代码一次，无论加载页面多少次，且如果代码在服务器上运行，您不想在客户端上再次运行它。支持对象语法的 Nuxt 插件，以便更好地控制插件顺序和更容易的挂钩注册。为此,有一个新的工具：callOnce。可以直接在文件中自定义内置选项。，在第一次使用它们时自动安装。Nuxt3.7版本中默认打开。该版本支持 Vue 3.4。您可以设置以下配置，关闭。该版本支持Vue3.3。
2024-01-26 15:36:58
638
原创 2024年了，vue3.0过去一年的变化&新特性你必须要了解，一篇文章带你搞定
在 3.2 及以下版本中，defineProps() 的泛型类型参数只能使用类型字面量或者本地接口的引用。此限制现已被 Vue 3.3 解决。
2024-01-26 14:38:11
513
原创 2023css新特性总结
若要创建简单的弹出式窗口，您可以向弹出的元素添加 popover 属性和 id，然后使用 popovertarget=“my-popover” 将其 id 属性与调用按钮相关联。Chrome 111 中将这些函数联接起来就是三角函数 sin()、cos()、tan()、asin()、acos()、atan() 和 atan2()设置非直接父级元素的样式，则需要为该元素提供 container-name，并在样式查询中引用它。标记），从而在视觉上拆分您的内容。，并将其与滚动条的滚动偏移量相结合。
2024-01-26 11:34:45
682
原创 uni-app&小i程序富文本样式错乱
我们在uni-aap项目中可能会用到富文本，使用内置组件rich-text但是渲染效果并不好原因：后端抓取的富文本单位不是相对单位，等原因，渲染效果不是很理想。这时候解决方法，抛弃原生的rich-text内置组件，改用第三方mp-html库。
2024-01-25 18:30:25
458
原创 export * from ‘./lib/export/core.js‘&SyntaxError: Unexpected token ‘export‘的报错
当下载运行的时候就会一直报一个错误。
2023-08-18 17:50:13
793
原创 在数组遍历中使用Object.assign()对象合并，结果、值总是为最后一个值
当我在数组遍历循环中用Object.assign()进行合并对象，但是数组里合并的对象默认都为最后一个值了。
2023-03-06 20:13:29
432
原创 异步跳转火狐拦截 请求后跳转火狐拦截 Fiefix拦截了此网站的1个弹窗
当我们从和后端请求数据后，然后根据请求来的数据判断是否跳转页面，或请求到数据再跳转，火狐、EDG浏览器就会拦截
2022-10-23 21:49:11
503
原创 无限下拉滚动条设置，滚动监听上拉滚动条设置置底
当我们使用滚动监听，并由无限滚动上下滑动，同时兼顾发送请求那么这是就会出现一个问题如何在请求到数据，并渲染完dom操作，将滚动条设置到我们想要的地方核心技术：watch 监听 + $nextTick（）下面上代码监听 mounted() { this.box = this.$refs.container // 监听这个dom的scroll事件 this.box.onscroll = cardList => { this
2022-04-01 15:29:30
473
原创 在vue中引入less文件样式乱了,当用@import url(‘..‘)； 引入时发现没有效果的情况
在vue中引入less文件样式乱了，这时候…当用@import url(’…’); 引入时发现没有效果的情况将上图scoped去掉就好了，当加上scoped会在标签中加一个唯一标识，造成的结果就是只有在该组件中的css样式时有效的...
2022-04-01 15:05:57
2938
原创 less常规操作，基本使用
1，嵌套.clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; }}2，变量@width: 10px;@height: @width + 10px;#header { width: @width; h
2022-04-01 14:37:44
320
原创 echarts配置速览
title: { //标题 text: '疫情统计', link: 'https://www.baidu.com/', //标题链接 textStyle: { //样式 color: '#bfa', textBorderColor: 'balack', textBorderType: [5, 10], te..
2022-02-17 16:24:14
502
原创 vue-charts的使用，导入，配置，及常见错误
vue-charts作用：在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。第一步:下载npm i v-charts echarts -S第二部:导入同时配置import { CanvasRenderer } from 'echarts/renderers'
2022-02-16 11:39:28
9018
原创 去除html标签默认样式css文件
去除默认样式css文件html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, d
2022-01-20 13:47:35
368
原创 一些ES6语法使你的代码变得高级，Es6在日常的使用场景
1，解构赋值let obj = { a: 1, b: 2, c: 3}const { a:a1,b:b1,c:c1} = obj || {};//防止对象为空console.log(a1,b1,c1);2，合并数组（扩展运算符）const a = [1,2,3,4,5]const b = [4,5,6,7,8]const c = [...new Set([...a,...b])]//数组合并一定要去重3，字符串拼接const name1 = "小明"cons
2022-01-11 22:33:31
311
原创 Vue3.0实现一个任务清单ToDoList & vue3小练习
## 功能包含任务增加任务查找点击任务切换任务状态下方按钮实现任务展示切换总而言之实现了任务的增改查template代码：<template> <div class="container"> <h2>任务计划表</h2> <!-- 添加框 --> <div class="add"> 添加任务：<input v-model="taskModel"
2022-01-10 16:02:51
1283
原创 nvm安装步骤及各种避坑指南&nvm安装node-v没反应&npm,yarn用不了
一，nvm介绍nvm就是node版本管理工具，可以根据项目不同切换不同的版本（避免重复安装卸载）二，安装步骤下载地址：https://github.com/coreybutler/nvm-windows/releases，windows系统下载nvm-setup.zip安装包然后下载安装就行（我就不说了，一定要安装到C盘详见大佬步骤https://blog.csdn.net/qq_30376375/article/details/115877446）下面说一说我踩的坑1，npm包下载失败这种原
2022-01-03 16:01:46
5263
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人