elementUI中提示框只展示确认按钮,不展示取消按钮(Message、confirm)
在Element UI中,Message和confirm组件都提供了自定义取消按钮的功能。但是,如果你想要一个只显示确认按钮而不显示取消按钮的提示框,你可以通过设置showCancelButton
属性为false
来实现。
以下是使用Message
和confirm
组件仅显示确认按钮的例子:
Message 组件示例:
// 引入Message组件
import { Message } from 'element-ui';
// 使用Message组件,不显示取消按钮
Message({
message: '这是一条只有确认按钮的提示信息',
confirmButtonText: '确认',
showCancelButton: false,
customClass: 'my-message' // 自定义类名,可以用来覆盖样式
});
confirm 组件示例:
// 引入MessageBox组件
import { MessageBox } from 'element-ui';
// 使用MessageBox的confirm方法,不显示取消按钮
MessageBox.confirm('确认执行该操作吗?', '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消', // 注意:这里设置了取消按钮文本,但是不会显示
showCancelButton: false,
customClass: 'my-message-box' // 自定义类名,可以用来覆盖样式
}).then(() => {
// 确认操作
console.log('确认执行操作');
}).catch(() => {
// 取消操作
console.log('取消操作');
});
在以上代码中,showCancelButton
属性被设置为false
,这样就会隐藏取消按钮,只显示确认按钮。同时,你可以通过customClass
属性来自定义提示框的样式。
评论已关闭