$confirm默认两个按钮的位置为:取消在前,确认在后,而我们在项目中经常要求:确认在前,取消在后,所以需要调换两个按钮的位置。修改后的样式如下图所示:
![在这里插入图片描述](https://img-blog.csdnimg.cn/afbd3f0f31c441b5abdb3db54f520b85.png)
-
用css样式调换两个按钮的位置,代码如下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/a1ff2bae89c8492f873c5c71e49dbb6e.png)
-
给取消按钮添加样式
![在这里插入图片描述](https://img-blog.csdnimg.cn/a8bebb710b74432f9acf92840657a153.png)
this.$confirm(`此操作将永久删除选中的${rows.length}位用户, 是否继续?`, '删除用户', {
confirmButtonText: '确定',
cancelButtonText: '取消',
cancelButtonClass: 'custom-cancel-button',
type: 'warning',
closeOnClickModal: false
}).then(() => {
}).catch(() => {
});
- 拉开两个按钮的距离10像素,给取消按钮10像素的左margin。
至此,两个按钮位置改变。注意,$confirm在项目中应用较多,尤其是后台管理系统,删除时的提示都用这个,所以两个样式的修改最好放到公共样式文件里,这样就不需要每次使用时都改一遍样式了。