elementUI中messageBox自定义展示内容
在Element UI中,您可以使用MessageBox.alert
方法来自定义显示内容。以下是一个简单的例子,展示如何使用MessageBox.alert
来显示自定义内容:
import { MessageBox } from 'element-ui';
// 触发显示自定义内容的对话框
const customContent = '<p>这是一段自定义的HTML内容</p>';
MessageBox.alert(customContent, {
dangerouslyUseHTMLString: true, // 需要将message属性设置为HTML字符串
customClass: 'custom-message-box' // 自定义样式类
}).then(() => {
// 点击确定按钮后的回调
console.log('MessageBox 关闭');
}).catch(() => {
// 点击取消或者按下Esc键的回调
console.log('MessageBox 取消');
});
请确保您已经在项目中正确安装并导入了Element UI,并且dangerouslyUseHTMLString
选项被设置为true
来允许您使用HTML字符串作为消息内容。您还可以通过customClass
选项来为MessageBox添加自定义的CSS类,从而实现更多的样式自定义。
评论已关闭