el-button 的绑定属性
时间: 2024-08-29 20:01:23 浏览: 58
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
5星 · 资源好评率100%
`el-button` 组件在 Element UI 中主要用于创建各种样式的按钮。它有几个常用的绑定属性,用于控制其外观、行为以及响应事件。以下是几个主要的绑定属性:
1. **type**:这是最基本的属性,用于指定按钮的基本样式,如 `default`(默认)、`primary`(主要)、`success`(成功)、`warning`(警告)和 `danger`(危险)等。
```html
<el-button type="primary">主要按钮</el-button>
```
2. **plain**:如果设为 `true`,则表示按钮为纯文本形式,不会有背景色和边框,只保留文字内容。
```html
<el-button plain>纯文本按钮</el-button>
```
3. **size**:用于设置按钮的尺寸,可以是 `small`(小)、`medium`(中)、`large`(大),默认是 `medium`。
```html
<el-button size="large">大号按钮</el-button>
```
4. **圆角 (`round`)** 和 **方形 (`square`)**: 可以设定按钮的形状,分别设置为 `true` 或 `false`。
```html
<el-button round>圆角按钮</el-button>
```
5. **@click** 或 **v-on:click**: 当按钮被点击时触发的事件处理程序,可以绑定一个函数,例如:
```html
<el-button @click="handleButtonClick">点击我</el-button>
```
6. **disabled**: 如果设为 `true`,则按钮禁用,用户无法交互。
```html
<el-button disabled>不可点击</el-button>
```
7. **loading**: 如果设为 `true`,会在按钮上显示加载状态。
8. **icon** 和 **slot**: 分别用于设置图标和自定义内容的位置。
以上是部分常用属性,具体可查阅官方文档了解更多详情。
阅读全文