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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
JS与C#编码解码
Dec 03 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 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中处理模拟rewrite 效果
2006/12/09 PHP
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
js选择器全面解析
2016/06/27 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
Python里隐藏的“禅”
2014/06/16 Python
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
python+mysql实现简单的web程序
2014/09/11 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
普师专业个人自荐信范文
2013/11/26 职场文书
小学生红领巾广播稿
2014/01/21 职场文书
人事助理自荐信
2014/02/02 职场文书
诉讼授权委托书
2014/10/15 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
预备党员半年考察意见
2015/06/01 职场文书
运动会入场词
2015/07/18 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
浅谈Redis的事件驱动模型
2022/05/30 Redis