vue 修改element-ui 的提示框
首先来简单的介绍一下参数和方法的调用confirm : function(){var that = thisvar params = {'context' : '12312---3213', //提示的内容Y'status' : 'success',//提示状态,两种 success/ failY'isClo...
·
首先来简单的介绍一下参数和方法的调用
confirm : function(){
var that = this
var params = {
'context' : '12312---3213', //提示的内容 Y
'status' : 'success', //提示状态,两种 success / fail Y
'isClose' : true , //是否显示取消按钮(提示框左侧的按钮)
'yesText' : 'yes', //提示框右侧按钮的内容
'noText' : 'no', //提示框左侧按钮的内容
'color' : '#0AB38C', //提示框内容的颜色 ,默认 #0AB38C
'alarmMessage' : "1", //告警内容 ,颜色 红色 , 可以为空 Y
'successEvent' : function(){ //点击右侧按钮之后执行的事件,注意这里的el相当于this指针 ,可以是一个空的方法 Y
el.$message({
type: 'info',
message: 'action: ok'
})
},
'failEvent' : function(){ //点击左侧按钮之后执行的时间,注意这里的el相当于this指针 ,可以是一个空的方法 Y
el.$message({
type: 'info',
message: 'action: ok'
})
},
}
this.common.elConfirm(this.$createElement,that,params); //调用提示框
},
这里是进行element-ui提示框的属性的自定义结构:
elConfirm(h,el,params) {
var that = el ; //获取当前的JS属性
console.log(params.alarmMessage.length )
var imageIcon = (params.status == 'success' ? confirmIcon : confirm_false_icon);//获取当前提示框的状态 success // fail
that.$msgbox({
//设置具体的样式 ,具体参考$creatElement属性
message: h('div', null, [
h('img', {
attrs : { src : imageIcon },
style : params.status=='success' ? {'width':'1.94rem','height':'1.32rem','margin-left':'1.5rem'} : {'width':'1.32rem','height':'1.26rem','margin-left':'1.7rem'} }, ''),
h('div',{
style:{'text-align':'center','margin-top':'.5rem'} },[ h('span',{
style:{'color' : params.color?params.color:'#0AB38C' ,'font-size':'.32rem','color':'#FF5C50'} },params.alarmMessage)]),
h('div',{
style:{'text-align':'center','margin-top':params.alarmMessage.length-0>0 ? '.04rem' : '.5rem'} },[ h('span',{
style:{'color' : params.color?params.color:'#0AB38C' ,'font-size':params.alarmMessage.length-0>0 ? '.28rem':'.32rem'} },params.context)])
]),
showCancelButton: params.isClose ? true : false ,
confirmButtonText: params.yesText ? params.yesText : '确定',
cancelButtonText: params.noText ? params.noText : '取消',
customClass : "messageBoxElement",
confirmButtonClass : params.isClose ? 'btnTrue' : 'btnOnlyTrue' , //确定按钮的样式
cancelButtonClass : 'btnFalse', //关闭按钮的样式
}).then(action => {
params.failEvent();
// params.successEvent().call(el);
}).catch(() => {
params.successEvent();
});
}
当然,我也引入了两张图片,麻烦各位自定解决
更多推荐
已为社区贡献2条内容
所有评论(0)