this.$confirm 点取消后按钮颜色变浅

`this.$confirm` 是 Vue.js 中 Element UI 提供的一个确认提示框组件，用于在前端交互中获取用户的确认操作。当你点击取消按钮后，这个组件默认的行为是将取消按钮的颜色变得更淡，这是一种设计上的视觉反馈，表示用户已经选择放弃当前的操作。

这通常是为了清晰地表明用户的操作状态，并提供一个撤销的机会。如果你想改变这种默认效果，可以在组件的配置或者自定义样式里覆盖这个默认的CSS样式。例如，你可以设置一个变量来控制取消按钮的色深，然后在需要的地方动态调整。

// 在Vue实例的data或style对象中定义取消按钮颜色的变量
data() {
  return {
    cancelBtnColor: 'lightGray'
  }
}

<style scoped>
.el-confirm button.cancel {
  color: {{ cancelBtnColor }};
}
</style>

// 当你需要恢复原色时，可以更新cancelBtnColor到原始值
methods: {
  onCancel() {
    this.cancelBtnColor = 'primary'; // 或者你希望的其他颜色
  }
}

相关问题

this.$confirm修改大小

要修改this.$confirm的大小，可以通过以下步骤实现：
1. 首先，你需要确保已经引入了jQuery库和jquery-confirm插件的相关文件。你可以通过以下代码引入它们：

<script src="../js/jquery.js"></script>
<script src="../js/jquery-confirm.js"></script>
<link rel="stylesheet" href="../css/jquery-confirm.css">
<link rel="stylesheet" href="../css/bundled.css">

请确保这些文件的路径是正确的，并且按照正确的顺序引入。

2. 接下来，你可以使用css来修改this.$confirm的大小。在你的自定义样式表中，你可以使用类选择器来选择this.$confirm的元素，并设置它的宽度和高度。例如，如果你想将this.$confirm的宽度设置为500px，高度设置为300px，你可以在你的样式表中添加以下代码：

.my-custom-confirm {
  width: 500px;
  height: 300px;
}

3. 最后，你需要在调用this.$confirm时，将你自定义的类选择器添加到type参数中。例如，如果你想使用自定义的类选择器.my-custom-confirm，你可以将以下代码添加到你的代码中：

this.$confirm('确认要执行此操作吗？', {
  type: 'success',
  boxWidth: '500px',
  useBootstrap: false,
  containerFluid: true,
  boxContainer: true,
  className: 'my-custom-confirm',
  buttons: {
    confirm: {
      text: '确认',
      btnClass: 'btn-success',
      action: function () {
        // 点击确认按钮后的操作
      }
    },
    cancel: {
      text: '取消',
      btnClass: 'btn-cancel',
      action: function () {
        // 点击取消按钮后的操作
      }
    }
  }
});

在上面的代码中，你可以看到我们将className参数设置为'my-custom-confirm'，这样就会应用我们之前定义的样式。同时，我们还可以设置boxWidth参数来指定this.$confirm的宽度。

请根据你的需要进行相应的调整。希望这可以帮助到你。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [jquery-confirm 弹出框宽度太宽问题](https://blog.csdn.net/caileigood/article/details/81660524)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue $confirm 自定义图标及修改图标颜色](https://blog.csdn.net/weixin_40841731/article/details/97022975)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

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 弹窗组件，在弹窗中显示了一个提示信息，并且设置了确认按钮和取消按钮的文本和颜色。当用户点击了确认按钮或者取消按钮，就会执行相应的逻辑。你可以根据需要修改文本和逻辑。