脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Element MessageBox弹框

Element MessageBox弹框的具体使用

 更新时间：2020年07月27日 10:13:44   作者：ForeverJPB.  
这篇文章主要介绍了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>

确认消息


<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>

提交内容


<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>

自定义


<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 片段


<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>

区分取消与关闭


<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>

居中布局


<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>

全局方法

单独引用

Options




到此这篇关于Element MessageBox弹框的具体使用的文章就介绍到这了,更多相关Element MessageBox弹框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 如何构建 vue-ssr 项目的方法步骤

    如何构建 vue-ssr 项目的方法步骤

    这篇文章主要介绍了如何构建 vue-ssr 项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • vue2 elementui if导致的rules判断失效的解决方法

    vue2 elementui if导致的rules判断失效的解决方法

    文章讨论了在使用Vue2和ElementUI时,将if语句放在el-form-item内导致rules判断失效的问题,并提出了将判断逻辑移到外部的解决方案,感兴趣的朋友一起看看吧
    2024-12-12
  • Vue watch监听使用的几种方法

    Vue watch监听使用的几种方法

    watch是由用户定义的数据监听，当监听的属性发生改变就会触发回调，这项配置在业务中是很常用。在面试时，也是必问知识点，一般会用作和computed进行比较。那么本文就来带大家从源码理解watch的工作流程，以及依赖收集和深度监听的实现
    2022-12-12
  • vuex中store存储store.commit和store.dispatch的用法

    vuex中store存储store.commit和store.dispatch的用法

    这篇文章主要介绍了vuex中store存储store.commit和store.dispatch的用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 很棒的vue弹窗组件

    很棒的vue弹窗组件

    这篇文章主要为大家详细介绍了vue弹窗组件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Vue表单及表单绑定方法

    Vue表单及表单绑定方法

    今天小编就为大家分享一篇Vue表单及表单绑定方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue中watch和computed的区别与使用方法

    vue中watch和computed的区别与使用方法

    这篇文章主要给大家介绍了关于vue中watch和computed的区别与使用方法的相关资料，文中通过实例代码结束的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2020-08-08
  • 在vue.config.js中优化webpack配置的方法

    在vue.config.js中优化webpack配置的方法

    在日常开发中我们离不开打包工具webpack,但是不同的配置会影响我们项目的运行构建时间,也会影响打包之后项目包的大小,这篇文章记录一下我使用过的可以优化webpack的配置,需要的朋友可以参考下
    2024-05-05
  • Vue quill-editor 编辑器使用及自定义toobar示例详解

    Vue quill-editor 编辑器使用及自定义toobar示例详解

    这篇文章主要介绍了Vue quill-editor编辑器使用及自定义toobar示例详解,这里讲解编辑器quil-editor的知识结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2023-07-07
  • 解决el-cascader在IE11浏览器中加载页面自动展开下拉框问题

    解决el-cascader在IE11浏览器中加载页面自动展开下拉框问题

    这篇文章主要为大家介绍了解决el-cascader在IE11浏览器中加载页面自动展开下拉框问题，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06

最新评论