使用它 element 的 msgbox 自定义弹出内容
作者:互联网
如图:
1、npm 安装:npm i element-ui -S
2、热点点击事件:
// 创建新节点
const h = this.$createElement; this.$msgbox({
// 创建div span 节点 message: h('div', { class: 'hot_msgbox' }, [ h('span', null, this.$t('Finance.DouWantTo') + '" '), h('span', { style: 'color: #2FA8E8' }, row.memberName), h('span', null, ' "' + this.$t('Finance.AddAsAhotAccount')) ]), showCancelButton: true, // 按钮显示 cancelButtonText: '否,继续操作', // 自定义按钮 confirmButtonText: '是,设为热点用户', // 自定义按钮 }).then(({}) => { this.$message({ type: 'success', message: '添加成功' }); }).catch(() => { });
3、按钮样式:
<style> .el-message-box__btns{ padding: 5px 25px 15px; } .el-message-box__btns .el-button{ background: #a5a5a5; color: #fff; border: 1px solid #a5a5a5; } .el-message-box__btns .el-button.el-button--primary{ background: #2FA8E8; border: 1px solid #2FA8E8; } .el-message-box__btns .el-button.el-button--small{ padding: 10px 15px; } </style>
注:style 不可添加 scoped ,否则样式无效
标签:__,el,span,自定义,button,element,message,msgbox,btns 来源: https://www.cnblogs.com/moguzi12345/p/14541604.html