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 相关文章推荐
React.js入门学习第一篇
Mar 30 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
vue移动端路由切换实例分析
May 14 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
vue.js实现简单购物车功能
May 30 Javascript
Vue 打包后相对路径的引用问题
Jun 05 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
PHP 函数语法介绍一
2009/06/14 PHP
数据库查询记录php 多行多列显示
2009/08/15 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
centos系统升级python 2.7.3
2014/07/03 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
大学毕业通用个人的求职信
2013/12/08 职场文书
关于礼仪的演讲稿
2014/01/04 职场文书
学校节能减排方案
2014/06/13 职场文书
2014年外联部工作总结
2014/11/17 职场文书
铁路安全反思材料
2014/12/24 职场文书
劳模事迹材料范文
2014/12/24 职场文书
教师党员自我评价2015
2015/03/04 职场文书
酒店前台岗位职责
2015/04/16 职场文书
关爱空巢老人感想
2015/08/11 职场文书
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL