做电影网站大概要多少钱,wordpress 的主题在哪个文件夹,北京电力交易中心绿色电力交易实施细则,手机访问pc网站跳转模拟系统的消息提示框而实现的一套模态对话框组件#xff0c;用于消息提示、确认消息和提交内容。 从场景上说#xff0c;MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt#xff0c;因此适合展示较为简单的内容。如果需要弹出较为复杂的内容#xff0c;请使用…模拟系统的消息提示框而实现的一套模态对话框组件用于消息提示、确认消息和提交内容。 从场景上说MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt因此适合展示较为简单的内容。如果需要弹出较为复杂的内容请使用 Dialog。 消息提示 当用户进行操作时会被触发该对话框中断用户操作直到用户确认知晓后才可关闭。 调用$alert方法即可打开消息提示它模拟了系统的 alert无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数message和title。值得一提的是窗口被关闭后它默认会返回一个Promise对象便于进行后续操作的处理。若不确定浏览器是否支持Promise可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。 1 template2 el-button typetext clickopen点击打开 Message Box/el-button3 /template4 5 script6 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字段表明消息类型可以为successerrorinfo和warning无效的设置将会被忽略。注意第二个参数title必须定义为String类型如果是Object会被理解为options。在这里我们用了 Promise 来处理后续响应。 1 template2 el-button typetext clickopen2点击打开 Message Box/el-button3 /template4 5 script6 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规定校验函数可以返回Boolean或String返回false或字符串时均表示校验未通过同时返回的字符串相当于定义了inputErrorMessage字段。此外可以用inputPlaceholder字段来定义输入框的占位符。 1 template2 el-button typetext clickopen3点击打开 Message Box/el-button3 /template4 5 script6 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 template2 el-button typetext clickopen4点击打开 Message Box/el-button3 /template4 5 script6 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属性设置为 truemessage 就会被当作 HTML 片段处理。 1 template2 el-button typetext clickopen5点击打开 Message Box/el-button3 /template4 5 script6 export default {7 methods: {8 open5() {9 this.$alert(strong这是 iHTML/i 片段/strong, HTML 片段, {
10 dangerouslyUseHTMLString: true
11 });
12 }
13 }
14 }
15 /script View Code message 属性虽然支持传入 HTML 片段但是在网站上动态渲染任意 HTML 是非常危险的因为容易导致 XSS 攻击。因此在 dangerouslyUseHTMLString 打开的情况下请确保 message 的内容是可信的永远不要将用户提交的内容赋值给 message属性。 居中布局 内容支持居中布局 将 center 设置为 true 即可开启居中布局 1 template2 el-button typetext clickopen6点击打开 Message Box/el-button3 /template4 5 script6 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 片段处理boolean—falsetype消息类型用于显示图标stringsuccess / info / warning / error—customClassMessageBox 的自定义类名string——callback若不使用 Promise可以使用此参数指定 MessageBox 关闭后的回调function(action, instance)action 的值为confirm或cancel, instance 为 MessageBox 实例可以通过它访问实例上的属性和方法——showCloseMessageBox 是否显示右上角关闭按钮boolean—truebeforeCloseMessageBox 关闭前的回调会暂停实例的关闭function(action, instance, done)action 的值为confirm或cancelinstance 为 MessageBox 实例可以通过它访问实例上的属性和方法done 用于关闭 MessageBox 实例——lockScroll是否在 MessageBox 出现时将 body 滚动锁定boolean—trueshowCancelButton是否显示取消按钮boolean—false以 confirm 和 prompt 方式调用时为 trueshowConfirmButton是否显示确定按钮boolean—truecancelButtonText取消按钮的文本内容string—取消confirmButtonText确定按钮的文本内容string—确定cancelButtonClass取消按钮的自定义类名string——confirmButtonClass确定按钮的自定义类名string——closeOnClickModal是否可通过点击遮罩关闭 MessageBoxboolean—true以 alert 方式调用时为 falsecloseOnPressEscape是否可通过按下 ESC 键关闭 MessageBoxboolean—true以 alert 方式调用时为 falsecloseOnHashChange是否在 hashchange 时关闭 MessageBoxboolean—trueshowInput是否显示输入框boolean—false以 prompt 方式调用时为 trueinputPlaceholder输入框的占位符string——inputType输入框的类型string—textinputValue输入框的初始文本string——inputPattern输入框的校验表达式regexp——inputValidator输入框的校验函数。可以返回布尔值或字符串若返回一个字符串, 则返回结果会被赋值给 inputErrorMessagefunction——inputErrorMessage校验未通过时的提示文本string—输入的数据不合法!center是否居中布局boolean—falseroundButton是否使用圆角按钮boolean—false 转载于:https://www.cnblogs.com/grt322/p/8564437.html
