修改this.$confirm的按钮位置、图标、文字及标题

在Vue.js项目中，this.$confirm 通常是基于某些UI库（如Element UI或Ant Design Vue）的对话框确认方法。

以下是基于Element UI的this.$confirm的用法示例。

在此之前，你的项目要已经安装了Element UI，如果没安装话就打开你的控制台到根目录，

执行以下操作：

如若未安装Element UI：

1. 使用npm或yarn进行安装

npm install element-ui --save
# 或者
yarn add element-ui

2. Vue项目入口文件（main.js或main.ts）中引入Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

使用this.$confirm:

 1. 简单举例点击button是否确认删除：

• confirmButtonText (String): 确认按钮的文本，默认为“确定”。
• cancelButtonText (String): 取消按钮的文本，默认为“取消”。
• type (String): 确认框的类型，可以是success、warning、info或error，默认为info。

<template><div><el-button type="text" @click="handleDelete">删除</el-button></div>
</template><script>
export default {methods: {handleDelete() {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(() => {//删除逻辑}).catch(() => {//取消逻辑});},},
};
</script><style scoped>
/* 你的样式代码 */
</style>

以下举例的 确认取消 为 ：释放取消 / 继续离开

2. 是否显示确认取消及是否点击遮罩层离开：

 

具体解释如下代码：

    this.$confirm("当前集货位订单司机未装车是否释放？", "释放集货位", {confirmButtonText: "释放",cancelButtonText: "取消",type: "warning",showCancelButton:false,  //控制取消是否显示showConfirmButton:false, //控制释放是否显示closeOnClickModal: false  //点击遮罩层是否离开}).then(()=>{});})

 3.调换默认的确定及取消的按钮位置

3.1 使用customClass 自定义类名 来改变按钮的位置，深度修改

       this.$confirm("当前集货位订单司机未装车是否释放？", "释放集货位", {confirmButtonText: "释放",cancelButtonText: "取消",type: "warning",customClass:'set_custom_class',closeOnClickModal: false}).then(()=>{})

3.2 设置样式：

在原有基础上再加一个style，使用scoped无效

拿到里面的两个button，用css调换

<style lang="scss">
.set_custom_class {.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>

效果如下：

4.自定义图标文字标题

使用 h 函数创建的虚拟DOM节点（就是createElement函数）

• 第一个 h 函数调用创建了一个 div 元素。
• 它的第二个参数是 null，表示没有数据对象（没有属性、样式或事件监听器）。
• 第三个参数是一个数组，包含了该 div 的子节点，可以设置自己的类名及样式。

const h = this.$createElement
this.$confirm('', {message:h('div',null, [h('i',{ class:'el-icon-warning',style:'color:#f90;font-size:30px;' }),h('span',{class:'set_span', style:''}, '释放集货位'),h('p',{ style:'margin:10px 0 0 40px;' },'当前集货位订单司机未装车是否释放？')]),confirmButtonText: '继续',cancelButtonText: '离开',
}).then(() => {}).catch(() => {});<style lang="scss">
.set_span{margin-left:10px;font-size:16px;line-height:30px;font-weight:600;vertical-align:top;
}
.set_i{color:#f90;font-size:30px;
}
</style>

最后的自定义效果如下：

 

注意点：

如果设置了type这个属性，他不会改变你通过HTML嵌入的图标，type属性会改变对话框的背景色和按钮样式，但它不直接控制图标

---

到底啦

---