Element-UI 快速上手

前言

Element-UI 是一个基于 Vue 2.0 的桌面端组件库，提供了丰富的 UI 组件和完善的 API 接口，方便开发者快速构建高质量的 Web 应用程序。本节将详细介绍 Element-UI 的安装与引入，以及引入后全局挂载在 Vue 原型上的方法和调用的 API。

1. Element-UI 安装和引入

1.1 安装 Element-UI

在开始使用 Element-UI 之前，需要将其安装到你的项目中。你可以通过 npm 或 yarn 进行安装。

1.1.1 通过 npm 安装

npm install element-ui --save

1.1.2 通过 yarn 安装

yarn add element-ui

1.2 引入 Element-UI

在安装 Element-UI 之后，你需要在项目中引入它。Element-UI 提供了两种引入方式：全局引入和按需引入。

1.2.1 全局引入

全局引入方式会将 Element-UI 的所有组件和样式都引入到项目中，适用于不考虑打包体积的项目。

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

引入后，所有的 Element 组件都可以在模板中直接使用，无需单独引入。

1.2.2 按需引入

按需引入可以有效减少打包体积，只引入需要的组件和对应的样式文件。首先，您需要安装 babel-plugin-component 插件：

npm install babel-plugin-component --save-dev

然后，配置 .babelrc 文件：

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

接下来，在您的项目中按需引入所需的组件和样式：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import 'element-ui/lib/theme-chalk/button.css';
import 'element-ui/lib/theme-chalk/select.css';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

通过这种方式，您只会在打包时引入实际使用到的组件和样式文件。

2. 全局挂载在 Vue 原型上的 API

Element-UI 在引入后，会自动将一些常用的方法挂载到 Vue 的原型上，您可以在任意组件中通过 this 直接调用这些方法，提升开发效率。以下是主要的全局挂载 API：

2.1 this.$message 全局消息提示

$message 是 Element-UI 提供的全局消息提示组件，可以在页面上显示操作反馈信息。其调用方法如下：

this.$message({
  message: '操作成功',
  type: 'success'
});

• 参数：支持传入一个配置对象，可以设置消息内容、类型、显示时间等。
• 类型：success、warning、info、error。

2.2 this.$notify 通知

$notify 提供了全局的通知功能，可以在页面的右上角显示非模态通知。

this.$notify({
  title: '成功',
  message: '这是一条成功的通知消息',
  type: 'success'
});

• 参数：同样支持传入一个配置对象，设置通知标题、内容、类型、显示时间等。
• 类型：success、warning、info、error。

2.3 this.$confirm 确认框

$confirm 提供了全局的确认框功能，适用于用户确认操作的场景。

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  this.$message({
    type: 'success',
    message: '删除成功!'
  });
}).catch(() => {
  this.$message({
    type: 'info',
    message: '已取消删除'
  });
});

• 参数：第一个参数是提示信息，第二个参数是标题，第三个参数是配置对象。
• 返回值：返回一个 Promise，通过 then 和 catch 处理确认和取消操作。

2.4 this.$loading 全局加载

$loading 是全局的加载动画，可以用于显示页面或部分内容加载的状态。

const loadingInstance = this.$loading({
  lock: true,
  text: '加载中',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
});

setTimeout(() => {
  loadingInstance.close();
}, 2000);

• 参数：支持传入一个配置对象，设置加载动画的文本、图标、背景颜色等。
• 方法：loadingInstance.close() 用于关闭加载动画。

2.5 this.$alert 警告框

$alert 提供了全局的警告框功能，通常用于阻止用户进行某些操作并提示相关信息。

this.$alert('这是一段内容', '标题名称', {
  confirmButtonText: '确定',
  callback: action => {
    this.$message({
      type: 'info',
      message: `action: ${action}`
    });
  }
});

• 参数：第一个参数是警告内容，第二个参数是标题，第三个参数是配置对象。
• 回调：callback 方法用于处理确认后的逻辑。

总结

1. 安装与引入：通过 npm 或 yarn 安装 Element-UI，并在项目中选择全局引入或按需引入。
2. 全局挂载 API：Element-UI 提供了一些全局可用的方法，如 $message、$notify、$confirm、$loading 和 $alert，可以通过 this 关键字在 Vue 组件中直接调用，方便实现全局消息提示、确认框、加载动画等功能。