封面图

一文掌握vue3自定义指令

2 月 7 日
阅读 8 分钟
436
在vue中,我们经常会使用一些vue指令,例如:v-model、v-text、v-if 等,这些都是vue内置的指令,在这些指令之外,我们也可以自定义指令,例如:我们相对文字做一个指令,根据指令绑定的值更改文字颜色。我们先来实现一个最简单的自定义指令:src -> directives -> modules -> custom.ts
封面图

前端日常总结与实战技巧-2

2 月 6 日
阅读 3 分钟
350
上述条件中两个判断都会返回不存在,实际上 num 为 0 是需要返回 0 的, || 运算符存在隐式转换。我们可以使用Null运算符: ??
封面图

css的样式污染和作用域scoped问题

2 月 5 日
阅读 2 分钟
314
非隔离样式如果需要在全局使用样式,可以将样式定义在没有scoped属性的 <style> 标签中。这些样式将会影响到整个项目的所有页面有时候你需要修改一些弹窗的样式,但是发现在scoped内写不生效,因为有的组件挂载的位置并不是当前页面节点下,而是body的根节点,这个时候就可以定义一个没有scoped的style来修改弹窗...
封面图

js让滚动条滚到底部

2 月 4 日
阅读 1 分钟
443
scrollTop:获取或设置一个元素的内容垂直滚动的像素数,当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0
封面图

vue2和vue3的作用域插槽

2 月 3 日
阅读 1 分钟
327
vue2写法 {代码...} vue3写法 {代码...}
封面图

css实现环形进度条

2 月 2 日
阅读 3 分钟
367
效果:纯css实现进度条,这里用到的核心属性为box-show,box-show可以控制元素的阴影,通过控制元素阴影的移动位置来实现进度条效果。
封面图

微信小程序scroll-view组件设置 scroll-top无效问题解决

2 月 1 日
阅读 1 分钟
412
在实际运用过程中,发现设置了scroll-top无效,滚动条位置并没有发生变化,是因为微信小程序的官方框架处于性能考虑,初始化设置scroll-top不会重新渲染页面,需要将scroll-top的是放在一个事件内执行才可以生效。
封面图

try...catch中,catch加了return,后面的代码是不会执行的

1 月 31 日
阅读 1 分钟
377
{代码...} catch中加了return,后面的代码是不执行的。如果不加return,后面的代码则会执行 {代码...}
封面图

ES6新增扩展:字符串-数值-数组-函数-对象

1 月 30 日
阅读 4 分钟
482
字符串的扩展判断字符串是否包含在另一个字符中 {代码...} 字符串补全 {代码...} 字符串重复 {代码...} 消除字符串空格 {代码...} replaceAll()替换全部字符串 {代码...} at字符串匹配输出 {代码...} 数值的扩展数值分隔符允许给较长的数值添加分隔符,分割符没有间隔位数限制,不影响原值,不能在特殊符号前后。let num...
封面图

vue3使用百度地图

1 月 29 日
阅读 2 分钟
679
打开百度地图开放平台,登录进入控制台进入我的应用,点击创建应用填写应用名称,选择应用类型为浏览器端输入访问域名白名单,*为不限制任何域名,完成后点击提交回到我的应用即可查看到刚才创建的应用AK
封面图

element-tree组件连接线以及懒加载

1 月 28 日
阅读 5 分钟
444
设置tree节点的连接线需要在tree组件上配置 :index = 0 ; 初始化节点的距离,否则节点的连接线位置会偏移,配置完成后使用上面的css样式即可,before伪元素为Y轴、after伪元素为X轴连接线。
封面图

列表封装-递归数据回显-全局数据挂载

1 月 27 日
阅读 3 分钟
474
某些下拉选项或者配置项是固定的,将这些数据提取到一个单独的js文件,对应页面使用只需要引入即可,这是数据共享的一种,此外还可以将数据挂载到vue.prototype中,配置原型名,完成后对应页面不用引入js文件,只需要全局使用配置名即可获取数据。
封面图

前端的请求头和响应头以及常见用途

1 月 26 日
阅读 1 分钟
536
在浏览器中发送 HTTP 请求时,通常需要查看请求头(request headers)和响应头(response headers)。这些头部信息包含了关于请求或响应的重要信息,例如内容类型、编码方式、cookie 等。我们在对接后端的时候经常会碰到跟请求头和响应头的问题,下面是关于请求头和响应头的一些常用字段说明,了解这些非常重要,
封面图

CSS秘籍:日常总结与实战技巧-2

1 月 25 日
阅读 3 分钟
448
后面的90表示透明度为0.9,也就是90%{ fillColor: "#c6e2ff90" }色值越小透明度越高: #c6e2ff10,这个就相当于透明度0.1,也就是10%
封面图

axios直接请求

1 月 24 日
阅读 1 分钟
371
有时候我们想做一些接口测试用来快速的获取信息,或者想要绕过项目封装好的axios请求,此时就可以用axios直接请求接口,下面是axios直接请求的几种方式
封面图

webpack动态按需引入文件

1 月 23 日
阅读 1 分钟
349
在webpack中,动态引入的文件必须是字面量,也就是必须使用静态定义好的路径如果你有多个文件需要引入,可以提前将路径映射好,然后通过动态取路径的形式引入
封面图

递归和递归返回值

1 月 22 日
阅读 5 分钟
489
递归函数有一个基本条件,它100%接收一个函数,该函数的数据结构必定是一致的。例如:有一个递归函数,遍历它所有的的数据,返回期望的数据结构初始进入时,传入一个list,遍历list的所有数据,碰到dataType == 8的时候item有一个children,该children的结构与传入的list一样
封面图

函数尾调用优化

1 月 21 日
阅读 1 分钟
440
我们每次调用函数,都会在在内存中记录一个“调用帧”又成为“栈帧空间”在上述例子中,调用a()函数,会在内存中记录一个调用栈,然后继续调用b()函数,此时在内存中又会记录一个调用帧,等到b()函数运行结束,调用帧a、b的内存才会释放。我们可以利用“尾调用”来释放调用帧内存
封面图

CSS秘籍:日常总结与实战技巧-1

1 月 20 日
阅读 3 分钟
417
在未触发的时候,弹窗是隐藏的,但是column-gap会将其计算在内,导致最后一个div也会产生gap间隙,解决方法就是将<Dialog />拿出来,在外面再套一层div
封面图

前端日常总结与实战技巧-1

1 月 19 日
阅读 3 分钟
378
通常我们会在列表的每一行增加一个编辑按钮,如果后端不提供详情接口,那么编辑的表单回显可以通过作用域插槽获取当前行数据进行回显,但请时刻记住,对象or数组的值为引用类型,使用作用域插槽的值进行回显编辑一定要深拷贝当前行数据,否则会造成原始数据修改。
封面图

Promise执行顺序以及同步执行

1 月 18 日
阅读 2 分钟
614
promise是一个异步任务,如果我们需要将promise变成同步执行,我们可以使用 async-await 让进程等待,直到promise执行完毕后再执行下面的任务
封面图

async与await的关系以及什么场景下会使用

1 月 17 日
阅读 3 分钟
437
如果async内部没有return返回,则默认返回undefined因为async是一个Promise,所以可以用await来获取Prmose的返回值
封面图

一文教你实现前端自定义浮窗

1 月 16 日
阅读 3 分钟
426
在页面布局中,我们通常会给指定区域做限制,若元素超出了指定区域则会隐藏(overflow: hidden;)。而文字提示框组件却能精准定位指定元素,并不受overflow: hidden;元素的影响。这是因为文字提示框组件是直接挂载在body下的,所以它不受页面布局的影响,其它的弹窗组件也是类似的原理,例如:modal组件、对话框组件、mask...
封面图

如何取消浏览器的默认事件(默认行为)?

1 月 15 日
阅读 1 分钟
346
要取消对粘贴事件的阻止,你可以在某个条件下解除对事件的默认行为阻止。例如,你可以在特定条件下移除事件监听器,或者在事件监听器中添加一个条件判断来决定是否调用e.preventDefault()。这样,当条件满足时,粘贴事件将不会被阻止。
封面图

像编写文档一样轻松构建你的官网!-VitePress保姆级教程

2024-09-25
阅读 7 分钟
1.6k
vitepress居然能帮你自动管理文章,只需 Markdown 即可轻松创建美观的文档站点。文章的章节与标题自动对应,无需其它额外操作!页面的跳转居然能自动区分外链和内链!这究竟是什么魔法?本文将带你一探究竟!
封面图

打造你的专属主题-VitePress保姆级教程

2024-09-24
阅读 4 分钟
1.1k
1、在theme文件夹下新建index.mts,index.mts作为theme的入口文件,vitepress会自动解析theme文件夹下的index.mts文件。
封面图

不敲一行代码!助你快速搭建属于自己的官网博客!-VitePress保姆级教程

2024-09-23
阅读 5 分钟
618
前言我们在阅读官方文档时,经常看到一些项目的文档非常简约精美,并且布局高度相似,其实这些官网是基于vitepress搭建,例如:Vite官方文档Vue-UseSnowAdmin这些官网都是基于vitepress搭建,virepress给我们提供了非常多的配置,我们只需要按照配置修改即可实现上图中的效果,并且在virepress我们不需要手写代码,只需...
封面图

如何在项目中定义和使用hooks函数?

2024-03-13
阅读 2 分钟
699
1、hooks就是钩子的意思2、你可以将它想象成用来触发的一种工具3、hooks是一个独立的文件4、hooks的逻辑是可复用的,可以想象成是函数的封装5、hooks可以封装数据和变量5、hooks的文件名以及函数名以use开头,例如:useTheme.js / useTheme()

web端屏幕截屏,生成自定义海报!

2024-02-28
阅读 5 分钟
1.6k
在一些社群网站,经常会碰到问题、活动、商品的信息分享,这种分享通常是以海报的形式发送给好友或保存到本地。在这种场景下,海报肯定是动态变化的,所以我们要动态的渲染内容并生成图片,海报其实就是图片。官网:html2canvas海报示例:
封面图

递归组件组合拳,无惧页面嵌套

2024-02-23
阅读 3 分钟
1.1k
2、教育系统的题目列表在遍历生成基础题时,遇到了综合题,综合题包含了所有基础题,此时就不用再写一遍基础题,直接调用自身组件即可,这样不论基础题内部嵌套多少层综合题,都可以生成题目列表。
封面图

微信小程序图片压缩原来这么easy!

2023-12-24
阅读 5 分钟
1.8k
在日常业务中我们可能会涉及到图片上传功能,现代影像设备大多数的照片都是几MB,甚至几十MB大小,大文件的上传会导致上传进度缓慢、占用云存储空间。所以,我们会根据需求来做图片压缩,将过大的图片文件压缩到指定大小内。
封面图

hex和rgb色值转换-色彩加深减淡

2023-12-22
阅读 4 分钟
2.9k
我们在做主题订制的时候,一般都会选一种主题色,该颜色以主题色为主导,颜色依次变浅,用于做主题色下的关联色统一,例如文字激活、激活的背景色、菜单背景色等
封面图

关于微信小程序中如何实现数据可视化-echarts动态渲染

2023-11-27
阅读 4 分钟
1.4k
移动端设备中,难免会涉及到数据的可视化展示、数据统计等等,本篇主要讲解原生微信小程序中嵌入echarts并进行动态渲染,实现数据可视化功能。
封面图

微信小程序文件预览和下载-文件系统

2023-11-25
阅读 5 分钟
1.6k
tempFilePath就是临时临时文件路径。通过wx.openDocument打开文件。showMenu表示预览文件右上方的菜单,你可以在该菜单中选择保存文件,将文件显示的保存到本地。
封面图

微信小程序记住密码,让登录解放双手

2023-11-21
阅读 3 分钟
832
密码是用户最重要的数据,也是系统最需要保护的数据,我们在登录的时候需要用账号密码请求登录接口,如果用户勾选记住密码,那么下一次登录时,我们需要将账号密码回填到输入框,用户可以直接登录系统。我们分别对这种流程进行说明:
封面图

微信小程序动态生成表单来啦!你再也不需要手写表单了!

2023-11-18
阅读 5 分钟
905
由于我们在小程序上涉及到数据采集业务,需要经常使用表单,微信小程序的表单使用起来非常麻烦,数据和表单是分离的,每个输入框都需要做数据处理才能实现响应式数据,所以我开发了dc-vant-form,针对原生微信小程序+vant组件构建的自定义表单,开发者可以通过表单配置项来快速生成表单。