Element MessageBox弹框的具体使用


Posted in Javascript onJuly 27, 2020

组件—弹框

消息提示

Element MessageBox弹框的具体使用

Element MessageBox弹框的具体使用

<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>

确认消息

Element MessageBox弹框的具体使用

Element MessageBox弹框的具体使用

<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>

提交内容

Element MessageBox弹框的具体使用

Element MessageBox弹框的具体使用

<template>
 <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    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>

自定义

Element MessageBox弹框的具体使用

Element MessageBox弹框的具体使用

<template>
 <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    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>

使用 HTML 片段

Element MessageBox弹框的具体使用

Element MessageBox弹框的具体使用

<template>
 <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
     dangerouslyUseHTMLString: true
    });
   }
  }
 }
</script>

区分取消与关闭

Element MessageBox弹框的具体使用

Element MessageBox弹框的具体使用

<template>
 <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
     dangerouslyUseHTMLString: true
    });
   }
  }
 }
</script>

居中布局

Element MessageBox弹框的具体使用

Element MessageBox弹框的具体使用

<template>
 <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
 export default {
  methods: {
   open() {
    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning',
     center: true
    }).then(() => {
     this.$message({
      type: 'success',
      message: '删除成功!'
     });
    }).catch(() => {
     this.$message({
      type: 'info',
      message: '已取消删除'
     });
    });
   }
  }
 }
</script>

全局方法

Element MessageBox弹框的具体使用

单独引用

Element MessageBox弹框的具体使用

Options

Element MessageBox弹框的具体使用

Element MessageBox弹框的具体使用

Element MessageBox弹框的具体使用

Element MessageBox弹框的具体使用

到此这篇关于Element MessageBox弹框的具体使用的文章就介绍到这了,更多相关Element MessageBox弹框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
javascript实用方法总结
Feb 06 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
Vue 组件复用多次自定义参数操作
Jul 27 #Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 #Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 #Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 #Javascript
Element Alert警告的具体使用方法
Jul 27 #Javascript
Element Badge标记的使用方法
Jul 27 #Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 #Javascript
You might like
使用php+xslt在windows平台上
2006/10/09 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
医学生求职自荐信
2013/10/25 职场文书
上级检查欢迎词
2014/01/18 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
师德学习感言
2014/01/31 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
SQL语句多表联合查询的方法示例
2022/04/18 MySQL