Vue コンポーネント ライブラリの推奨事項: Element Plus の詳細な分析

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

<template>
  <div>
    <el-input placeholder="请输入内容"></el-input>
    <el-input-number v-model="value"></el-input-number>
    <el-select v-model="value">
      <el-option label="选项1" value="value1"></el-option>
      <el-option label="选项2" value="value2"></el-option>
      <el-option label="选项3" value="value3"></el-option>
    </el-select>
    <el-cascader :options="options" v-model="selectedOptions"></el-cascader>
    <el-date-picker v-model="selectedDate" type="date"></el-date-picker>
  </div>
</template>

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible">
      <span>这是一段信息</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-drawer :visible.sync="drawerVisible" title="抽屉内容">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="form.age"></el-input-number>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="drawerVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<template>
  <div>
    <el-button @click="showMessage">显示消息</el-button>
    <el-carousel>
      <el-carousel-item><img src="https://staticfile.tujia.com/upload/images/2017/01/03/640%20x%20360.png"/></el-carousel-item>
      <el-carousel-item><img src="https://staticfile.tujia.com/upload/images/2017/01/03/640%20x%20360.png"/></el-carousel-item>
      <el-carousel-item><img src="https://staticfile.tujia.com/upload/images/2017/01/03/640%20x%20360.png"/></el-carousel-item>
    </el-carousel>
    <el-progress :percentage="50"></el-progress>
  </div>
</template>