element用于程序提示框
时间: 2023-08-16 14:08:47 浏览: 56
在 Element UI 中,要创建一个程序提示框(也称为消息框),可以使用 `el-message` 组件。`el-message` 组件可以用于显示成功、错误、警告和信息等类型的消息。
以下是一个基本的示例:
```html
<el-button @click="showMessage('success')">成功</el-button>
<el-button @click="showMessage('warning')">警告</el-button>
<el-button @click="showMessage('error')">错误</el-button>
<el-button @click="showMessage('info')">信息</el-button>
```
```javascript
methods: {
showMessage(type) {
this.$message({
message: '这是一条消息',
type: type
});
}
}
```
这将创建四个按钮,分别用于显示不同类型的消息。当单击按钮时,将调用 `showMessage` 方法,并显示相应类型的消息。
您可以使用 `message` 属性来设置消息的内容,使用 `type` 属性来设置消息的类型。`type` 属性可以设置为 `'success'`、`'warning'`、`'error'` 或 `'info'` 中的任何一个。
您还可以使用 `duration` 属性来设置消息的显示时间(以毫秒为单位),默认值为3000毫秒。
```javascript
this.$message({
message: '这是一条消息',
type: 'success',
duration: 5000
});
```
您还可以使用 `showClose` 属性来显示关闭按钮,以允许用户手动关闭消息。
```javascript
this.$message({
message: '这是一条可关闭的消息',
type: 'info',
showClose: true
});
```
这将显示一个带有关闭按钮的消息框,用户可以单击按钮手动关闭消息。
最后,如果您需要在全局范围内使用消息框,则可以使用 `Vue.prototype.$message` 将 `$message` 方法绑定到 Vue 实例上。
```javascript
import Vue from 'vue';
import { Message } from 'element-ui';
Vue.prototype.$message = Message;
```
这将允许您在任何组件中使用 `this.$message` 来显示消息框。