vue使用element-ui建立按钮
时间: 2023-10-12 14:19:28 浏览: 190
vue+element-ui使用
可以使用 Element-UI 中的 `el-button` 组件来创建按钮,具体步骤如下:
1. 安装 Element-UI
```
npm install element-ui --save
```
2. 引入 Element-UI
在 `main.js` 中引入 Element-UI:
```javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
```
3. 在组件中使用 `el-button`
在组件的模板中使用 `el-button` 组件,可以设置按钮的类型、大小、图标等属性,示例代码如下:
```vue
<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>
<el-button type="primary" icon="el-icon-edit">编辑</el-button>
<el-button type="primary" :disabled="true">禁用按钮</el-button>
<el-button type="primary" :loading="true">加载中</el-button>
</div>
</template>
```
以上示例中,`el-button` 组件的 `type` 属性指定了按钮的类型,可以设置为 `primary`(主要按钮)、`success`(成功按钮)、`warning`(警告按钮)、`danger`(危险按钮)、`info`(信息按钮)和 `text`(文本按钮)。`icon` 属性可以设置按钮的图标,`disabled` 属性可以将按钮禁用,`loading` 属性可以让按钮显示加载状态。
阅读全文