使用 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 ，否則樣式無效