基本按钮
使用 <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