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 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
JavaScript基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
php中给js数组赋值方法
Mar 10 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 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
15种PHP Encoder的比较
2007/04/17 PHP
php 模拟POST|GET操作实现代码
2010/07/20 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
python正则表达式re之compile函数解析
2017/10/25 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
python 除法保留两位小数点的方法
2018/07/16 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
Python post请求实现代码实例
2020/02/28 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
opencv实现图像几何变换
2021/03/24 Python
运动会广播稿200字
2014/01/15 职场文书
授权委托书格式范文
2014/08/02 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
react 路由Link配置详解
2021/11/11 Javascript
SQL Server 中的事务介绍
2022/05/20 SQL Server