Element Plus 的按钮(<el-button>)是一种常用的 UI 元素,用于触发操作或提交表单。以下是 Element Plus 中关于按钮的基本使用说明:

基本按钮

使用 <el-button> 组件创建一个基本按钮:
<template>
  <el-button>默认按钮</el-button>
</template>

不同类型的按钮

Element Plus 提供了不同类型的按钮,包括主按钮、成功按钮、警告按钮、危险按钮等。你可以使用 type 属性指定按钮的类型:
<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>

圆角按钮

你可以使用 round 属性将按钮变为圆角按钮:
<template>
  <el-button round>圆角按钮</el-button>
</template>

图标按钮

你可以在按钮内添加图标,通过 icon 属性指定图标名称:
<template>
  <el-button icon="el-icon-search">搜索</el-button>
  <el-button type="primary" icon="el-icon-edit">编辑</el-button>
</template>

禁用按钮

你可以通过设置 disabled 属性禁用按钮:
<template>
  <el-button disabled>禁用按钮</el-button>
</template>

加载中按钮

你可以通过设置 loading 属性使按钮进入加载状态:
<template>
  <el-button loading>加载中...</el-button>
</template>

按钮尺寸

通过设置 size 属性,你可以调整按钮的尺寸,包括大、中、小三种尺寸:
<template>
  <div>
    <el-button size="mini">迷你按钮</el-button>
    <el-button>默认按钮</el-button>
    <el-button size="medium">中等按钮</el-button>
    <el-button size="large">大型按钮</el-button>
  </div>
</template>

按钮组

使用 <el-button-group> 可以创建按钮组:
<template>
  <el-button-group>
    <el-button>按钮一</el-button>
    <el-button>按钮二</el-button>
    <el-button>按钮三</el-button>
  </el-button-group>
</template>

以上是 Element Plus 中关于按钮的基本使用示例。你可以根据项目需求,使用按钮的不同配置来满足设计和交互的要求。详细的按钮配置选项可以在 Element Plus 的[官方文档](https://element-plus.org/#/en-US/component/button)中找到。


转载请注明出处:http://www.zyzy.cn/article/detail/5523/ElementPlus