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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
newxtree.js代码
2007/03/13 Javascript
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
javascript 自定义事件初探
2009/08/21 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
JavaScript门面模式详解
2017/10/19 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
Python 描述符(Descriptor)入门
2016/11/20 Python
python实现图书借阅系统
2019/02/20 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
Python基于requests库爬取网站信息
2020/03/02 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
Java如何调用外部Exe程序
2015/07/04 面试题
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
给儿子的表扬信
2014/01/15 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
工作犯错保证书
2015/05/11 职场文书
情感电台广播稿
2015/08/18 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android