Element MessageBox弹框的具体使用

网络编程 2021-07-04 14:06www.168986.cn编程入门

这篇文章主要介绍了Element MessageBox弹框的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧

组件—弹框

消息提示

<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: 'suess',
      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: 'suess',
      message: '删除成功!'
     });
    }).catch(() => {
     this.$message({
      type: 'info',
      message: '已取消删除'
     });
    });
   }
  }
 }
</script>

全局方法

单独引用

Options

到此这篇关于Element MessageBox弹框的具体使用的文章就介绍到这了,更多相关Element MessageBox弹框内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！

上一篇：解决vue中的无限循环问题下一篇：Vue 组件复用多次自定义参数操作

Element MessageBox弹框的具体使用

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

Element MessageBox弹框的具体使用

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设