Element-Ui组件 MessageBox 弹框
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Element-Ui组件 MessageBox 弹框相关的知识，希望对你有一定的参考价值。
参考技术A 官方文档 http://element-cn.eleme.io/#/zh-CN/component/message-box基础用法
消息提示弹框
```
点击打开 Message Boxexportdefault methods: open() this.$alert('这是一段内容','标题名称', confirmButtonText:'确定', callback: action => this.$message( type:'info', message: `action: $ action ` ); );
点击打开 Message Boxexportdefault methods: open() this.$alert('这是一段内容','标题名称', confirmButtonText:'确定', callback: action => this.$message( type:'info', message: `action: $ action ` ); ); 点击打开 Message Boxexportdefault methods: open() this.$alert('这是一段内容','标题名称', confirmButtonText:'确定', callback: action => this.$message( type:'info', message: `action: $ action ` ); ); <template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
<script>
export default
methods:
open()
this.$alert('这是一段内容', '标题名称',
confirmButtonText: '确定',
callback: action =>
this.$message(
type: 'info',
message: `action: $ action `
);
);
</script>
```
确认消息弹框
```
点击打开 Message Boxexportdefaultmethods: open2() this.$confirm('此操作将永久删除该文件, 是否继续?','提示', confirmButtonText:'确定',cancelButtonText:'取消',type:'warning').then(() => this.$message( type:'success', message:'删除成功!'); ).catch(() => this.$message( type:'info', message:'已取消删除'); );
<template>
<el-button type="text" @click="open2">点击打开 Message Box</el-button>
</template>
<script>
export default
methods:
open2()
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示',
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
).then(() =>
this.$message(
type: 'success',
message: '删除成功!'
);
).catch(() =>
this.$message(
type: 'info',
message: '已取消删除'
);
);
</script>
```
提交内容弹框
```
点击打开 Message Boxexportdefaultmethods: open3() this.$prompt('请输入邮箱','提示', confirmButtonText:'确定',cancelButtonText:'取消',inputPattern:/[\w!#$%&'*+/=?^_`|~-]+(?:\.[\w!#$%&'*+/=?^_`|~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:'邮箱格式不正确').then(( value ) => this.$message( type:'success', message:'你的邮箱是: '+ value ); ).catch(() => this.$message( type:'info', message:'取消输入'); );
<template>
<el-button type="text" @click="open3">点击打开 Message Box</el-button>
</template>
<script>
export default
methods:
open3()
this.$prompt('请输入邮箱', '提示',
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /[\w!#$%&'*+/=?^_`|~-]+(?:\.[\w!#$%&'*+/=?^_`|~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: '邮箱格式不正确'
).then(( value ) =>
this.$message(
type: 'success',
message: '你的邮箱是: ' + value
);
).catch(() =>
this.$message(
type: 'info',
message: '取消输入'
);
);
</script>
```
自定义弹框
```
点击打开 Message Boxexportdefaultmethods: open4() consth =this.$createElement;this.$msgbox(title:'消息',message: h('p',null, [ h('span',null,'内容可以是 '), h('i', style:'color: teal','VNode') ]),showCancelButton:true,confirmButtonText:'确定',cancelButtonText:'取消',beforeClose:(action, instance, done)=>if(action ==='confirm') instance.confirmButtonLoading =true; instance.confirmButtonText ='执行中...'; setTimeout(() => done(); setTimeout(() => instance.confirmButtonLoading =false; ,300); ,3000); elsedone(); ).then(action => this.$message( type:'info', message:'action: '+ action ); );
<template>
<el-button type="text" @click="open4">点击打开 Message Box</el-button>
</template>
<script>
export default
methods:
open4()
const h = this.$createElement;
this.$msgbox(
title: '消息',
message: h('p', null, [
h('span', null, '内容可以是 '),
h('i', style: 'color: teal' , 'VNode')
]),
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
beforeClose: (action, instance, done) =>
if (action === 'confirm')
instance.confirmButtonLoading = true;
instance.confirmButtonText = '执行中...';
setTimeout(() =>
done();
setTimeout(() =>
instance.confirmButtonLoading = false;
, 300);
, 3000);
else
done();
).then(action =>
this.$message(
type: 'info',
message: 'action: ' + action
);
);
</script>
```
options：
参数类型说明可选值默认值
titleMessageBox 标题string——
messageMessageBox 消息正文内容string / VNode——
dangerouslyUsehtmlString是否将 message 属性作为 HTML 片段处理boolean—false
type消息类型，用于显示图标stringsuccess / info / warning / error—
customClassMessageBox 的自定义类名string——
callback若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调function(action, instance)，action 的值为’confirm’或’cancel’, instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法——
showCloseMessageBox 是否显示右上角关闭按钮boolean—true
beforeCloseMessageBox 关闭前的回调，会暂停实例的关闭function(action, instance, done)，action 的值为’confirm’或’cancel’；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例——
lockScroll是否在 MessageBox 出现时将 body 滚动锁定boolean—true
showCancelButton是否显示取消按钮boolean—false（以 confirm 和 prompt 方式调用时为 true）
showConfirmButton是否显示确定按钮boolean—true
cancelButtonText取消按钮的文本内容string—取消
confirmButtonText确定按钮的文本内容string—确定
cancelButtonClass取消按钮的自定义类名string——
confirmButtonClass确定按钮的自定义类名string——
closeOnClickModal是否可通过点击遮罩关闭 MessageBoxboolean—true（以 alert 方式调用时为 false）
closeOnPressEscape是否可通过按下 ESC 键关闭 MessageBoxboolean—true（以 alert 方式调用时为 false）
closeOnHashChange是否在 hashchange 时关闭 MessageBoxboolean—true
showInput是否显示输入框boolean—false（以 prompt 方式调用时为 true）
inputPlaceholder输入框的占位符string——
inputType输入框的类型string—text
inputValue输入框的初始文本string——
inputPattern输入框的校验表达式regexp——
inputValidator输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessagefunction——
inputErrorMessage校验未通过时的提示文本string—输入的数据不合法!
center是否居中布局boolean—false
roundButton是否使用圆角按钮boolean—false
以上是关于Element-Ui组件 MessageBox 弹框的主要内容，如果未能解决你的问题，请参考以下文章
element-ui MessageBox 弹框，我只想要弹出样式，不想要点击，当做一个弹出提醒，两秒后自动关闭
element-ui MessageBox 弹框，我只想要弹出样式，不想要点击，当做一个弹出提醒，两秒后自动关闭
this.$confirm 不能使用为：undefined，MessageBox 解决全局注册导致打开页面会自动弹出的情况