elementui 文件转ts_ElementUI 源码定制防坑指南

最新推荐文章于 2024-03-06 15:24:03 发布

东看西看

最新推荐文章于 2024-03-06 15:24:03 发布

阅读量768

点赞数

文章标签： elementui 文件转ts

本文链接：https://blog.csdn.net/weixin_35126200/article/details/113024263

版权

背景

我司OA系统公文管理模块Office在线编辑使用的是金格IWebOffice中间件【PPAPI插件，通过标签加载】，IWebOffice在chrome中设置div盒子的css样式display:none会造成控件的奔溃，出现空白等异常情况。用过ElementUI的都知道Tabs标签页，标签之间切换用的正是display属性，笔者要改的是使用width:0px;height:0px;opacity:0;visibility:hidden;做标签的切换。

Fork element 源码

首先Fork一份源码到自己的github帐号。

接着使用git命令行工具将源码clone到本地。

git clone https://github.com/itwmike/element.git

笔者项目中使用的是 element 2.5.4 版本，所以从 2.5.4 这个tag签出一个自己的分支进行开发。

git checkout -b v2.5.4 lk-element-ui #从 v2.5.4 tag 创建分支

本地调试 element

npm install#安装相应的依赖包

npm run dev #运行调试，如果有报错看看是否为 ESlint 语法检测提示的错误。

修改 tabs 源码

为了不污染源码，笔者复制 tab-pane.vue 新建了一个自己的组件并命名为 LoElTabPane，修改其内的源码如下：

接着修改 tabs.vue 中代码使其支持新加的组件：

组件修改好后需要导出并进行全局注册。

全局注册 LoTabPane

在 packages 文件夹下增加 lo-tab-pane 文件夹并添加 index.js 文件，该文件主要用于导出 LoTabPane 。

import LoTabPane from '../tabs/src/lo-tab-pane.vue';/*istanbul ignore next*/LoTabPane.install= function(Vue) {

Vue.component(LoTabPane.name, LoTabPane);

};

exportdefault LoTabPane;

接着修改根目录下的 components.json 文件，在文件中加入 lo-tab-pane 。该文件的主要作用是在构建时生成 src/index.js，在 index.js 中进行了组件的全局注册和导出。

"lo-tab-pane": "./packages/lo-tab-pane/index.js",

添加组件 TypeScript 支持

在 types 目录下新建 lo-tab-pane.d.ts 文件，除了类名外其他内容和 tab-pane.d.ts 相同。

import { ElementUIComponent } from './component'

/** Tab Pane Component*/export declare class LoElTabPane extends ElementUIComponent {/** Title of the tab*/label: string/** Whether Tab is disabled*/disabled:boolean

/** Identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane*/name: string/** Whether Tab is closable*/closable:boolean

/** Whether Tab is lazily rendered*/lazy:boolean}

同时在 types/element-ui.d.ts 文件中导入新增的类。

import { LoElTabPane } from './lo-tab-pane' //导入

export class LoTabPane extends LoElTabPane {}//导出

添加组件到 examples 菜单

组件开发完成后添加到 examples 中进行测试。