3.Element-UI學習

3.Element-UI

​ 是什麼？

element-ui是前端出品的基于vue.js的背景元件庫，友善程式員進行快速的布局和建構

​ 官網

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

​ 例子（有很多元件可以使用，這裡列舉按鈕和檔案上傳）

• Button按鈕

• 代碼實作

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

<el-row>
  <el-button plain>樸素按鈕</el-button>
  <el-button type="primary" plain>主要按鈕</el-button>
  <el-button type="success" plain>成功按鈕</el-button>
  <el-button type="info" plain>資訊按鈕</el-button>
  <el-button type="warning" plain>警告按鈕</el-button>
  <el-button type="danger" plain>危險按鈕</el-button>
</el-row>

<el-row>
  <el-button round>圓角按鈕</el-button>
  <el-button type="primary" round>主要按鈕</el-button>
  <el-button type="success" round>成功按鈕</el-button>
  <el-button type="info" round>資訊按鈕</el-button>
  <el-button type="warning" round>警告按鈕</el-button>
  <el-button type="danger" round>危險按鈕</el-button>
</el-row>

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
           

• upload檔案上傳

• 代碼展示

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">點選上傳</el-button>
  <div slot="tip" class="el-upload__tip">隻能上傳jpg/png檔案，且不超過500kb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`目前限制選擇 3 個檔案，本次選擇了 ${files.length} 個檔案，共選擇了 ${files.length + fileList.length} 個檔案`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
  }
</script>