this.$confirm帮我写个代码样式

这里给你一个使用 Element UI 中的 this.$confirm 弹窗组件的代码样例：

<template>
  <div>
    <el-button @click="showConfirm">显示确认框</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    showConfirm() {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击了确定按钮执行的逻辑
        console.log('用户点击了确定按钮');
      }).catch(() => {
        // 用户点击了取消按钮执行的逻辑
        console.log('用户点击了取消按钮');
      });
    }
  }
}
</script>

这个样例中，我们在一个按钮的点击事件中调用了 this.$confirm 弹窗组件，在弹窗中显示了一个提示信息，并且设置了确认按钮和取消按钮的文本和颜色。当用户点击了确认按钮或者取消按钮，就会执行相应的逻辑。你可以根据需要修改文本和逻辑。

相关问题

vue this.$confirm 自定义三个按钮 代码

可以使用Element UI的Dialog组件来自定义三个按钮的confirm弹窗。

首先，在需要使用confirm弹窗的组件中引入Dialog组件和Button组件：

import { Dialog, Button } from 'element-ui';

然后，在该组件的methods中定义一个方法，用于自定义confirm弹窗：

methods: {
  myConfirm() {
    Dialog.confirm({
      title: '提示',
      message: '确定要执行该操作吗？',
      customClass: 'my-confirm',
      showCancelButton: true,
      showConfirmButton: false,
      showClose: false,
      cancelButtonText: '取消',
      cancelButtonClass: 'my-cancel-button',
      closeOnClickModal: false,
      closeOnPressEscape: false,
      beforeClose: (action, instance, done) => {
        if (action === 'cancel') {
          done();
        } else {
          // 执行确认操作
          done();
        }
      }
    });
  }
}

在myConfirm方法中，使用Dialog.confirm方法来创建一个confirm弹窗。通过传递一些参数，可以自定义弹窗的样式和功能：

- title：弹窗标题
- message：弹窗内容
- customClass：自定义弹窗类名
- showCancelButton：是否显示取消按钮
- showConfirmButton：是否显示确认按钮
- showClose：是否显示关闭按钮
- cancelButtonText：取消按钮文本
- cancelButtonClass：自定义取消按钮类名
- closeOnClickModal：是否允许点击弹窗外部关闭弹窗
- closeOnPressEscape：是否允许按下ESC键关闭弹窗
- beforeClose：弹窗关闭前的回调函数，可以在其中执行确认操作

在beforeClose回调函数中，可以根据用户操作的结果来执行相应的操作，例如调用API接口执行删除操作。

最后，在页面中使用Button组件来触发myConfirm方法即可：

<template>
  <Button type="warning" @click="myConfirm">删除</Button>
</template>

这样就可以自定义三个按钮的confirm弹窗了。

this.$confirm样式

this.$confirm 是一个 Vue.js 中的弹窗组件，其样式可以通过 CSS 进行自定义。你可以使用以下几种方式来修改 this.$confirm 的样式：

1. 通过修改全局 CSS：你可以在全局的 CSS 文件中添加样式规则来修改 this.$confirm 的外观。例如，在你的 main.css 文件中添加以下代码：

.el-message-box__wrapper {
  /* 修改弹窗的背景颜色 */
  background-color: #f0f0f0;
}

.el-message-box__container {
  /* 修改弹窗的宽度 */
  width: 400px;
}

.el-message-box__header {
  /* 修改弹窗标题栏的背景颜色 */
  background-color: #333;
  color: #fff;
}

2. 通过修改单个组件样式：如果你只想修改某个特定的 this.$confirm 组件的样式，你可以在组件中使用 scoped CSS 或者给组件添加类名来进行样式设置。例如，在你的组件模板中可以这样写：

<template>
  <div>
    <el-button @click="showConfirm">显示确认框</el-button>
  </div>
</template>

<style scoped>
.el-message-box__wrapper {
  /* 修改弹窗的背景颜色 */
  background-color: #f0f0f0;
}

.el-message-box__container {
  /* 修改弹窗的宽度 */
  width: 400px;
}

.el-message-box__header {
  /* 修改弹窗标题栏的背景颜色 */
  background-color: #333;
  color: #fff;
}
</style>

这样可以确保上述样式只对当前组件生效。

这只是一些简单的示例，你可以根据自己的需求使用 CSS 对 this.$confirm 进行样式定制。具体样式的修改还取决于你所使用的 UI 框架或组件库。