ElementUI MessageBox 弹框

发布时间:2021-03-08 10:33:41编辑:admin阅读(230)

    一、概述

    在执行删除操作时,我们一般会添加一个删除确认框,当用户点击确认删除后在执行删除操作,这样能提升用用户体验,
    那么该如何快速实现呢?element中提供了相应的确认框,在官方文档中不太好找,其实在message box弹框中,
    有一个确认消息

     

    二、代码实现

    test.vue

    <template>
      <div style="width: 100%">
        <el-button type="text" @click="open">点击打开 Message Box</el-button>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
          }
        },
        methods: {
          open() {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          }
        }
      }
    </script>
    
    <style>
    </style>


     

    访问页面,效果如下:

    1.gif

     

    本文参考链接:

    https://element.eleme.io/#/zh-CN/component/message-box


关键字

上一篇: ElementUI table 样式修改

下一篇: vue拦截器qs