- 博客(71)
- 收藏
- 关注
RSS订阅原创 vue点击当前盒子以外任意地方隐藏当前盒子
当在 .box 以外的地方点击时，由于 .stop 修饰符的作用，事件不会冒泡到 .container，因此不会触发 hideBox 方法。需要注意的是：它以HTMLElement为参数，且返回布尔值。
2024-05-19 17:48:45
227
原创 Vue 过渡
过渡其实就是一个淡入淡出的效果。v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。v-leave: 定义离开过渡的开始状态。
2024-04-29 09:15:22
240
原创 Vue中key的作用和原理
diff过程可以概括为：oldCh和newCh各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了，就会结束比较,这四种比较方式就是首、尾、旧尾新头、旧头新尾。
2024-04-14 19:44:09
357
原创 elementUI和elementPlus使用el-date-picker禁用指定范围的日期
time.getTime() < Date.now() - 8.64e7 禁用日期不包含当前日。time.getTime() > Date.now() - 8.64e7 禁用日期包含当前日。2、禁止选择今日之后的日期（今天可选）1、禁止选择今天之前的日期。
2024-04-07 16:54:13
343
原创 javascript判断当前是哪个浏览器
因为针对不同的浏览器我们可能需要做不同的操作，才能满足不同客户的需要和体验，所以有时候需要 js判断当前用户使用的什么浏览器。
2024-03-31 18:35:39
134
原创 em、px、rem、vh、vw 的区别
px：绝对单位，页面按精确像素展示em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算vw、vh：主要用于页面视口大小布局，在页面布局上更加方便简单。
2024-03-17 15:55:36
252
原创 前端实现点击复制内容到粘贴板功能
需要主动创建一个可输入文本的标签（input和textarea）然后将待复制的文本赋值给这个标签，再调用.select()方法选中这个标签才能继续执行。复制时，先选中文本，然后调用document.execCommand(‘copy’)，选中的文本就会进入剪贴板。如果是文本输入标签，标签不可以赋予disable或者readonly，这会影响select()方法。当需要选中的内容不是文本输入标签(input、textarea)当需要选中的内容是文本输入标签(input、textarea)
2024-03-08 17:05:15
400
原创 Vue3中的生命周期
Vue3中的生命周期setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 methodonBeforeMount() : 组件挂载到节点上之前执行的函数；onMounted() : 组件挂载完成后执行的函数；onBeforeUpdate(): 组件更新之前执行的函数；onUpdated(): 组件更新完成之后执行的函数；onBeforeUnmount(): 组件卸载之前执行的函数；onUnmounted(): 组件卸载完成后
2024-02-02 14:57:46
265
原创 echarts-wordcloud词云
echarts-wordcloud是基于echarts的一个插件，所以我们要首先安装echarts包，然后再安装echarts-wordcloud的包，这里我的练习项目安装的版本；当然，你可以随意安装你需要的版本；
2024-01-21 20:00:04
824
原创 vue3中使用echarts：tooltip的trigger为axis tooltip不显示问题
【代码】vue3中使用echarts：tooltip的trigger为axis tooltip不显示问题。
2024-01-05 17:42:47
993
3
原创 Echarts饼图中显示百分比
查了echarts 文档，并不能通过简单的配置来实现，原因如下：在单个serie的label中，只能设置一个label，位置可以选择在饼图内部inner，或者饼图外部outer，无法实现同时实现内部、外部显示。查阅文档看到说可以设置两个serie，让两个饼图完全重合即可，一个外标签显示文字说明，另一个显示内标签，实现显示百分比。
2023-12-09 14:41:17
1423
原创 vue3生命周期
renderTriggered -> onRenderTriggered，状态触发，同样是vue3新引入的钩子函数，只有在开发环境有效，与onRenderTracked的效果类似，但不会跟踪所有的响应式变量方法，只会定点追踪发生改变的数据，同样返回一个event对象。renderTracked -> onRenderTracked，状态跟踪，vue3新引入的钩子函数，只有在开发环境有用，用于跟踪所有响应式变量和方法，一旦页面有update，就会跟踪他们并返回一个event对象。
2023-12-03 20:16:14
89
原创 z-index属性在什么情况下会失效
z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；父元素position为relative时，子元素的z-index失效。元素没有设置position属性为非static属性。元素在设置z-index的同时还设置了float浮动。
2023-11-26 20:15:21
89
原创 Vue Router active-class 属性
active-class 是 vue-router 模块的 router-link 组件的属性，当 router-link 标签被点击时将会应用这个样式。
2023-11-12 17:10:59
355
原创 new Blob()详解以及blob转file
Blob() 构造函数返回一个新的 Blob 对象。blob 的内容由参数数组中给出的值的串联组成。
2023-11-05 20:18:52
635
原创 前后端跨域常用解决方案
跨域是指浏览器不能执行其他网站的脚本。它是浏览器同源策略造成的，是浏览器对JS实施的安全限制。同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。同源策略限制以下行为Cookie、LocalStorage 和 IndexDB 无法读取DOM 和 Js对象无法获得AJAX 请求不能发送。
2023-10-22 20:13:57
215
原创 Vue3 使用 echarts
echarts 是百度基于 JavaScript 实现的一个开源可视化图表库，主要特点就是可视化类型丰富、动画炫酷、使用简单。这个教程就简单演示如何在 Vue 3 项目中使用 echarts。
2023-09-04 10:38:36
999
原创 let 和 const 命令之(块级作用域)
上面代码的原意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。但是，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。第二种场景，用来计数的循环变量泄露为全局变量。第一种场景，内层变量可能会覆盖外层变量。
2023-08-13 09:16:20
31
原创 vue3的自定义指令
自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。举例：在某个场景下，需要一进入页面或者打开某个弹窗就聚焦到指定的输入框。//!第四个参数 prevNode 只在beforeUpdate和updated才有！// 当指令绑定的元素 的父组件销毁前调用。<简单讲，指令元素的父组件销毁前调用> } , unmounted() {} , // 当指令与元素解除绑定且父组件已销毁时调用。
2023-08-07 15:04:06
113
原创 防抖和节流
防抖是将多次执行变为最后一次执行，适用于像搜索框这样需要输入完整关键字才会产生最终结果的场景；节流是将多次执行变成每隔一段时间执行，适合于需要频繁触发但每次执行事件耗时较久的场景。
2023-07-17 10:02:34
41
原创 JavaScript复制一个对象
在 JavaScript 中，如果直接将一个对象赋值给另一个变量，那么实际上赋值的是该对象的引用（即指向该对象的内存地址），而不是将该对象复制一份赋值给另一个变量。这意味着如果修改其中一个变量的属性，另一个变量的属性也会被修改。
2023-07-17 09:41:53
103
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人