$confirm的自定义使用

最新推荐文章于 2024-07-15 10:19:10 发布

倾徵

最新推荐文章于 2024-07-15 10:19:10 发布

阅读量6.5k

点赞数 2

分类专栏： js 学习文章标签： javascript

本文链接：https://blog.csdn.net/qq_50988574/article/details/127571537

版权

本文介绍了如何在项目中自定义Element-UI的$confirm组件，包括交换取消和确定按钮的布局，以及创建自定义样式，以满足特定的UI需求。

摘要由CSDN通过智能技术生成

$confirm的自定义使用

在项目开发过程中，经常会遇到需要修改ui库中默认样式的情况。就比如说使用element-ui的$confirm弹出框时，它的默认样式如下：
在这里插入图片描述
但我们需要的是
这样一个布局样式，这时我们就需要对默认样式进行一个自定义修改，会利用消息框的自定义类名customClass，话不多说，直接进入正题~

交换取消和确定按钮

// js
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
   
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  customClass:'demo1',
  type: 'warning'
}).then(() => {
   
    this.$message({
   
    type: 'success',
    message: '删除成功!'