12 2023 档案
摘要:workspaces(工作区)是一个通用术语,它指的是从单个顶级根包中管理本地文件系统中的多个包。 npm、yarn、pnpm 都提供了对 workspaces 的支持,在使用上会有些微的不同,今天就分享一下这几个包管理器分别使用 workspaces 的方式 前段时间写几个独立的组件,当时因为没考
阅读全文
摘要:在 element-plus 中,popper 组件是 tooltip、select、date-picker 等触发式弹出层组件的基础,有了它就可以封装各种类似功能的组件了。 popper 组件依赖于 floating-ui,是对 floating-ui 的高级封装。 最终效果展示 今天的完整代码放
阅读全文
摘要:在工作中,经常需要使用日期选择器来让用户方便地选择日期。实现一个日期选择器组件。 先来看看今天要实现的效果 基础布局 popper 和日期选择器对应的元素 触发器:也就是输入框 弹出层:日期面板 看看下面的基础布局,为了简化对时间的操作,这里使用 dayjs date-picker.ts // da
阅读全文
摘要:如果想要实现拖拽排序功能,有很多现成的库可以供使用,比如 Sortable.js(vuedraggable)、dnd-kit(react-dnd)等可以轻松帮助实现这一功能。 本文的目标不是介绍如何使用这些库,而是手动实现一个简单版的 Sortable 组件。通过本文的阅读,您将深入了解拖拽排序的核
阅读全文
摘要:前言 isRef()、unRef()、toRef()、toRefs()这几个函数他们各自都有什么功能,在什么场景下应用以及有哪些细节是我们没有注意到的,我们一起来看一下,为了方便大家理解和对照,这里以官方文档说明 + 解析的方式讲解。 isRef() 检查某个值是否为 ref。 类型 ts func
阅读全文
摘要:搭建vue3 & ts组件库脚手架 目标 pnpm搭建monorepo项目,和使用workspace测试组件库 组件支持typescript,可以被使用的项目识别 组件支持整体导入、按需自动导入 环境要求 node ≥ 18 , pnpm ≥ 8 , vue ≥ 3.3 初始化项目模板 首先使用vi
阅读全文
摘要:js判断文件类型详解 通过file的type属性判断 <input type="file" onchange="onchangecb(this)" /> <script> function onchangecb(e) { const file = e.files[0]; console.log(fi
阅读全文
摘要:代码参照 React 16.13.1 什么是 Diff 在render阶段的beginWork函数中,会将上次更新产生的 Fiber 节点与本次更新的 JSX 对象(对应ClassComponent的this.render方法返回值,或者FunctionComponent执行的返回值)进行比较。根据
阅读全文
摘要:Diff 更新算法 由于目前Vue3对于性能的优化做了很多的处理,所以其在更新时并不会对所有的节点都进行diff更新。目前会进行diff更新的有以下两种情况: v-for容器节点 自写的render()函数 还有一种特殊情况会进行无diff的按序更新,这种更新是全替换模式,非常耗时: 无key值的v
阅读全文
摘要:所谓 diff 算法,就是通过比对新旧两个虚拟节点不一样的地方,针对那些不一样的地方进行新增或更新或删除操作。接下来详细介绍节点更新的过程。 首先进行静态节点处理,判断新旧两个虚拟节点是否是静态节点,如果是,就不需要进行更新操作,可以直接跳过更新比对的过程 。 再更新处理新老节点的属性,获取新老节点
阅读全文
摘要:在 Vue3 中,有许多与响应式相关的函数,例如 toRef、toRefs、isRef、unref 等等。合理地使用这些函数可以在实际开发中大大提高效率。本文将详细介绍这些函数的用法,让在实际开发中知道应该使用哪些 API 并能够熟练地回答面试官的相关问题。 ref() 大家对于 ref 这个 AP
阅读全文
摘要:1.需求背景 (1)在一般的管理系统或者 H5 应用中,需要交互反馈提醒。这种交互反馈,往往需要在多个组件中使用到,那么是否可以将其抽离出来,封装一个组件呢?答案是肯定的,可以根据日常的业务,对消息提醒功能进行封装,那么问题来了,如何实现一次注册,多次使用呢,关键时刻,vue.extend API
阅读全文
摘要:官网 demo 并没有对 handleSpan 方法进行详细说明 demo 运行效果如下图 可以看到,第一行的第一列和第二列合并,第三行第一列和第四行第一列合并 这时,我们再看代码 先看 ① 处的代码,rowIndex 0 指的是第一行, columnIndex 0 指的是第一列,rowIndex
阅读全文
摘要:微信支付三种方式流程梳理 1. Native 方式 PC 端 Native 方式一般是在 PC 端中使用。 先看官方提供的流程图:  根据官方的图来梳理即可: 1.1 第一步 商户平台内部生成
阅读全文
摘要:开始 在编写组件库之前,我们首先要对整个代码项目的解构有一个清晰的划分,以及用到的大多数规范,和代码风格有一个约定,这篇文章主要就围绕着下面图中的几个问题展开描述一下。 1、搭建 monorepo 环境 我们使用pnpm当做包管理工具,用pnpm workspace来实现monorepo。可以看下面
阅读全文
摘要:文章标题:Vue 组件实现富文本编辑器 文章摘要:本文介绍了如何使用 Vue 和 Wangeditor 插件实现富文本编辑器组件,并详细解释了组件中的各个部分和功能。 Vue 组件实现富文本编辑器 在 Web 开发中,富文本编辑器是一个非常常见的功能,它能够让用户以所见即所得的方式编辑和排版文本内容
阅读全文
摘要:本人比较喜欢用这一款编辑器,官方文档:(用于 Vue React | wangEditor),很详细。我主要来说说怎么使用customPaste 自定义粘贴的,怎么解决 复制粘贴 word ,没有图片的情况。 主要是关于 wangeditor 在 vue2 的使用 效果图: 先把完整代码放这里: <
阅读全文
摘要:官方资料 wangEditor 官网 效果展示 准备工作 这里按照 wangEditor 官网提供的 Vue3 Demo 操作就行,下面的内容可以直接跳过 安装 yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --sav
阅读全文