Vue入門到關門之第三方框架elementui

Xiao0101發表於2024-05-02
Vue框架UI

1、什麼是ElementUI？

Element UI 是一個基於 Vue.js 的元件庫，它提供了豐富的 UI 元件和一套完整的解決方案，用於快速構建現代化的 Web 應用程式。Element UI 的目標是幫助開發者快速構建出美觀、易用的介面，並提供了豐富的元件，包括但不限於按鈕、表單、表格、對話方塊、選單、導航、佈局等等。

Element UI 的特點包括：

  1. 豐富的元件: Element UI 提供了大量的常用 UI 元件，開發者可以透過簡單的引入和配置，快速構建出符合現代介面設計的 Web 應用。

  2. 易用性: 元件設計符合使用者習慣，提供了豐富的互動細節和動畫效果，使得開發者可以輕鬆地構建出使用者友好的介面。

  3. 響應式設計: Element UI 的元件支援響應式設計，能夠適應不同尺寸的螢幕，從而提供良好的移動端和桌面端使用者體驗。

  4. 主題定製: Element UI 提供了靈活的主題定製功能，開發者可以根據自己的需求定製元件的外觀和風格。

總的來說，Element UI 是一個功能豐富、易用且靈活的 Vue.js 元件庫，為開發者提供了豐富的工具和元件，幫助他們快速構建出現代化的 Web 應用程式。

2、Element UI的官方網站

Element，一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端元件庫

  • https://element.eleme.cn/#/zh-CN

3、Element UI的使用

（1）安裝

在Vue專案中使用ElementUI，需要進行以下配置步驟：

  • 在專案中安裝

    cnpm install element-ui -S

（2）專案中配置

在main.js配置：

  • 匯入ElementUI物件：
    • 使用import ElementUI from 'element-ui'將ElementUI物件引入。
  • 引入ElementUI樣式：
    • 使用import 'element-ui/lib/theme-chalk/index.css'引入ElementUI的樣式。
// 匯入ElementUI物件
import ElementUI from 'element-ui';       
// 引入ElementUI樣式
import 'element-ui/lib/theme-chalk/index.css';

  • 註冊ElementUI元件：

    • 在main.js檔案中，透過Vue.use(ElementUI)全域性註冊ElementUI元件，並使其可在所有的Vue元件中使用。
    Vue.use(ElementUI)

這樣配置完成後，就可以在專案中直接使用ElementUI提供的元件和樣式了。如果在其他元件中看到了喜歡的ElementUI的樣式效果，可以直接複製相關的HTML、CSS和JavaScript程式碼來使用。

（3）使用

示例：

<template>
  <div class="Element">
    <h1>柵格</h1>
    <el-row :gutter="20">
      <el-col :span="16"><div class="left"></div></el-col>
      <el-col :span="8"><div class="right"></div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6"><div class="center"></div></el-col>
    </el-row>

    <h2>佈局容器</h2>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>

    <h1>小圖示</h1>
    <span class="el-icon-video-camera">開啟攝像機</span>

    <h1>按鈕</h1>
    <el-row>
      <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" plain>警告按鈕</el-button>
      <el-button type="danger" round>危險按鈕</el-button>
    </el-row>

    <h1>連結文字</h1>
    <div>
      <el-link href="https://element.eleme.io" target="_blank">預設連結</el-link>
      <br>
      <el-link type="primary">主要連結</el-link>
      <el-link type="success">成功連結</el-link>
      <el-link type="warning">警告連結</el-link>
      <el-link type="danger">危險連結</el-link>
      <el-link type="info">資訊連結</el-link>
    </div>


    <h1>單選</h1>
    <div>
      <el-radio-group v-model="radio1">
        <el-radio-button :label="item" v-for="item in citys" border="false"></el-radio-button>
      </el-radio-group>
    </div>

    <h1>多選</h1>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全選</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
    </el-checkbox-group>

    <h1>input框</h1>
    <div class="demo-input-suffix">
      屬性方式：
      <el-input
          placeholder="請選擇日期"
          suffix-icon="el-icon-date">
      </el-input>
      <el-input
          placeholder="請輸入內容"
          prefix-icon="el-icon-search">
      </el-input>
    </div>
    <div class="demo-input-suffix">
      slot 方式：
      <el-input
          placeholder="請選擇日期">
        <i slot="suffix" class="el-input__icon el-icon-date"></i>
      </el-input>
      <el-input
          placeholder="請輸入內容">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>

    <h1>表格</h1>
    <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
    </el-table>

    <h1>message提示</h1>
    <el-button :plain="true" @click="open4">錯誤</el-button>
    <h1>警告</h1>
    <el-button :plain="true" @click="open">錯誤</el-button>


  </div>
</template>
<script>
const cityOptions = ['上海', '北京', '廣州', '深圳'];
export default {
  name: 'Element',
  data(){
    return {
      // citys:['上海','北京','天劍'],
      // radio1:'上海',

      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄',
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄',
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }]
    }
  },
  methods:{
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    open4(){
      this.$message({
        message: '恭喜你，這是一條成功訊息',
        type: 'success'
      });
    },
    open() {
      this.$confirm('此操作將永久刪除該檔案, 是否繼續?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '刪除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消刪除'
        });
      });
    }
  }

}
</script>

<style scoped>
.left{
  background-color: aqua;
  height: 200px;
}
.right{
  background-color: pink;
  height: 200px;
}
.center{
  background-color: green;
  height: 200px;
}

.el-header{
  height: 50px;
  background-color: rebeccapurple;
}
.el-aside{
  height: 700px;
  background-color: aquamarine;
}
.el-main{
  height: 500px;
  background-color: #67C23A;
}
.el-footer{
  height: 200px;
  background-color: blue;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

4、總結

(1) 安裝：cnpm i element-ui -S
(2) 整合到專案：main.js 中加入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); // 使用外掛
(3) 去官網，找樣式，複製，貼上

相關文章