开始 v2 ¶

<template>
  <div id="view">
    <div>{{msg}}</div>
    <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button plain>Plain</el-button>
      <el-button plain type="primary">Primary</el-button>
      <el-button plain type="success">Success</el-button>
      <el-button plain type="info">Info</el-button>
      <el-button plain type="warning">Warning</el-button>
      <el-button plain type="danger">Danger</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button round>Round</el-button>
      <el-button round type="primary">Primary</el-button>
      <el-button round type="success">Success</el-button>
      <el-button round type="info">Info</el-button>
      <el-button round type="warning">Warning</el-button>
      <el-button round type="danger">Danger</el-button>
    </el-row>

    <el-row>
      <el-button :icon="Search" circle />
      <el-button :icon="Edit" circle type="primary" />
      <el-button :icon="Check" circle type="success" />
      <el-button :icon="Message" circle type="info" />
      <el-button :icon="Star" circle type="warning" />
      <el-button :icon="Delete" circle type="danger" />
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>
<style scoped>
#view {
  width: 300px;
  height: 300px;
  background: #e6a23c;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
#view > div {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  background: #f56c6c;
}
</style>

<template>
  <div id="view">
    <div>{{msg}}</div>
    <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button plain>Plain</el-button>
      <el-button plain type="primary">Primary</el-button>
      <el-button plain type="success">Success</el-button>
      <el-button plain type="info">Info</el-button>
      <el-button plain type="warning">Warning</el-button>
      <el-button plain type="danger">Danger</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button round>Round</el-button>
      <el-button round type="primary">Primary</el-button>
      <el-button round type="success">Success</el-button>
      <el-button round type="info">Info</el-button>
      <el-button round type="warning">Warning</el-button>
      <el-button round type="danger">Danger</el-button>
    </el-row>

    <el-row>
      <el-button :icon="Search" circle />
      <el-button :icon="Edit" circle type="primary" />
      <el-button :icon="Check" circle type="success" />
      <el-button :icon="Message" circle type="info" />
      <el-button :icon="Star" circle type="warning" />
      <el-button :icon="Delete" circle type="danger" />
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>
<style scoped>
#view {
  width: 300px;
  height: 300px;
  background: #e6a23c;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
#view > div {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  background: #f56c6c;
}
</style>