深度解析Element-ui前端框架

一、组件库

Element-ui 是一套基于 Vue.js 2.0 的 PC 端组件库，它通过npm 安装，提供了非常丰富的组件和样式， 它的文档网站也非常详尽，不仅仅只包含 API 文档，还有示例和演示视频等方便用户快速学习。

首先我们需要安装 Element-ui 的依赖，可以在 package.json 中查看配置：

{
  "dependencies": {
    "vue": "^2.5.21",
    "element-ui": "^2.4.5"
  }
}

在使用组件之前，需要在Vue中注册Element：

import Vue from 'vue';
import Element from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Element);

这里通过 import 引入 Element-ui 的样式文件。在Vue.use()方法中，将注册的内容传入即可。

二、常用组件

Element-ui 拥有非常丰富的组件，这里列举一些常用组件的使用方法。

1.按钮组件

按钮是页面中使用最为频繁的元素之一，使用 Element-ui 中的 Button 按钮组件可以快速地创建页面中不同样式的按钮。

<template>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</template>

2.表单组件

为了方便页面中的表单开发，Element-ui 提供了各种类型的表单组件，如输入框、选择框、时间选择器等等。

<template>
  <el-form :model="form" :rules="rules">
    <el-form-item label="名称" prop="name">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="类型" prop="type">
      <el-select v-model="form.type" placeholder="请选择">
        <el-option label="选项1" value="1"></el-option>
        <el-option label="选项2" value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="日期" prop="date">
      <el-date-picker
          type="date"
          placeholder="请选择日期"
          v-model="form.date">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">>立即创建</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        type: '',
        date: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

3.对话框组件

对话框在页面中的使用较为普遍，Element-ui 提供了 Dialog 对话框组件，可以快速地创建一个对话框，并且可以自定义对话框的标题、内容、按钮等。

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">点击弹出对话框</el-button>
    <el-dialog
      title="对话框的标题"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <p>欢迎使用 Element-ui 对话框组件！</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确定要关闭此窗口？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        done();
      }).catch(() => {});
    }
  }
};
</script>

三、主题定制

除了提供丰富的组件外，Element-ui 还提供了主题定制功能，可以让用户根据业务需求自定义主题样式。

首先需要安装依赖，安装完成后需要在项目的目录下创建 src/styles/element-variables.scss，用来定义主题样式。

npm i element-theme -D

然后在 element-variables.scss 中定义样式：

$--color-primary: #409EFF;
$--color-success: #67C23A;
$--border-radius-base: 4px;

@import "~element-ui/packages/theme-chalk/src/index";

最后在 package.json 文件中配置主题命令，以将 Element-ui 编译为自定义主题：

{
  "scripts": {
    "element-theme": "et -i src/styles/element-variables.scss -o src/styles/element-ui"
  }
}

运行命令即可编译主题：npm run element-theme

四、总结

Element-ui 是一套非常好用的前端组件框架，它提供了丰富的组件和主题定制功能，可以满足不同业务场景下的需求。当然，我们只是简单地介绍了一些常用组件，在实际业务中，可以根据需求自行去了解和使用。