element的MessageBox
时间: 2023-12-02 12:04:32 浏览: 35
element的MessageBox是element-ui中的一个组件,用于展示弹窗消息框。可以通过在项目中按需引入组件来使用该组件。具体步骤如下:
1. 在项目的element.js文件中按需引入MessageBox组件,可以使用以下代码:
```javascript
import { MessageBox } from 'element-ui'
```
2. 在main.js文件中将$confirm方法注册为全局可用的,可以使用以下代码:
```javascript
import Vue from 'vue'
import { MessageBox } from 'element-ui'
Vue.prototype.$confirm = MessageBox.confirm
```
3. 在页面中使用MessageBox的$confirm方法来展示弹窗消息框。例如,可以使用以下代码展示一个删除用户的确认框:
```javascript
async showDeleteUserDialog(userId) {
const confirmRes = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => err)
if ('cancel' === confirmRes) {
return this.$message.info('已经取消了删除')
}
if ('confirm' === confirmRes) {
// 执行删除用户的逻辑
}
}
```
在该代码示例中,通过使用this.$confirm方法展示一个具有确认和取消按钮的消息框,当用户点击确认按钮时,执行删除用户的逻辑;当用户点击取消按钮时,显示一个提示消息。