<template>

  <el-button type="text" @click="open">点击打开 Message Box</el-button>

</template>

<script>

export default {

  methods: {

    open () {

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning',

        // MessageBox 的自定义类名

        customClass: 'btn-cancle-right'

      }).then(() => {

        this.$message({

          type: 'success',

          message: '删除成功!'

        })

      }).catch(() => {

        this.$message({

          type: 'info',

          message: '已取消删除'

        })

      })

    }

  }

}

</script>

// 在单页面使用不可以加scoped限制，否则不生效

<style lang="scss">

/* 可以把这个btn-cancle-right类放置到公共的样式文件中，

这样就可以只定义一次，多次重复使用啦 */

.btn-cancle-right {

  .el-message-box__btns {

    .el-button:nth-child(1) {

      float: right;

    }

    .el-button:nth-child(2) {

      margin-right: 10px;

      background-color: #2d8cf0;

      border-color: #2d8cf0;

    }

  }

}

</style>