element ui点击按钮弹出款_elementUI 弹框

弹框

一、自定义图标 (通过class名)

屏幕快照 2019-04-01 下午4.42.09.png

const h2 = this.$createElement // 创建元素

this.$msgbox({

title: '导入成功',

message: h2('p', { style: 'margin: 0 30px -50px 30px;' }, [

// 通过 class名添加图标

h2('i', { class: 'el-icon-circle-check', style: 'font-size: 32px;margin-bottom:10px;color: #F5A400;' }, ''),

h2('p', { style: 'font-size: 16px;margin-bottom:10px;' }, '导入完成！')

]),

showCancelButton: false, // 不显示取消按钮

showConfirmButton: false // 不显示确定按钮

}).then(action => {

// 点击确定后执行的方法

}).catch(() => {

// 点击取消后执行的方法

})

二、自定义按钮及点击事件

屏幕快照 2019-04-01 下午4.47.15.png

this.$msgbox({

title: '导入项目',

dangerouslyUseHTMLString: true, // 可以读取html字段

customClass: 'import_custom', // 动态设置这个弹框的class,可以修改样式

message: '

' +

'

下载模板

为提高导入的成功率，请下载并使用系统提供的模板。

' +

'下载模板

',

showCancelButton: false,

confirmButtonText: '开始导入' // 确定按钮的字，可以自己修改

}).then(action => {

// 点击开始导入，执行的事件

}).catch(() => {

})

弹框按钮的点击事件，可以用jquery

$('body').undelegate('#download', 'click').delegate('#download', 'click