云隙阳光i-CSDN博客

原创前端开发实现检索文本高亮

3、高亮匹配的关键词：在遍历过程中，对于每个文本片段，判断是否包含搜索关键词。需要注意的是，上述示例仅仅是一个简单的实现，如果需要更复杂的搜索功能，可能需要使用更高级的搜索库或框架。此外，对于大量文本内容的搜索，可能需要考虑性能优化的问题。2、遍历文本内容：将需要进行搜索的文本内容获取到，并进行遍历。最后，我们将更新后的内容重新赋值给文本容器，从而实现高亮展示效果。4、更新文本内容：根据搜索结果进行高亮处理后，将更新后的文本内容重新渲染到页面上，以展示高亮效果。

2024-10-31 21:48:32 223

原创 Element UI 表格组件复选框实现单选效果

给el-table绑定类名：header-cell-class-name=“headerCellClass”

2024-10-28 11:27:00 401

原创 Vue2和Vue3的响应式原理

对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。通过Reflect（反射）: 对源对象的属性进行操作。直接通过下标修改数组, 界面不会自动更新。新增属性、删除属性, 界面不会更新。

2024-09-29 18:17:33 177 1

原创 Promise.all()

Promise.all() 更适合彼此相互依赖或者在其中任何一个reject时立即结束。Promise.allSettled()更适合多个彼此不依赖的异步任务成功完成时，或者想知道每个promise的结果。

2024-09-20 17:04:54 314

原创 CSS阴影效果-box-shadow

（水平偏移为0表示不进行水平偏移；垂直为-2表示向上偏移2px；颜色为rgba(0, 0, 0, 0.5)）

2024-09-14 16:00:26 330

原创 vue3的Provide/Inject

【代码】vue3的Provide/Inject。

2024-09-06 14:11:12 466

原创 flex: 1有什么用？

通过将每个链接的 flex 属性设置为 1，我们确保它们和谐地共享导航栏的可用宽度。随着屏幕尺寸在桌面、平板电脑和移动设备之间变化，链接可以轻松适应，保持视觉吸引力和一致的用户体验。浏览网站是一种基本的用户体验，这就是 flex: 1 真正闪耀的地方！想象一下制作一个导航栏，其中的项目无论屏幕大小如何，都可以优雅地调整并均匀分布。

2024-09-01 17:05:31 429

原创提升 JavaScript 知识技能和工作效率的单行代码片段

【代码】提升 JavaScript 知识技能和工作效率的单行代码片段。

2024-08-23 16:25:56 166

原创 Vue3 中给 defineProps 设置默认值

在 Vue3 中，我们经常需要使用 defineProps 来定义组件的属性，但是如何设置这些属性的默认值呢？这是一个常见的问题，特别是在开发过程中，我们希望能够为组件的属性提供一些默认值，以便在未传递属性值时能够有一个良好的备选方案。总的来说，Vue3 中的 defineProps 提供了灵活的方式来定义组件的属性，并且可以轻松设置默认值。通过设置默认值，我们可以确保即使用户未传递属性值，组件也能够正常工作，并且具备合理的默认行为。除了提供基本的默认值外，我们还可以使用函数来动态设置默认值。

2024-08-16 14:39:56 352

原创压缩图片的封装

1.可以设置压缩后的图片最大宽度/高度。限制输出最大宽/高值（如果不设置，按照原图尺寸大小）2.要求输出格式支持blob 和 File 文件。3.可以设置输出图片的质量级别（假设1-10级别。级别越大，质量越高，占用存储越大，越清晰）

2024-08-09 16:17:54 312

原创 svg与canvas的区别？

综上所述，SVG适用于静态、可缩放和交互性较强的图形，而Canvas适用于实时、动态和像素级的绘图需求。选择使用哪种技术取决于具体的应用场景和需求。

2024-08-04 19:11:07 316

原创判断一个变量是数组还是对象

【代码】判断一个变量是数组还是对象。

2024-07-28 20:53:31 254

原创 vue视频组件

【代码】vue视频组件。

2024-07-19 17:28:14 272

原创 Vue3中watch用法

在 Vue3 中的组合式 API 中，watch 的作用和 Vue2 中的 watch 作用是一样的，他们都是用来监听响应式状态发生变化的，当响应式状态发生变化时，都会触发一个回调函数。当需要在数据变化时执行异步或开销较大的操作时，computed是无法操作异步数据的，所以需要使用watch进行侦听。侦听器watch作用是侦听一个或多个数据的变化，数据变化时执行的回调函数，两个额外参数：immediate（立即执行）和deep（深度侦听）

2024-07-12 15:58:57 1156

原创 vue3中的computed函数详解

computed函数是Vue3中的一个内置函数，它主要用于创建一个计算属性。通过使用computed函数，我们可以方便地创建一个计算属性，使代码更为简洁和可读。computed函数在组件实例中函数式声明，只要该计算属性依赖的响应式变量发生变化，它就会自动更新。

2024-07-07 20:25:18 302

原创 input、el-input输入框输入规则

再改改样式，隐藏按钮，靠左对齐，最后效果和普通的input无异。设置精度precision，即可四舍五入；

2024-06-30 20:24:00 400

原创 JavaScript中的Promise、Async和Await

使用Promise，可以避免所谓的“回调地狱”，即多层嵌套的回调函数，从而使代码更加清晰和易于维护。它可以暂停async函数的执行，等待Promise的解决（resolve），然后以Promise的值继续执行函数。通过在函数声明前加上async关键字，可以将任何函数转换为返回Promise的异步函数。这意味着你可以使用.then()和.catch()来处理它们的结果。Promise的另一个优点是可以通过链式调用.then()和.catch()方法来处理复杂的异步流程。

2024-06-23 21:57:54 325

原创 z-index属性什么情况下会失效

z-index属性在下列情况下会失效：

2024-06-16 17:44:26 154

原创 Vue3 中 nextTick 的使用详解

Vue3是Vue.js的最新版本，带来了许多改进和新特性。其中一个重要的改进是对nextTick API的重构和改进。在Vue3中，nextTick的使用方式与Vue2有所不同，本文将详细介绍在Vue3中如何使用nextTick。

2024-06-10 21:15:02 1620

原创 vue3使用自定义指令

自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。举例：在某个场景下，需要一进入页面或者打开某个弹窗就聚焦到指定的输入框。},},el.focus()},第四个参数 prevNode 只在beforeUpdate和updated才有！},// 当指令绑定的元素的父组件销毁前调用。<简单讲，指令元素的父组件销毁前调用>},

2024-06-02 20:31:52 169

原创 Vue递归以及示例

传入相对应的属性以及数据源。

2024-05-26 21:34:26 350

原创 vue点击当前盒子以外任意地方隐藏当前盒子

当在 .box 以外的地方点击时，由于 .stop 修饰符的作用，事件不会冒泡到 .container，因此不会触发 hideBox 方法。需要注意的是：它以HTMLElement为参数，且返回布尔值。

2024-05-19 17:48:45 439

原创 Vue 过渡

过渡其实就是一个淡入淡出的效果。v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。v-leave: 定义离开过渡的开始状态。

2024-04-29 09:15:22 265

原创 javascript使用Object.keys

返回值：一个表示给定对象的所有可枚举属性的字符串数组。参数：要返回其枚举自身属性的对象。

2024-04-21 20:07:22 241 1

原创 Vue中key的作用和原理

diff过程可以概括为：oldCh和newCh各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了，就会结束比较,这四种比较方式就是首、尾、旧尾新头、旧头新尾。

2024-04-14 19:44:09 401

原创 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 723

原创 javascript判断当前是哪个浏览器

因为针对不同的浏览器我们可能需要做不同的操作，才能满足不同客户的需要和体验，所以有时候需要 js判断当前用户使用的什么浏览器。

2024-03-31 18:35:39 239

原创前端开发常用判断符号

【代码】前端开发常用判断符号。

2024-03-24 20:35:05 385

原创 em、px、rem、vh、vw 的区别

px：绝对单位，页面按精确像素展示em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算vw、vh：主要用于页面视口大小布局，在页面布局上更加方便简单。

2024-03-17 15:55:36 412

原创前端实现点击复制内容到粘贴板功能

需要主动创建一个可输入文本的标签（input和textarea）然后将待复制的文本赋值给这个标签，再调用.select()方法选中这个标签才能继续执行。复制时，先选中文本，然后调用document.execCommand(‘copy’)，选中的文本就会进入剪贴板。如果是文本输入标签，标签不可以赋予disable或者readonly，这会影响select()方法。当需要选中的内容不是文本输入标签(input、textarea)当需要选中的内容是文本输入标签(input、textarea)

2024-03-08 17:05:15 686

原创 Vue.js v-on=“$listeners“的使用

【代码】Vue.js v-on=“$listeners“的使用。

2024-02-28 14:47:33 2528

原创 Vue图片懒加载

/ 全局指令el,stop() //避免性能浪费，视口可见后不再监听},});

2024-02-25 20:01:52 757

原创 Vue3中的生命周期

Vue3中的生命周期setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 methodonBeforeMount() : 组件挂载到节点上之前执行的函数；onMounted() : 组件挂载完成后执行的函数；onBeforeUpdate(): 组件更新之前执行的函数；onUpdated(): 组件更新完成之后执行的函数；onBeforeUnmount(): 组件卸载之前执行的函数；onUnmounted(): 组件卸载完成后

2024-02-02 14:57:46 285