App.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <script setup></script>
  2. <template>
  3. <div style="display: flex; flex-direction: column; gap: 2rem">
  4. <div>
  5. <el-date-picker type="date" placeholder="选择日期"> </el-date-picker>
  6. </div>
  7. <el-row>
  8. <el-button>默认按钮</el-button>
  9. <el-button type="primary">主要按钮</el-button>
  10. <el-button type="success">成功按钮</el-button>
  11. <el-button type="info">信息按钮</el-button>
  12. <el-button type="warning">警告按钮</el-button>
  13. <el-button type="danger">危险按钮</el-button>
  14. </el-row>
  15. <el-row>
  16. <el-button plain>朴素按钮</el-button>
  17. <el-button type="primary" plain>主要按钮</el-button>
  18. <el-button type="success" plain>成功按钮</el-button>
  19. <el-button type="info" plain>信息按钮</el-button>
  20. <el-button type="warning" plain>警告按钮</el-button>
  21. <el-button type="danger" plain>危险按钮</el-button>
  22. </el-row>
  23. <el-row>
  24. <el-button round>圆角按钮</el-button>
  25. <el-button type="primary" round>主要按钮</el-button>
  26. <el-button type="success" round>成功按钮</el-button>
  27. <el-button type="info" round>信息按钮</el-button>
  28. <el-button type="warning" round>警告按钮</el-button>
  29. <el-button type="danger" round>危险按钮</el-button>
  30. </el-row>
  31. <el-row>
  32. <el-button icon="el-icon-search" circle></el-button>
  33. <el-button type="primary" icon="el-icon-edit" circle></el-button>
  34. <el-button type="success" icon="el-icon-check" circle></el-button>
  35. <el-button type="info" icon="el-icon-message" circle></el-button>
  36. <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  37. <el-button type="danger" icon="el-icon-delete" circle></el-button>
  38. </el-row>
  39. </div>
  40. </template>
  41. <script>
  42. export default {};
  43. </script>
  44. <style scoped></style>