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判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
jquery等待效果示例
May 01 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
Bootstrap实现模态框效果
Sep 30 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
无线电的诞生过程
2021/03/01 无线电
php调用新浪短链接API的方法
2014/11/08 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
php中数组最简单的使用方法
2020/12/27 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
认识延迟时间为0的setTimeout
2008/05/16 Javascript
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
js实现计算器功能
2020/08/10 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
python 识别图片中的文字信息方法
2018/05/10 Python
Python2包含中文报错的解决方法
2018/07/09 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
python config文件的读写操作示例
2019/09/27 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Tensorflow 实现释放内存
2020/02/03 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
个人找工作求职简历的自我评价
2013/10/20 职场文书
安全口号大全
2014/06/21 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python