当前位置：首页 > article >正文

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

article 2024/11/23 1:57:38

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