vue全家桶进阶之路45：Vue3 Element Plus el_button组件

在 Vue 3 中，Element Plus 的 ElButton 组件提供了多种按钮类型和属性，可以用于实现不同的交互效果。下面是 ElButton 常用的作用和属性：

作用：

• 用于在页面上添加交互按钮，比如提交按钮、取消按钮等。

常用属性：

• type：按钮类型，可以取值为 primary、success、warning、danger、info 和 text，分别对应不同的颜色和样式。
• size：按钮尺寸，可以取值为 medium、small 和 mini，分别对应不同的尺寸大小。
• disabled：禁用按钮，当设置为 true 时，按钮将无法点击。
• loading：按钮加载状态，当设置为 true 时，按钮将显示加载状态。
• icon：按钮图标，可以使用 Element Plus 提供的图标组件，比如 <i class="el-icon-search"></i>。

示例代码：

<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>
    <el-button type="info">信息按钮</el-button>
    <el-button type="text">文字按钮</el-button>
    <br><br>
    <el-button size="medium">中等尺寸</el-button>
    <el-button size="small">小尺寸</el-button>
    <el-button size="mini">迷你尺寸</el-button>
    <br><br>
    <el-button disabled>禁用按钮</el-button>
    <el-button loading>加载中</el-button>
    <el-button icon="el-icon-search">带图标的按钮</el-button>
  </div>
</template>

<script>
import { ElButton } from 'element-plus';

export default {
  components: {
    ElButton,
  },
};
</script>

上面的代码中，我们使用了 ElButton 组件来创建多个不同类型的按钮，通过设置不同的属性，可以实现不同的样式和交互效果。