messageBox的入门学习

知识点

this.$alert用于弹出消息
this.$confirm用于确认消息，显示取消按钮
this.$prompt用于提交消息，单个数据的提交使用它，复杂的数据提交使用dialog
this.$msgbox用于自定义消息弹框
title设置弹框标题
message设置弹框内容
showConfirmButton默认为true，默认显示提交按钮
showCancelButton默认为false，默认不显示取消按钮
confirmButtonText设置提交按钮文字，默认为提交
cancelButtonText设置取消按钮文字，默认为取消
type设置弹框图标的类型，可设置为success,error,warning,info
showClose控制显示右上方的关闭图标按钮
distinguishCancelAndClose设置为true，区分关闭和取消按钮的action，分别为close和cancel,设置为false,都为cancel
inputPattern为输入框的正则表达式校验
inputErrorMessage为错误格式的提示信息
beforeClose的三个参数action,instance,done，instance为触发按钮的实例，done方法为关闭弹框的钩子，instance.confirmButtonLoading=true,确认按钮变成加载状态,false则恢复正常
action为confirm，进入then，action为close/cancel，进入catch

效果图

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head><body><div id='app'><el-button @click='handleAlert'>alert按钮</el-button><el-button @click='handleConfirm'>confirm按钮</el-button><el-button @click='handlePrompt'>prompt按钮</el-button><el-button @click='handleMsgBox'>msgBox按钮</el-button></div>
</body></html><script>new Vue({el: "#app",data() {return {}},methods: {handleAlert() {this.$alert('<i>消息内容</i>', '消息弹框', {dangerouslyUseHTMLString: true,confirmButtonText: '收到',type: 'info',callback: action => {this.$message({type: 'info',message: '完毕'})}})},handleConfirm() {this.$confirm('确认消息', '确认弹框', {confirmButtonText: '嗯!',cancelButtonText: 'No!',type: 'warning',distinguishCancelAndClose: true,}).then(() => {this.$message({type: 'success',message: 'Yes'})}).catch((action) => {this.$message({type: 'info',message: action === 'cancel' ? 'cancel' : 'close'})})},handlePrompt() {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: '取消'})})},handleMsgBox() {this.$msgbox({title: '自定义消息弹框',message: '自定义消息',confirmButtonText: '自定义确认',cancelButtonText: '自定义取消',showCancelButton: true,distinguishCancelAndClose: true,beforeClose: ((action, instance, done) => {if (action === 'confirm') {instance.confirmButtonLoading = trueinstance.confirmButtonText = '加载中'setTimeout(() => {instance.confirmButtonLoading = falsedone()}, 1000)} else {done()}})}).then(action => {this.$message({type: 'success',message: 'success'})}).catch(action => {this.$message({type: 'info',message: action === 'cancel' ? 'cancel' : 'close'})})}}})
</script>

官网

messageBox的学习官网

messageBox的入门学习相关推荐

Qt 快速入门学习笔记
Qt 快速入门学习笔记环境安装环境配置以及安装安装包下载地址 1.windows安装 msvc编译器模块需要安装Windows软件开发工具包. MinGW是Windows平台使用GNU工具导入库 ...
python速成要多久2019-8-28_2019最全Python入门学习路线，不是我吹，绝对是最全
近几年Python的受欢迎程度可谓是扶摇直上,当然了学习的人也是愈来愈多.一些学习Python的小白在学习初期,总希望能够得到一份Python学习路线图,小编经过多方汇总为大家汇总了一份Python学 ...
MAYA 2022基础入门学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,48.0 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.41 GB |时长:4.5小时包含 ...
3dmax Vray建筑可视化入门学习教程
面向初学者的3Ds Max Vray最佳Archviz可视化课程从安装到最终图像的一切都将从头开始教授,不需要任何经验大小解压后:3.25G 时长4h 6m 1280X720 MP4 语言:英语+ ...
Blender 3.0基础入门学习教程 Introduction to Blender 3.0
成为Blender通才,通过这个基于项目的循序渐进课程学习所有主题的基础知识. 你会学到什么教程获取:Blender 3.0基础入门学习教程 Introduction to Blender 3.0- ...
Maya游戏角色绑定入门学习教程 Game Character Rigging for Beginners in Maya
准备好开始为游戏制作自己的角色动画了吗? 你会学到什么了解Maya的界面优化并准备好你的模型,为游戏做准备了解关节以及如何使用它们来构建健壮的角色骨骼,以便在任何游戏引擎中制作动画了解IK和F ...
三维地形制作软件 World Machine 基础入门学习教程
<World Machine课程>涵盖了你需要的一切,让你有一个坚实的基础来构建自己的高质量的电影或视频游戏地形. 你会学到什么为渲染或游戏开发创建高分辨率.高细节的地形. 基于Worl ...
Blender3.0动画制作入门学习教程 Learn Animation with Blender (2021)
要求下载并安装Blender.免费下载和免费用于任何目的. 描述加入我的动画课程. 在本课程中,我将从头开始讲述在Blender中创建动画场景的过程. 从第一步到最终渲染.在这个课程中,我们将使用 ...
UE5真实环境设计入门学习教程
大小解压后:4.69G 时长4h 30m 1280X720 MP4 语言:英语+中英文字幕(根据原英文字幕机译更准确) 虚幻引擎5–面向初学者的真实环境设计 Unreal Engine 5 – Rea ...

messageBox的入门学习

messageBox的入门学习

知识点

效果图

代码

官网

messageBox的入门学习相关推荐

最新文章

热门文章