vue 修改element-ui 的提示框

最新推荐文章于 2024-08-22 11:52:08 发布

xinyuandu

最新推荐文章于 2024-08-22 11:52:08 发布

阅读量7.3k

点赞数 2

分类专栏： vueComponents 文章标签： confirm alert element-ui

本文链接：https://blog.csdn.net/xinyuandu/article/details/88354568

版权

vueComponents 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先来简单的介绍一下参数和方法的调用

	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();
        });
	}

当然，我也引入了两张图片，麻烦各位自定解决