AI Agent技术社区

代码：

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

图示：