<el-input v-model="inputValue"></el-input>中inputValue的值,而是希望输入完成后再改变,所以需要特殊处理,我们来看 handleComposition的源码,注意这里只写了一个方法而不是3个,通过event.type来判断事件类型从而简化代码,可以借鉴 handleComposition(event) { if (event.type === 'compositionend') { this.is...
element-plus源码分析第⼀节 element-plus 是⼀个使⽤ TypeScript + Composition API 重构的全新项⽬ 1. TypeScript 开发 2. Composition API 降低耦合，简化逻辑 3. Teleport 新特性重构挂载类组件 4. Vue 2.0 全局 API 切换为 Vue 3.0 实例API 5. 组件库和样式打包 6. 使⽤ Lerna 维护和管理...
这部分在一个单独的包 @element-plus/build,代码位于 /internal/build。 使用到的工具有:rollup、unbuild、esbuild、gulp、ts-morph、fast-glob 等。如需深度理解,建议先自行了解这些包后阅读本章节。 目录结构 源码 internal/build ├── build.config.ts # unbuild 配置文件├── dist # 构建产物├── ...
而且看到在 ElementPlus里也是用的 gulp 去打包 css 文件,有没有大佬知道这里为什么要这么做呢😂。 二、el-date-picker 源码部分 在上面 DatePicker 的图里,我们能看到引入的文件位置是 ./src/picker/date-picker,点开 src 看到目录结构是这样的 分为三个文件夹 basic, panel, picker 和一个文件 picker.vue...
这部分在一个单独的包@element-plus/build,代码位于/internal/build。 使用到的工具有:rollup、unbuild、esbuild、gulp、ts-morph、fast-glob等。如需深度理解,建议先自行了解这些包后阅读本章节。 目录结构 源码 internal/build ├── build.config.ts # unbuild 配置文件 ...
为element-plus 新增组件 这篇文章是分析 element-plus 源码的第一篇,通过在组件库中新增一个组件,来熟悉源码的架构。首先克隆 element-plus 源码,先来看下项目的 package.json {"packageManager":"pnpm@6.25.0","workspaces":["packages/*","play","docs"],"dependencies":{"@element-plus/components":"wor...
本文基于 Element Plus v2.1.4，旨在对项目构建与代码风格进行深入分析。构建流程涉及到工具如 rollup、unbuild、esbuild 等，具体实现代码位于 /internal/build 目录下的 @element-plus/build 包。构建过程中，使用 Gulp 脚本启动，执行 gulpfile.ts 文件，该文件中包含了构建流程的核心代码。构建流程...
Element Plus UI 提供了非常多的icon,对于这些icon,如果需要一个个写得话,又要写很多重复的物料代码,这也太累了,人工搬砖,写文档,又得加不少班呀。对于有追求的程序员,当然要有想法了。处理技巧:使用Composition API来改写组,还利用packages/hooks目录下抽取了几个可复用的 hooks,如useNamespace,以及读取icon中...
element-plus源码分析第一节 element-plus 是一个使用 TypeScript + Composition API 重构的全新项目 TypeScript 开发 Composition API 降低耦合,简化逻辑 Teleport 新特性重构挂载类组件 Vue 2.0 全局 API 切换为 Vue 3.0 实例API 组件库和样式打包 使用Lerna 维护和管理项目...