<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[preoccupied_的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/preoccupied_</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; preoccupied_]]></copyright><item><title><![CDATA[如何解决按钮重复点击]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/149160984</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/149160984</guid><author>preoccupied_</author><pubDate>Sun, 06 Jul 2025 23:43:14 +0800</pubDate><description><![CDATA[然后封装一个通用的 Button 组件。我们可以封装一个自定义 Hook。]]></description><category></category></item><item><title><![CDATA[如何解决按钮重复点击]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/148519508</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/148519508</guid><author>preoccupied_</author><pubDate>Sun, 08 Jun 2025 22:15:08 +0800</pubDate><description><![CDATA[这些问题如果处理不当，轻则影响用户体验，重则可能造成数据错误。然后封装一个通用的 Button 组件。我们可以封装一个自定义 Hook。]]></description><category></category></item><item><title><![CDATA[Vue3 中使用 provide/inject 实现跨层级组件传值失败的原因及解决方案]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/148090047</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/148090047</guid><author>preoccupied_</author><pubDate>Tue, 20 May 2025 16:30:48 +0800</pubDate><description><![CDATA[通过将需要传递的值封装在一个方法中，父组件使用 provide() 提供这个方法而非直接传递值本身。子组件或孙组件通过 inject() 获取这个方法后，在需要时调用该方法来获取最新值。]]></description><category></category></item><item><title><![CDATA[pinia中不定义state和action也能正常使用属性和方法]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/148050213</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/148050213</guid><author>preoccupied_</author><pubDate>Sun, 18 May 2025 21:24:27 +0800</pubDate><description><![CDATA[在 Pinia 中，确实可以不显式定义 state 和 actions 而直接使用属性和方法，这是因为 Pinia 的设计非常灵活，利用了 Vue 3 的响应式系统。]]></description><category></category></item><item><title><![CDATA[vue3入门教程：teleport]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/147637104</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/147637104</guid><author>preoccupied_</author><pubDate>Wed, 30 Apr 2025 17:23:52 +0800</pubDate><description><![CDATA[总之，Teleport是Vue 3中一个非常实用的组件，它提供了一种灵活的方式来处理需要脱离常规文档流的UI组件。通过Teleport，你可以将模态框或弹窗的内容渲染到body元素中，从而确保它们能够覆盖在整个页面之上。在这个示例中，当点击按钮时，showModal变为true，模态框组件被渲染到body元素中，从而实现了覆盖在整个页面之上的效果。在使用Teleport时，要确保传送的内容对于所有用户都是可访问和可用的，特别是对于那些依赖屏幕阅读器等辅助技术的用户。]]></description><category></category></item><item><title><![CDATA[前端开发必知：Input[type=number]为何能输入“e“及如何精准控制数字输入]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/147195210</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/147195210</guid><author>preoccupied_</author><pubDate>Sun, 13 Apr 2025 18:46:01 +0800</pubDate><description><![CDATA[在前端开发中，我们经常使用来限制用户只能输入数字。然而，许多开发者惊讶地发现，这种输入框竟然允许用户输入字母"e"（以及".“和”-"）。这不是bug，而是浏览器的有意设计。]]></description><category></category></item><item><title><![CDATA[vite.config.js常用配置]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/147029559</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/147029559</guid><author>preoccupied_</author><pubDate>Sun, 06 Apr 2025 20:27:36 +0800</pubDate><description><![CDATA[vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动： 快速的冷启动，不需要等待打包操作；即时的热模块更新，替换性能和模块数量的解耦让更新飞起；真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。vite项目中使用的不是vue.config.js,而是vite.config.js${resolve。]]></description><category></category></item><item><title><![CDATA[实现手机手势签字功能]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/146264826</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/146264826</guid><author>preoccupied_</author><pubDate>Fri, 14 Mar 2025 18:34:58 +0800</pubDate><description><![CDATA[【代码】实现手机手势签字功能。]]></description><category></category></item><item><title><![CDATA[Element Plus table 去除行hover效果]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/145637960</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/145637960</guid><author>preoccupied_</author><pubDate>Fri, 14 Feb 2025 17:53:21 +0800</pubDate><description><![CDATA[给table的指定行设置高亮背景色且去除掉这些行的hover效果]]></description><category></category></item><item><title><![CDATA[计算两个时间点之间的差距]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/145077053</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/145077053</guid><author>preoccupied_</author><pubDate>Sat, 11 Jan 2025 14:45:57 +0800</pubDate><description><![CDATA[【代码】计算两个时间点之间的差距。]]></description><category></category></item><item><title><![CDATA[VUE3中defineExpose的使用方法]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/144142374</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/144142374</guid><author>preoccupied_</author><pubDate>Fri, 29 Nov 2024 17:37:36 +0800</pubDate><description><![CDATA[使用的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在中声明的绑定。可以通过编译器宏来显式指定在组件中要暴露出去的属性官网传送门在vue3的setup中，组件默认是关闭的，对一个子组件使用ref，不能获取任何在中声明的绑定。是编译宏，用于显式地指定在组件中要暴露出去的属性。如下示例。]]></description><category></category></item><item><title><![CDATA[前端开发实现检索文本高亮]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/143418260</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/143418260</guid><author>preoccupied_</author><pubDate>Thu, 31 Oct 2024 21:48:32 +0800</pubDate><description><![CDATA[3、 高亮匹配的关键词：在遍历过程中，对于每个文本片段，判断是否包含搜索关键词。需要注意的是，上述示例仅仅是一个简单的实现，如果需要更复杂的搜索功能，可能需要使用更高级的搜索库或框架。此外，对于大量文本内容的搜索，可能需要考虑性能优化的问题。2、 遍历文本内容：将需要进行搜索的文本内容获取到，并进行遍历。最后，我们将更新后的内容重新赋值给文本容器，从而实现高亮展示效果。4、 更新文本内容：根据搜索结果进行高亮处理后，将更新后的文本内容重新渲染到页面上，以展示高亮效果。]]></description><category></category></item><item><title><![CDATA[Element UI 表格组件复选框实现单选效果]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/143289421</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/143289421</guid><author>preoccupied_</author><pubDate>Mon, 28 Oct 2024 11:27:00 +0800</pubDate><description><![CDATA[给el-table绑定类名：header-cell-class-name=“headerCellClass”]]></description><category></category></item><item><title><![CDATA[Vue2和Vue3的响应式原理]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/142641224</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/142641224</guid><author>preoccupied_</author><pubDate>Sun, 29 Sep 2024 18:17:33 +0800</pubDate><description><![CDATA[对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。通过Reflect（反射）: 对源对象的属性进行操作。直接通过下标修改数组, 界面不会自动更新。新增属性、删除属性, 界面不会更新。]]></description><category></category></item><item><title><![CDATA[Promise.all()]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/142390236</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/142390236</guid><author>preoccupied_</author><pubDate>Fri, 20 Sep 2024 17:04:54 +0800</pubDate><description><![CDATA[Promise.all() 更适合彼此相互依赖或者在其中任何一个reject时立即结束。Promise.allSettled()更适合多个彼此不依赖的异步任务成功完成时，或者想知道每个promise的结果。]]></description><category></category></item><item><title><![CDATA[CSS阴影效果-box-shadow]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/142260650</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/142260650</guid><author>preoccupied_</author><pubDate>Sat, 14 Sep 2024 16:00:26 +0800</pubDate><description><![CDATA[（水平偏移为0表示不进行水平偏移；垂直为-2表示向上偏移2px；颜色为rgba(0, 0, 0, 0.5)）]]></description><category></category></item><item><title><![CDATA[vue3中的Provide/Inject]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/141958241</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/141958241</guid><author>preoccupied_</author><pubDate>Fri, 06 Sep 2024 14:11:12 +0800</pubDate><description><![CDATA[【代码】vue3的Provide/Inject。]]></description><category></category></item><item><title><![CDATA[flex: 1有什么用？]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/141786576</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/141786576</guid><author>preoccupied_</author><pubDate>Sun, 01 Sep 2024 17:05:31 +0800</pubDate><description><![CDATA[通过将每个链接的 flex 属性设置为 1，我们确保它们和谐地共享导航栏的可用宽度。随着屏幕尺寸在桌面、平板电脑和移动设备之间变化，链接可以轻松适应，保持视觉吸引力和一致的用户体验。浏览网站是一种基本的用户体验，这就是 flex: 1 真正闪耀的地方！想象一下制作一个导航栏，其中的项目无论屏幕大小如何，都可以优雅地调整并均匀分布。]]></description><category></category></item><item><title><![CDATA[提升 JavaScript 知识技能和工作效率的单行代码片段]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/141468576</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/141468576</guid><author>preoccupied_</author><pubDate>Fri, 23 Aug 2024 16:25:56 +0800</pubDate><description><![CDATA[【代码】提升 JavaScript 知识技能和工作效率的单行代码片段。]]></description><category></category></item><item><title><![CDATA[Vue3 中给 defineProps 设置默认值]]></title><link>https://blog.youkuaiyun.com/preoccupied_/article/details/141259239</link><guid>https://blog.youkuaiyun.com/preoccupied_/article/details/141259239</guid><author>preoccupied_</author><pubDate>Fri, 16 Aug 2024 14:39:56 +0800</pubDate><description><![CDATA[在 Vue3 中，我们经常需要使用 defineProps 来定义组件的属性，但是如何设置这些属性的默认值呢？这是一个常见的问题，特别是在开发过程中，我们希望能够为组件的属性提供一些默认值，以便在未传递属性值时能够有一个良好的备选方案。总的来说，Vue3 中的 defineProps 提供了灵活的方式来定义组件的属性，并且可以轻松设置默认值。通过设置默认值，我们可以确保即使用户未传递属性值，组件也能够正常工作，并且具备合理的默认行为。除了提供基本的默认值外，我们还可以使用函数来动态设置默认值。]]></description><category></category></item></channel></rss>