2 lines
6.8 KiB
JavaScript
2 lines
6.8 KiB
JavaScript
"use strict";(self["webpackChunknewfront"]=self["webpackChunknewfront"]||[]).push([[120],{7120:function(e,s,t){t.r(s),t.d(s,{default:function(){return y}});var l=t(6768),o=t(5130),n=t(4232);const i={class:"message-demo"},c={class:"demo-section"},a={class:"btn-group"},r={class:"demo-section"},m={class:"btn-group"},u={class:"demo-section"},h={class:"form-group"},C={class:"form-group"},k={class:"form-group"},f={class:"form-group"},g={class:"form-group checkbox"},d={class:"form-group checkbox"},b={key:0,class:"result-section"},p={class:"result-box"};function L(e,s,t,L,x,T){const v=(0,l.g2)("MessageBox");return(0,l.uX)(),(0,l.CE)("div",i,[s[24]||(s[24]=(0,l.Lk)("h1",null,"消息提示框示例",-1)),(0,l.Lk)("div",c,[s[13]||(s[13]=(0,l.Lk)("h2",null,"组件方式使用",-1)),(0,l.Lk)("div",a,[(0,l.Lk)("button",{onClick:s[0]||(s[0]=(...e)=>T.showSimpleMessage&&T.showSimpleMessage(...e))},"显示简单提示"),(0,l.Lk)("button",{onClick:s[1]||(s[1]=(...e)=>T.showConfirmMessage&&T.showConfirmMessage(...e))},"显示确认提示"),(0,l.Lk)("button",{onClick:s[2]||(s[2]=(...e)=>T.showCancelMessage&&T.showCancelMessage(...e))},"显示带取消的提示")])]),(0,l.Lk)("div",r,[s[14]||(s[14]=(0,l.Lk)("h2",null,"函数式调用（推荐）",-1)),(0,l.Lk)("div",m,[(0,l.Lk)("button",{onClick:s[3]||(s[3]=(...e)=>T.showFnAlert&&T.showFnAlert(...e)),class:"fn-btn"},"alert 提示"),(0,l.Lk)("button",{onClick:s[4]||(s[4]=(...e)=>T.showFnConfirm&&T.showFnConfirm(...e)),class:"fn-btn"},"confirm 确认"),(0,l.Lk)("button",{onClick:s[5]||(s[5]=(...e)=>T.showFnCustom&&T.showFnCustom(...e)),class:"fn-btn"},"自定义提示")]),s[15]||(s[15]=(0,l.Lk)("div",{class:"code-tip"},[(0,l.Lk)("pre",null,"// 使用方法\nimport MessageBox from '@/utils/messageBox'\n\n// 简单提示\nMessageBox.alert('这是一条提示信息', '提示')\n .then(() => {\n console.log('用户点击了确定')\n })\n .catch(() => {})\n\n// 确认提示\nMessageBox.confirm('确定要执行该操作吗?', '请确认')\n .then(() => {\n console.log('用户确认了操作')\n })\n .catch(() => {\n console.log('用户取消了操作')\n })\n ")],-1))]),(0,l.Lk)("div",u,[s[22]||(s[22]=(0,l.Lk)("h2",null,"自定义设置",-1)),(0,l.Lk)("div",h,[s[16]||(s[16]=(0,l.Lk)("label",null,"标题：",-1)),(0,l.bo)((0,l.Lk)("input",{"onUpdate:modelValue":s[6]||(s[6]=e=>x.customTitle=e),placeholder:"输入标题（可选）"},null,512),[[o.Jo,x.customTitle]])]),(0,l.Lk)("div",C,[s[17]||(s[17]=(0,l.Lk)("label",null,"消息内容：",-1)),(0,l.bo)((0,l.Lk)("input",{"onUpdate:modelValue":s[7]||(s[7]=e=>x.customMessage=e),placeholder:"输入消息内容"},null,512),[[o.Jo,x.customMessage]])]),(0,l.Lk)("div",k,[s[18]||(s[18]=(0,l.Lk)("label",null,"确认按钮文字：",-1)),(0,l.bo)((0,l.Lk)("input",{"onUpdate:modelValue":s[8]||(s[8]=e=>x.customConfirmText=e),placeholder:"默认：确定"},null,512),[[o.Jo,x.customConfirmText]])]),(0,l.Lk)("div",f,[s[19]||(s[19]=(0,l.Lk)("label",null,"取消按钮文字：",-1)),(0,l.bo)((0,l.Lk)("input",{"onUpdate:modelValue":s[9]||(s[9]=e=>x.customCancelText=e),placeholder:"默认：取消"},null,512),[[o.Jo,x.customCancelText]])]),(0,l.Lk)("div",g,[(0,l.bo)((0,l.Lk)("input",{type:"checkbox",id:"customCancel","onUpdate:modelValue":s[10]||(s[10]=e=>x.showCancel=e)},null,512),[[o.lH,x.showCancel]]),s[20]||(s[20]=(0,l.Lk)("label",{for:"customCancel"},"显示取消按钮",-1))]),(0,l.Lk)("div",d,[(0,l.bo)((0,l.Lk)("input",{type:"checkbox",id:"customOverlayClose","onUpdate:modelValue":s[11]||(s[11]=e=>x.closeOnOverlay=e)},null,512),[[o.lH,x.closeOnOverlay]]),s[21]||(s[21]=(0,l.Lk)("label",{for:"customOverlayClose"},"点击遮罩层关闭",-1))]),(0,l.Lk)("button",{onClick:s[12]||(s[12]=(...e)=>T.showCustomMessage&&T.showCustomMessage(...e)),class:"primary-btn"},"显示自定义提示")]),(0,l.bF)(v,{visible:x.messageVisible,title:x.title,message:x.message,confirm:x.confirmBtn,cancel:x.cancelBtn,confirmText:x.confirmText,cancelText:x.cancelText,closeOnClickOverlay:x.overlayClose,onConfirm:T.handleConfirm,onCancel:T.handleCancel},null,8,["visible","title","message","confirm","cancel","confirmText","cancelText","closeOnClickOverlay","onConfirm","onCancel"]),x.result?((0,l.uX)(),(0,l.CE)("div",b,[(0,l.Lk)("div",p,[(0,l.Lk)("p",null,[s[23]||(s[23]=(0,l.eW)("操作结果: ")),(0,l.Lk)("span",null,(0,n.v_)(x.result),1)])])])):(0,l.Q3)("",!0)])}var x=t(4876),T=t(6253),v={name:"MessageDemo",components:{MessageBox:x.A},data(){return{messageVisible:!1,title:"",message:"",confirmBtn:!0,cancelBtn:!1,confirmText:"确定",cancelText:"取消",overlayClose:!1,result:"",customTitle:"",customMessage:"这是一条自定义消息",customConfirmText:"",customCancelText:"",showCancel:!1,closeOnOverlay:!1}},methods:{showSimpleMessage(){this.title="提示",this.message="这是一条简单的提示信息",this.confirmBtn=!0,this.cancelBtn=!1,this.confirmText="确定",this.cancelText="取消",this.overlayClose=!1,this.messageVisible=!0},showConfirmMessage(){this.title="确认操作",this.message="您确定要执行此操作吗？",this.confirmBtn=!0,this.cancelBtn=!1,this.confirmText="确定",this.cancelText="取消",this.overlayClose=!1,this.messageVisible=!0},showCancelMessage(){this.title="确认操作",this.message="此操作不可撤销，是否继续？",this.confirmBtn=!0,this.cancelBtn=!0,this.confirmText="继续",this.cancelText="放弃",this.overlayClose=!0,this.messageVisible=!0},showCustomMessage(){this.customMessage?(this.title=this.customTitle,this.message=this.customMessage,this.confirmBtn=!0,this.cancelBtn=this.showCancel,this.confirmText=this.customConfirmText||"确定",this.cancelText=this.customCancelText||"取消",this.overlayClose=this.closeOnOverlay,this.messageVisible=!0):alert("请输入消息内容")},showFnAlert(){T.A.alert("这是一条函数调用的提示信息","提示").then((()=>{this.result="用户点击了确定按钮",setTimeout((()=>this.result=""),2e3)})).catch((()=>{}))},showFnConfirm(){T.A.confirm("此操作将永久删除该数据, 是否继续?","警告").then((()=>{this.result="用户确认了删除操作",setTimeout((()=>this.result=""),2e3)})).catch((()=>{this.result="用户取消了删除操作",setTimeout((()=>this.result=""),2e3)}))},showFnCustom(){(0,T.A)({title:"自定义设置",message:"这是一个带有自定义设置的提示框",confirmText:"我知道了",cancelText:"关闭",cancel:!0,closeOnClickOverlay:!0}).then((()=>{this.result='用户点击了"我知道了"按钮',setTimeout((()=>this.result=""),2e3)})).catch((()=>{this.result="用户关闭了提示框",setTimeout((()=>this.result=""),2e3)}))},handleConfirm(){this.result="用户点击了「"+this.confirmText+"」按钮",this.messageVisible=!1,setTimeout((()=>{this.result=""}),2e3)},handleCancel(){this.result="用户取消了操作",this.messageVisible=!1,setTimeout((()=>{this.result=""}),2e3)}}},w=t(1241);const M=(0,w.A)(v,[["render",L],["__scopeId","data-v-735520bc"]]);var y=M}}]);
|
|
//# sourceMappingURL=120.e01d64ca.js.map
|