深度解析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 是一套非常好用的前端組件框架，它提供了豐富的組件和主題定製功能，可以滿足不同業務場景下的需求。當然，我們只是簡單地介紹了一些常用組件，在實際業務中，可以根據需求自行去了解和使用。