element | 青训营笔记

48 阅读2分钟

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,手机端有对应框架是Mint UI 。

中文文档:element-cn.eleme.io/#/zh-CN
github地址:github.com/ElemeFE/ele…

1.安装:使用如下命令安装element

npm i element-ui -S

2.组件: element中有包含Basic 基础组件,配置组件,Form 表单组件,Data 数据展示,Navigation 导航,Feedback 反馈组件等。 在低代码平台开发项目中我们主要使用了其中的基础组件、表单组件和数据展示,包括elbutton按钮,ellink链接以及他们的属性size,underline,href等。

3.使用:

1)一般组件使用

element-ui的基本使用还是很友好的,首先根据文档的步骤进行安装,导入需要的样式即可,详细内容可以查看官方文档安装 | Element Plus (gitee.io)。 接着,你只需要找到你想要的样式,然后点开详细代码,复制到你的.vue文件里那么就可以了。

image.png

2)非组件样式使用

官方提供的样式中有一部分并非是组件样式,比如:字体图标、全局指令、全局事件等,这里简单说明下这类样式的使用方法

image.png

3)图标样式使用

官方提供了很多图标样式,通过阅读文档可以发现:一般情况下,使用i标签,并将class属性设置成对应的图标名即可;而对于别的组件希望引入图标时(有icon属性的组件,例如el-button),设置icon属性为对应的图标名即可 image.png

image.png

4)指令样式使用

例如Loading加载,其提供的是一个指令v-loading,而非一个组件,那么使用也很简单,因为已经注册了全局组件,直接调用就行了