【前端系列】Element-UI 悟道_网站优化分享

您的位置：上海毫米网络优化公司 > 网站优化分享 >

博客目录

一.介绍

1.官网
2.什么是 element?
3.特点
4.设计原则
二.使用

1.安装
2.完整引入
3.按需引入
4.全局配置
5.修改字体大小
6.刷新功能
7.跳转指定页面
三.el-button

1.效果
2.按钮分类
3.按钮样式
4.按钮状态
5.按钮分组
6.按钮尺寸
四.常用组件地址

1.布局容器
2.表格
3.input
4.图标
5.表单
6.日历
7.按钮
8.分页
9.加载
10.标签
五.常见问题

1.分页查询
2.复制按钮
3.超过后省略
4.刷新当前页面
5.跳转
6.头部 2 个按钮

7.键盘点击事件

一.介绍

1.官网

官网地址

2.什么是 element?

Element UI 是一个基于 Vue.js 的开源用户界面框架，用于构建 Web 应用程序的用户界面。它提供了一系列的可重用的 UI 组件，包括按钮、表单、对话框、菜单、表格、图表等，以帮助开发者更轻松地构建功能丰富的前端界面。Element UI 设计风格简洁美观，易于定制和使用，因此它在许多 Vue.js 项目中被广泛使用。

3.特点

Element UI 的特点包括：

丰富的 UI 组件：Element UI 提供了许多常见的 UI 组件，可以用于构建各种类型的 Web 应用程序。
响应式设计：组件能够根据不同的屏幕尺寸和设备自动适应，以确保用户在不同平台上都有良好的体验。
可定制性：开发者可以根据项目的需求对 Element UI 的组件进行自定义，包括颜色、样式和布局。
国际化支持：Element UI 提供了多语言支持，可以轻松实现国际化的 Web 应用。
活跃的社区和文档：Element UI 拥有庞大的用户社区和丰富的文档资源，开发者可以在社区中获得支持和分享经验。

Element UI 的主要目标是帮助开发者快速构建漂亮和功能强大的前端界面，特别适用于基于 Vue.js 的项目。如果您正在使用 Vue.js 来构建 Web 应用程序，Element UI 可能是一个有用的工具，可以加速开发过程并提升用户体验。

4.设计原则

一致性 Consistency:

**与现实生活一致：**与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；

**在界面中一致：**所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback:

**控制反馈：**通过界面样式和交互动效让用户可以清晰的感知自己的操作；

**页面反馈：**操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency:

**简化流程：**设计简洁直观的操作流程；
**清晰明确：**语言表达清晰且表意明确，让用户快速理解进而作出决策；

**帮助用户识别：**界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability:

**用户决策：**根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；

**结果可控：**用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

二.使用

1.安装

npm i element-ui -S

CDN:

2.完整引入

在 main.js 中写入以下内容：

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import App from "./App.vue";
Vue.use(ElementUI);
new Vue({
  el: "#app",
  render: (h) => h(App),
});

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

3.按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from "vue";
import { Button, Select } from "element-ui";
import App from "./App.vue";
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */
new Vue({
  el: "#app",
  render: (h) => h(App),
});

4.全局配置

在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：

完整引入 Element：

import Vue from "vue";
import Element from "element-ui";
Vue.use(Element, { size: "small", zIndex: 3000 });

按需引入 Element：

import Vue from "vue";
import { Button } from "element-ui";
Vue.prototype.$ELEMENT = { size: "small", zIndex: 3000 };
Vue.use(Button);

按照以上设置，项目中所有拥有 size 属性的组件的默认尺寸均为 ‘small’，弹框的初始 z-index 为 3000。

5.修改字体大小

要增大 Element UI 中提供的刷新图标，可以在 i 标签中添加 font-size 样式来设置图标大小。例如，将 font-size 设置为 20px 可以将图标大小增大为原来的两倍： html 在上述代码中，将 font-size 设置为 20px 可以将刷新图标大小增大为原来的两倍。您可以根据实际需要调整 font-size 的值来设置图标大小。

6.刷新功能

要在 el-header 组件中添加一个刷新图标并实现刷新当前页面的功能，可以在 el-header 标签内添加一个 i 标签，并添加一个点击事件来实现刷新功能。具体步骤如下：

在模板中添加一个 i 标签，并添加一个点击事件。在上述代码中，添加了一个名为刷新的 i 标签，并通过 @click 监听了该标签的点击事件，并调用了 refreshPage 方法。el-icon-refresh 是一个 Element UI 中提供的刷新图标。



  
    新增
  

kwan

在 methods 中定义 refreshPage 方法，使用 location.reload() 方法来刷新当前页面。在上述代码中，refreshPage 方法使用 location.reload() 方法来刷新当前页面。这样，当用户点击刷新图标时，就会触发 refreshPage 方法，从而刷新当前页面。

methods: {
    refreshPage()
    {
        location.reload();
    }
}

7.跳转指定页面

跳转指定页面并添加合适的图标


  
    
    用户管理

三.el-button

1.效果

el-button 提供的功能已经比较完善了，拿来即可即可。注意不推荐自己定义 style 来修改默认样式，容易导致外观不统一。

【前端系列】Element-UI 悟道,image-20230714153116110,第2张

2.按钮分类

el-button 按钮的分类基本是靠颜色区分的，另外还有一种文本按钮type="text"，文本按钮由于比较小，比较适合用于表格每行的操作栏部分。

按钮分类：
默认
primary
success
info
warning
danger
text

3.按钮样式

Element 提供了朴素按钮、圆角按钮、圆形按钮，需要注意的是圆形按钮一般只放一个图标进去，代码如下：

按钮样式：
朴素按钮
圆角按钮

4.按钮状态

按钮状态其实就是 HTML 标准的功能，通过 disabled 实现禁用即可。

按钮状态：
正常
禁用

5.按钮分组

按钮分组很好用，像常见的分页按钮，分成一组的话更加好看，通过将按钮包裹起来，即可实现。

按钮分组：

  上一页
  
    下一页

6.按钮尺寸

饿了提供了默认、中、小、很小四种尺寸，代码如下：

按钮的尺寸：
默认
medium
small
mini

四.常用组件地址

组件地址

1.布局容器

容器地址

2.表格

表格地址

3.input

input 地址

4.图标

图标地址

5.表单

表单地址

6.日历

日历地址

7.按钮

按钮地址

8.分页

分页地址

9.加载

加载地址

10.标签

标签地址

五.常见问题

1.分页查询

2.复制按钮

  复制回答