demo.ff3a9aa6.js 11 KB

1
  1. var l=Object.defineProperty,n=Object.prototype.hasOwnProperty,o=Object.getOwnPropertySymbols,t=Object.prototype.propertyIsEnumerable,e=(n,o,t)=>o in n?l(n,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[o]=t,i=(l,i)=>{for(var c in i||(i={}))n.call(i,c)&&e(l,c,i[c]);if(o)for(var c of o(i))t.call(i,c)&&e(l,c,i[c]);return l};import{k as c,b as a,l as s,Y as r,w as d,o as u,c as k,f as g,i as p,e as b,g as C,T as m,m as f,n as y,F as B,E as h,t as w,d as v,U as S,a as D,A as O,G as x,r as L}from"./vendor.36ea9f7d.js";import{c as T}from"./mobile.c135e2b9.js";import"./index.d26ed273.js";const{componentName:j,create:E}=T("dialog"),F=(l=>{let n=0;return{afterOpen:function(){n=document.scrollingElement&&document.scrollingElement.scrollTop||document.body.scrollTop,document.body.classList.add(l),document.body.style.top=-n+"px"},beforeClose:function(){document.body.classList.contains(l)&&(document.body.classList.remove(l),document.scrollingElement&&(document.scrollingElement.scrollTop=n))}}})("dialog-open");var A=E({props:{visible:{type:Boolean,default:!1},id:{type:String,default:""},title:{type:String,default:""},content:{type:String,default:""},type:{type:String,default:""},link:{type:String,default:""},imgSrc:{type:String,default:""},animation:{type:Boolean,default:!0},lockBgScroll:{type:Boolean,default:!1},closeBtn:{type:Boolean,default:!1},closeOnClickModal:{type:Boolean,default:!0},noFooter:{type:Boolean,default:!1},noOkBtn:{type:Boolean,default:!1},noCancelBtn:{type:Boolean,default:!1},cancelBtnTxt:{type:String,default:"取消"},okBtnTxt:{type:String,default:"确定"},okBtnDisabled:{type:Boolean,default:!1},cancelAutoClose:{type:Boolean,default:!0},textAlign:{type:String,default:"center"},onOkBtn:{type:Function,default:null},onCloseBtn:{type:Function,default:null},onCancelBtn:{type:Function,default:null},closeCallback:{type:Function,default:null},onClickImageLink:{type:Function,default:null},maskBgStyle:{type:String,default:""},canDestroy:{type:Boolean,default:!0},customClass:{type:String,default:""},closeOnPopstate:{type:Boolean,default:!1}},setup(l,{emit:n,slots:o}){const t=c(!1);let e=c(!0);a((()=>{t.value=l.visible}));const i=s((()=>o.default)),u=()=>{l.canDestroy||(e=c(!1))},k=o=>{n("close",o),n("close-callback",o),u(),"function"==typeof l.closeCallback&&!1===l.closeCallback(o)||(t.value=!1)};a((()=>{l.closeOnPopstate&&window.addEventListener("popstate",(function(){k()}))})),r((()=>{l.lockBgScroll&&F[t.value?"afterOpen":"beforeClose"]()})),d((()=>l.visible),(l=>{t.value=l}));const g=s((()=>({[j]:!0})));return{handleClick:l=>{n("click",l)},curVisible:t,destroy:e,modalClick:()=>{l.closeOnClickModal&&k("modal")},close:k,todestroy:u,okBtnClick:()=>{n("ok-btn-click"),"function"==typeof l.onOkBtn&&l.onOkBtn.call(l)},cancelBtnClick:o=>{n("cancel-btn-click"),o&&("function"==typeof l.onCancelBtn&&!1===l.onCancelBtn.call(l)||k("cancelBtn"))},closeBtnClick:()=>{"function"==typeof l.onCloseBtn&&!1===l.onCloseBtn.call(l)||k("closeBtn")},imageLinkClick:()=>{l.onClickImageLink&&!1===l.onClickImageLink.call(l)||l.link&&(location.href=l.link)},isShowContent:i,classes:g}}});const I={class:"nut-dialog-body"},P={key:0,class:"nut-dialog-footer"};A.render=function(l,n,o,t,e,i){return u(),k("view",{class:l.classes,onClick:n[8]||(n[8]=(...n)=>l.handleClick&&l.handleClick(...n))},[l.destroy?(u(),k("div",{key:0,class:["nut-dialog-wrapper",l.customClass,{"nut-dialog-image-wrapper":"image"===l.type}],id:l.id},[g(m,{name:l.animation?"nutFade":""},{default:p((()=>[b(g("div",{class:"nut-dialog-mask",style:{background:l.maskBgStyle},onClick:n[1]||(n[1]=(...n)=>l.modalClick&&l.modalClick(...n))},null,4),[[C,l.curVisible]])])),_:1},8,["name"]),g(m,{name:l.animation?"nutEase":""},{default:p((()=>[b(g("div",{class:"nut-dialog-box",onClick:n[7]||(n[7]=(...n)=>l.modalClick&&l.modalClick(...n))},[g("div",{class:"nut-dialog",onClick:n[6]||(n[6]=f((()=>{}),["stop"]))},[l.closeBtn?(u(),k("a",{key:0,href:"javascript:;",onClick:n[2]||(n[2]=(...n)=>l.closeBtnClick&&l.closeBtnClick(...n)),class:"nut-dialog-close"})):y("",!0),"image"===l.type?(u(),k("a",{key:1,href:"javascript:;",onClick:n[3]||(n[3]=(...n)=>l.imageLinkClick&&l.imageLinkClick(...n)),class:"nut-dialog-link"},[g("img",{src:l.imgSrc,class:"nut-dialog-image",alt:""},null,8,["src"])])):(u(),k(B,{key:2},[g("div",I,[l.title?(u(),k("span",{key:0,class:"nut-dialog-title",innerHTML:l.title},null,8,["innerHTML"])):y("",!0),l.isShowContent?(u(),k("div",{key:1,class:"nut-dialog-content",style:{textAlign:l.textAlign}},[h(l.$slots,"default")],4)):l.content?(u(),k("div",{key:2,class:"nut-dialog-content",innerHTML:l.content,style:{textAlign:l.textAlign}},null,12,["innerHTML"])):y("",!0)]),l.noFooter?y("",!0):(u(),k("div",P,[l.noCancelBtn?y("",!0):(u(),k("button",{key:0,class:"nut-dialog-btn nut-dialog-cancel",onClick:n[4]||(n[4]=n=>l.cancelBtnClick(l.cancelAutoClose))},w(l.cancelBtnTxt),1)),l.noOkBtn?y("",!0):(u(),k("button",{key:1,class:["nut-dialog-btn nut-dialog-ok",{disabled:l.okBtnDisabled}],disabled:l.okBtnDisabled,onClick:n[5]||(n[5]=(...n)=>l.okBtnClick&&l.okBtnClick(...n))},w(l.okBtnTxt),11,["disabled"]))]))],64))])],512),[[C,l.curVisible]])])),_:3},8,["name"])],10,["id"])):y("",!0)],2)};const M=v(A);let H;const _=l=>{(l=l||{}).id=l.id||"nut-dialog-default-id",l.visible=!0,"image"===l.type&&void 0===l.closeBtn&&(l.closeBtn=!0),H=g(M,l);const n=document.createElement("div");S(H,n);const o=document.querySelector("#"+l.id);l.id&&o&&o.parentNode?o.parentNode.replaceChild(H.el,o):document.body.appendChild(H.el);const t=H.component.props;Object.keys(l).forEach((n=>{t[n]=l[n]}))};_.close=function(){H&&H.component.ctx.close()},_.install=function(l){l.use(A),l.config.globalProperties.$dialog=_},_.Component=A;x({}).use(_);const{createDemo:N}=T("dialog");var V=N({props:{},setup(){const l=D({dialogShow:!1,isEditor:!1,item:{}});return i(i({},O(l)),{showDialog1:function(){_({title:"确定删除此订单?",content:"删除后将从你的记录里消失,无法找回",closeOnPopstate:!0})},showDialog2:function(){_({title:"确定要加入购物车吗?"})},showDialog3:function(){_({content:"点击返回将中断注册,确定返回?<br>删除后您可以在回收站还原。",closeBtn:!0,noOkBtn:!0,cancelBtnTxt:"我知道了"})},showDialog4:function(){_({customClass:"my-dialog",title:"注册说明",content:"原账号为您本人所有,建议直接登录或找回密码。原账号内的订单资产可能丢失,可联系京东客服找回。",closeBtn:!0,noFooter:!0})},showDialog5:function(){const l={okBtnTxt:"好 的",title:"事件",content:"点击按钮触发事件",closeBtn:!0,onOkBtn(l){alert("okBtn"),_.close()},onCancelBtn(l){alert("cancelBtn")},onCloseBtn(l){alert("closeBtn")},closeCallback(l){alert("will close")}};_(l)},showDialog6:function(){_({animation:!1,title:"注册说明",canDestroy:!1,content:"原账号为您本人所有,建议直接登录或找回密码。原账号内的订单资产可能丢失,可联系京东客服找回。"})},showDialog7:function(){_({maskBgStyle:"rgba(0,0,0,0)",title:"注册说明",content:"原账号为您本人所有,建议直接登录或找回密码。原账号内的订单资产可能丢失,可联系京东客服找回。"})},showDialog8:function(){_({title:"背景滚动锁定",lockBgScroll:!0,content:"弹窗弹出后,页面滚动锁止。在窗体和遮罩层上滑动时,页面不再跟随滚动。",noOkBtn:!0,cancelBtnTxt:"我知道了",onCancelBtn(){_.close()}})},showDialog9:function(){_({title:"《桃花行》",lockBgScroll:!0,content:"桃花帘外东风软,<br>桃花帘内晨妆懒。<br>帘外桃花帘内人,<br>人与桃花隔不远。<br>东风有意揭帘栊,<br>花欲窥人帘不卷。<br>桃花帘外开仍旧,<br>帘中人比桃花瘦。<br>花解怜人花也愁,<br>隔帘消息风吹透。<br>风透帘栊花满庭,<br>庭前春色倍伤情。<br>闲苔院落帘空卷,<br>斜日栏干人自凭。<br>凭栏人向东风泣,<br>茜裙偷傍桃花立。<br>桃花桃叶乱纷纷,<br>花绽新红叶凝碧。<br>树树烟封一万株,<br>烘照楼台红模糊。<br>天机烧破鸳鸯锦,<br>春色欲酣珊瑚枕。<br>侍女金盆进水来,<br>香泉欲蘸胭脂冷。<br>胭脂鲜艳何相类,<br>花之颜色人之泪。<br>若将人泪比桃花,<br>泪自长流花自媚。<br>泪眼看花泪易乾,<br>泪乾春尽花憔悴。<br>憔悴花枝憔悴人,<br>花飞人倦易黄昏。<br>一声杜宇春归尽,<br>寂寞帘栊空月痕。",noOkBtn:!0,cancelBtnTxt:"我知道了"})},showImageDialog:function(){_({type:"image",link:"http://m.jd.com",imgSrc:"https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/4875/23/1968/285655/5b9549eeE4997a18c/070eaf5bddf26be8.jpg!q80.dpg",onClickImageLink:()=>!1})}})}});const q={class:"demo"},$=g("h2",null,"基本用法",-1),G=g("h2",null,"图片弹窗",-1),U=g("p",null," type值为“image”时为图片弹窗,需要配置一张图片,可带链接(非必须)。默认展示关闭按钮。点击图片触发onClickImageLink事件,返回false可阻止默认的跳转链接行为。 ",-1),Y=g("h2",null,"背景滚动锁定",-1),z=g("p",null,"lockBgScroll值设为true时,可在弹窗出现时锁定页面滚动,且不影响窗体内部滚动。",-1),J=g("h2",null,"高级用法",-1),K=g("p",null,"如果Dialog内容有复杂交互,可使用Dialog的标签式用法。",-1);V.render=function(l,n,o,t,e,i){const c=L("nut-cell"),a=L("nut-dialog");return u(),k("div",q,[$,g("div",null,[g(c,{"is-link":!0,"show-icon":!0,onClick:l.showDialog1,title:"自定义标题和内容"},null,8,["onClick"]),g(c,{"is-link":!0,"show-icon":!0,onClick:l.showDialog2,title:"只有标题"},null,8,["onClick"]),g(c,{"is-link":!0,"show-icon":!0,onClick:l.showDialog3,title:"只有内容"},null,8,["onClick"]),g(c,{"is-link":!0,"show-icon":!0,onClick:l.showDialog4,title:"移除按钮栏"},null,8,["onClick"]),g(c,{"is-link":!0,"show-icon":!0,onClick:l.showDialog5,title:"事件"},null,8,["onClick"]),g(c,{"is-link":!0,"show-icon":!0,onClick:l.showDialog6,title:"无弹出动效且关闭时不销毁dislog实例"},null,8,["onClick"]),g(c,{"is-link":!0,"show-icon":!0,onClick:l.showDialog7,title:"遮罩层透明"},null,8,["onClick"])]),G,U,g("div",null,[g(c,{"is-link":!0,"show-icon":!0,onClick:l.showImageDialog,title:"图片弹窗"},null,8,["onClick"])]),Y,z,g("div",null,[g(c,{"is-link":!0,"show-icon":!0,onClick:l.showDialog8,title:"背景滚动锁定"},null,8,["onClick"]),g(c,{"is-link":!0,"show-icon":!0,onClick:l.showDialog9,title:"窗体内部滚动不影响页面滚动"},null,8,["onClick"])]),J,K,g("div",null,[g(c,{"is-link":!0,"show-icon":!0,onClick:n[1]||(n[1]=n=>l.dialogShow=!0),title:"以标签形式调用Dialog"})]),g(a,{title:"标签形式调用",visible:l.dialogShow,"cancel-auto-close":!1,onOkBtnClick:n[3]||(n[3]=n=>l.dialogShow=!1),onCancelBtnClick:n[4]||(n[4]=n=>l.dialogShow=!1),onClose:n[5]||(n[5]=n=>l.dialogShow=!1)},{default:p((()=>[g("a",{href:"javascript:;",onClick:n[2]||(n[2]=n=>l.dialogShow=!1),noCancelBtn:!0},"点我可以直接关闭对话框")])),_:1},8,["visible"])])};export default V;