MessageBox 弹框

模拟系统的消息提示框而实现的一套模态对话框组件,用于消息提示、确认消息和提交内容。

 从场景上说,MessageBox 的作用是美化系统自带的 alertconfirm 和 prompt,因此适合展示较为简单的内容。如果需要弹出较为复杂的内容,请使用 Dialog。

消息提示

当用户进行操作时会被触发,该对话框中断用户操作,直到用户确认知晓后才可关闭。

调用$alert方法即可打开消息提示,它模拟了系统的 alert,无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数,messagetitle。值得一提的是,窗口被关闭后,它默认会返回一个Promise对象便于进行后续操作的处理。若不确定浏览器是否支持Promise,可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。

 1 <template>
 2   <el-button type="text" @click="open">点击打开 Message Box</el-button>
 3 </template>
 4 
 5 <script>
 6   export default {
 7     methods: {
 8       open() {
 9         this.$alert('这是一段内容', '标题名称', {
10           confirmButtonText: '确定',
11           callback: action => {
12             this.$message({
13               type: 'info',
14               message: `action: ${ action }`
15             });
16           }
17         });
18       }
19     }
20   }
21 </script>
View Code

 

确认消息

提示用户确认其已经触发的动作,并询问是否进行此操作时会用到此对话框。

调用$confirm方法即可打开消息提示,它模拟了系统的 confirm。Message Box 组件也拥有极高的定制性,我们可以传入options作为第三个参数,它是一个字面量对象。type字段表明消息类型,可以为successerrorinfowarning,无效的设置将会被忽略。注意,第二个参数title必须定义为String类型,如果是Object,会被理解为options。在这里我们用了 Promise 来处理后续响应。

 1 <template>
 2   <el-button type="text" @click="open2">点击打开 Message Box</el-button>
 3 </template>
 4 
 5 <script>
 6   export default {
 7     methods: {
 8       open2() {
 9         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
10           confirmButtonText: '确定',
11           cancelButtonText: '取消',
12           type: 'warning'
13         }).then(() => {
14           this.$message({
15             type: 'success',
16             message: '删除成功!'
17           });
18         }).catch(() => {
19           this.$message({
20             type: 'info',
21             message: '已取消删除'
22           });          
23         });
24       }
25     }
26   }
27 </script>
View Code

 

提交内容

当用户进行操作时会被触发,中断用户操作,提示用户进行输入的对话框。

调用$prompt方法即可打开消息提示,它模拟了系统的 prompt。可以用inputPattern字段自己规定匹配模式,或者用inputValidator规定校验函数,可以返回BooleanString,返回false或字符串时均表示校验未通过,同时返回的字符串相当于定义了inputErrorMessage字段。此外,可以用inputPlaceholder字段来定义输入框的占位符。

 1 <template>
 2   <el-button type="text" @click="open3">点击打开 Message Box</el-button>
 3 </template>
 4 
 5 <script>
 6   export default {
 7     methods: {
 8       open3() {
 9         this.$prompt('请输入邮箱', '提示', {
10           confirmButtonText: '确定',
11           cancelButtonText: '取消',
12           inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
13           inputErrorMessage: '邮箱格式不正确'
14         }).then(({ value }) => {
15           this.$message({
16             type: 'success',
17             message: '你的邮箱是: ' + value
18           });
19         }).catch(() => {
20           this.$message({
21             type: 'info',
22             message: '取消输入'
23           });       
24         });
25       }
26     }
27   }
28 </script>
View Code

 

自定义

可自定义配置不同内容。

以上三个方法都是对$msgbox方法的再包装。本例直接调用$msgbox方法,使用了showCancelButton字段,用于显示取消按钮。另外可使用cancelButtonClass为其添加自定义样式,使用cancelButtonText来自定义按钮文本(Confirm 按钮也具有相同的字段,在文末的字段说明中有完整的字段列表)。此例还使用了beforeClose属性,它的值是一个方法,会在 MessageBox 的实例关闭前被调用,同时暂停实例的关闭。它有三个参数:action、实例本身和done方法。使用它能够在关闭前对实例进行一些操作,比如为确定按钮添加loading状态等;此时若需要关闭实例,可以调用done方法(若在beforeClose中没有调用done,则实例不会关闭)。

 1 <template>
 2   <el-button type="text" @click="open4">点击打开 Message Box</el-button>
 3 </template>
 4 
 5 <script>
 6   export default {
 7     methods: {
 8       open4() {
 9         const h = this.$createElement;
10         this.$msgbox({
11           title: '消息',
12           message: h('p', null, [
13             h('span', null, '内容可以是 '),
14             h('i', { style: 'color: teal' }, 'VNode')
15           ]),
16           showCancelButton: true,
17           confirmButtonText: '确定',
18           cancelButtonText: '取消',
19           beforeClose: (action, instance, done) => {
20             if (action === 'confirm') {
21               instance.confirmButtonLoading = true;
22               instance.confirmButtonText = '执行中...';
23               setTimeout(() => {
24                 done();
25                 setTimeout(() => {
26                   instance.confirmButtonLoading = false;
27                 }, 300);
28               }, 3000);
29             } else {
30               done();
31             }
32           }
33         }).then(action => {
34           this.$message({
35             type: 'info',
36             message: 'action: ' + action
37           });
38         });
39       }
40     }
41   }
42 </script>
View Code

 

使用 HTML 片段

message 属性支持传入 HTML 片段

dangerouslyUseHTMLString属性设置为 true,message 就会被当作 HTML 片段处理。

 1 <template>
 2   <el-button type="text" @click="open5">点击打开 Message Box</el-button>
 3 </template>
 4 
 5 <script>
 6   export default {
 7     methods: {
 8       open5() {
 9         this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
10           dangerouslyUseHTMLString: true
11         });
12       }
13     }
14   }
15 </script>
View Code

 

message 属性虽然支持传入 HTML 片段,但是在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。因此在 dangerouslyUseHTMLString 打开的情况下,请确保 message 的内容是可信的,永远不要将用户提交的内容赋值给 message属性。

 

居中布局

内容支持居中布局

将 center 设置为 true 即可开启居中布局

 1 <template>
 2   <el-button type="text" @click="open6">点击打开 Message Box</el-button>
 3 </template>
 4 
 5 <script>
 6   export default {
 7     methods: {
 8       open6() {
 9         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
10           confirmButtonText: '确定',
11           cancelButtonText: '取消',
12           type: 'warning',
13           center: true
14         }).then(() => {
15           this.$message({
16             type: 'success',
17             message: '删除成功!'
18           });
19         }).catch(() => {
20           this.$message({
21             type: 'info',
22             message: '已取消删除'
23           });
24         });
25       }
26     }
27   }
28 </script>
View Code

 

全局方法

如果你完整引入了 Element,它会为 Vue.prototype 添加如下全局方法:$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 MessageBox。调用参数为:

  • $msgbox(options)
  • $alert(message, title, options) 或 $alert(message, options)
  • $confirm(message, title, options) 或 $confirm(message, options)
  • $prompt(message, title, options) 或 $prompt(message, options)

 

单独引用

如果单独引入 MessageBox

import { MessageBox } from 'element-ui';

那么对应于上述四个全局方法的调用方法依次为:MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt,调用参数与全局方法相同。

 

Options

参数说明类型可选值默认值
titleMessageBox 标题string
messageMessageBox 消息正文内容string / VNode
dangerouslyUseHTMLString是否将 message 属性作为 HTML 片段处理booleanfalse
type消息类型,用于显示图标stringsuccess / info / warning / error
customClassMessageBox 的自定义类名string
callback若不使用 Promise,可以使用此参数指定 MessageBox 关闭后的回调function(action, instance),action 的值为'confirm'或'cancel', instance 为 MessageBox 实例,可以通过它访问实例上的属性和方法
showCloseMessageBox 是否显示右上角关闭按钮booleantrue
beforeCloseMessageBox 关闭前的回调,会暂停实例的关闭function(action, instance, done),action 的值为'confirm'或'cancel';instance 为 MessageBox 实例,可以通过它访问实例上的属性和方法;done 用于关闭 MessageBox 实例
lockScroll是否在 MessageBox 出现时将 body 滚动锁定booleantrue
showCancelButton是否显示取消按钮booleanfalse(以 confirm 和 prompt 方式调用时为 true)
showConfirmButton是否显示确定按钮booleantrue
cancelButtonText取消按钮的文本内容string取消
confirmButtonText确定按钮的文本内容string确定
cancelButtonClass取消按钮的自定义类名string
confirmButtonClass确定按钮的自定义类名string
closeOnClickModal是否可通过点击遮罩关闭 MessageBoxbooleantrue(以 alert 方式调用时为 false)
closeOnPressEscape是否可通过按下 ESC 键关闭 MessageBoxbooleantrue(以 alert 方式调用时为 false)
closeOnHashChange是否在 hashchange 时关闭 MessageBoxbooleantrue
showInput是否显示输入框booleanfalse(以 prompt 方式调用时为 true)
inputPlaceholder输入框的占位符string
inputType输入框的类型stringtext
inputValue输入框的初始文本string
inputPattern输入框的校验表达式regexp
inputValidator输入框的校验函数。可以返回布尔值或字符串,若返回一个字符串, 则返回结果会被赋值给 inputErrorMessagefunction
inputErrorMessage校验未通过时的提示文本string输入的数据不合法!
center是否居中布局booleanfalse
roundButton是否使用圆角按钮booleanfalse

 

转载于:https://www.cnblogs.com/grt322/p/8564437.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/453268.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是同轴电缆

同轴电缆从用途上分可分为基带同轴电缆和宽带同轴电缆&#xff08;即网络同轴电缆和视频同轴电缆&#xff09;。同轴电缆分50Ω 基带电缆和75Ω宽带电缆两类。基带电缆又分细同轴电缆和粗同轴电缆。基带电缆仅仅用于数字传输&#xff0c;数据率可达10Mbps。同轴电缆(Coaxial Ca…

android textview表情,Android开发(16)-TextView显示表情图像和文字

从这个案例中我们可以学到当我们美化图片美化界面的时候可以在某一区域输入图片和文字混搭信息,第三张图片按比例缩小&#xff0c;第四张图像有超链接布局文件MainActivity.javapackage com.example.textview3;import java.lang.reflect.Field;import android.os.Bundle;import…

linux的apache2.4限定某个目录禁止解析PHP及user_agent与PHP相关配置

限定某个目录禁止解析PHP 对于使用PHP语言编写的网站&#xff0c;有一些目录是有需求上传文件的&#xff0c;比如服务器可以上传图片&#xff0c;并且没有做防盗链&#xff0c;所以就会被人家当成了一个图片存储服务器&#xff0c;并且盗用带宽流量。如果网站代码有漏洞&#x…

什么是光缆

光缆(optical fiber cable)是为了满足光学、机械或环境的性能规范而制造的&#xff0c;它是利用置于包复护套中的一根或多根光纤作为传输媒质并可以单独或成组使用的通信线缆组件。光缆主要是由光导纤维&#xff08;细如头发的玻璃丝&#xff09;和塑料保护套管及塑料外皮构成&…

js调用android播放器,js调用android本地方法

8种机械键盘轴体对比本人程序员&#xff0c;要买一个写代码的键盘&#xff0c;请问红轴和茶轴怎么选&#xff1f;昨天自己录了一个android本地调用h5中js方法&#xff0c;可能是因为视频比较耗费流量&#xff0c;结果看的人不是很多&#xff0c;所以决定还是先写文章&#xff0…

doxygen相关问题

doxygen相关问题 我主要的设置有 现在 wizard对话框中大体设置下,然后 export设置: project->DOXYFILE_ENCODINGGBK project->OUTPUT_LANGUAGEchinese input->INPUT_ENCODINGGBK Dot->HAVE_DOT Dot-> UML_LOOK Dot->CALL_GRAPH Dot->CALLER_GRAPH http…

前端之JavaScript 02

一、函数 // 最基础的函数定义 function f1() {console.log(hello world!); } f1(); // hello world!// 带参数的函数 function f2(name,age) {console.log("姓名 : " name " 年龄&#xff1a;" age); } f2("jassin",18); // 姓名 : jassi…

什么是双绞线

双绞线&#xff08;twisted pair&#xff0c;TP&#xff09;是一种综合布线工程中最常用的传输介质&#xff0c;是由两根具有绝缘保护层的铜导线组成的。把两根绝缘的铜导线按一定密度互相绞在一起&#xff0c;每一根导线在传输中辐射出来的电波会被另一根线上发出的电波抵消&a…

Android蒙版倒计时,【倒计时海报设计】- 虎课网

我们在大街上经常会看到各种宣传海报&#xff0c;有时商家为了达到促销的目的会在醒目的地方张贴一张倒计时海报&#xff0c;为的就是吸引群众的眼睛&#xff0c;大家了解PS倒计时海报设计的制作过程吗&#xff1f;如果对这方面操作不太了解的话&#xff0c;大家可以关注一下下…

linkit-smart-7688-feed 安装笔录

转载于:https://www.cnblogs.com/orangezs/p/8571791.html

android浏览SD卡的文件,简单实现浏览Android SD卡中的文件

----Main.javapublic class Main extends Activity {private TextView textView;private Button button;private ListView listView;public File currentParentFile;public File[] currentFiles;public static String sdcardDir ;static {try {//sd卡的路径sdcardDir Environ…

Java线程状态Jstack线程状态BLOCKED/TIMED_WAITING/WAITING解释

一、线程5种状态 新建状态&#xff08;New&#xff09; 新创建了一个线程对象。 就绪状态&#xff08;Runnable&#xff09; 线程对象创建后&#xff0c;其他线程调用了该对象的start()方法。该状态的线程位于可运行线程池中&#xff0c;变得可运行&#xff0c;等待获取CPU的使…

彩票相关知识

很多人做梦都想中得彩票头奖&#xff0c;很多人希望天上能掉下馅饼来砸中自己&#xff0c;很多人在作白日梦……彩票是一种风险投资&#xff0c;是一种四两拨千斤的气势&#xff0c;更是一种众人拾柴火焰高的真实写照&#xff0c;没买过彩票的人是很难体会那种美好的期望及期望…

(模拟信号/数字信号)分别以(模拟信号/数字信号)中传输方式

1、基本概念、基本术语和数据通信系统 1.基本概念和基本术语 数据&#xff1a;能够由计算机处理的数字、字母和符号等具有一定意义的实体。 分类&#xff1a;模拟数据可以在一定的数据区域中取连续的值&#xff0c;如声音和图像&#xff1b;数字数据只能取离散的数值&#xff0…

android11 rom,小米打造基于安卓11的ROM来了:米10尝鲜

原标题&#xff1a;小米打造基于安卓11的ROM来了&#xff1a;米10尝鲜据XDA报道&#xff0c;距离Android 11正式版发布还有几天时间&#xff0c;9月8日正式面向Pixel 2、Pixel 3、Pixel 4和Pixel 3a等机型推送Android 11正式版。另一方面&#xff0c;各大手机品牌已经紧锣密鼓开…

基于 HTML5 WebGL 的 3D 服务器与客户端的通信

这个例子的初衷是模拟服务器与客户端的通信&#xff0c;我把整个需求简化变成了今天的这个例子。3D 机房方面的模拟一般都是需要鹰眼来辅助的&#xff0c;这样找产品以及整个空间的概括会比较明确&#xff0c;在这个例子中我也加了&#xff0c;这篇文章就算是我对这次项目的一个…

七种常见的核酸序列蛋白编码能力预测工具 | ncRNAs | lncRNA

注&#xff1a;这些工具的应用都是受限的&#xff0c;有些本来就是只能用于预测动物&#xff0c;在使用之前务必用ground truth数据来测试一些。我想预测某一个植物的转录本&#xff0c;所以可以拿已经注释得比较好的拟南芥来测试一下。&#xff08;测试的结果还是比较惊人的&a…

寒武纪找到了引领中国AI芯片走向世界的路

大约6亿年前在地质学上被称作“寒武纪”的时代&#xff0c;大量无脊椎动物在短时间内出现“生命大爆发”。如今&#xff0c;“寒武纪”这个名字再次被人们提及&#xff0c;它源自中科院计算所研发的人工智能芯片处理器的命名&#xff0c;意喻人工智能即将迎来大爆发的时代。“寒…

浅谈PPM (Project Portfolio Management)

前言&#xff1a; 本文以纯理论性的PPM讲解为主&#xff0c;不会涉及到具体如何实施&#xff0c;我会在以后介绍详细的PPM实施方案介绍。 PPM&#xff0c;可能很多人并不清楚甚至可能没听说过&#xff0c;这是一个近些年才流行起来的概念&#xff0c;是Project Portfolio Mana…

Android怎么插手机卡,魅蓝E手机卡怎么装 魅蓝E手机SIM卡安装图文教程

昨天下午&#xff0c;魅族发布了全新系列魅蓝手机——魅蓝E&#xff0c;定位魅蓝高端产品线&#xff0c;售价1299元&#xff0c;李楠号称魅蓝E采用三四千元的旗舰机工艺&#xff0c;外观/屏幕/拍照提升明显。此外&#xff0c;魅蓝E依旧支持全网通双卡双待。那么魅蓝E怎么插卡/装…