demo.ae34cb2c.js 6.0 KB

1
  1. var o=Object.assign;import{d as l,f as n,Z as i,a as t,z as c,E as e,r as s,o as a,c as r,i as g}from"./vendor.91b30fe3.js";import{_ as b,c as k}from"./mobile.c3875bc0.js";import"./index.00b2b72d.js";const u=l(b);let d;const h=o=>{(o=o||{}).id=o.id||"nut-dialog-default-id",o.visible=!0,"image"===o.type&&void 0===o.closeBtn&&(o.closeBtn=!0),d=n(u,o);const l=document.createElement("div");i(d,l);const t=document.querySelector("#"+o.id);o.id&&t&&t.parentNode?t.parentNode.replaceChild(d.el,t):document.body.appendChild(d.el);const c=d.component.props;Object.keys(o).forEach((l=>{c[l]=o[l]}))};h.close=function(){d&&d.component.ctx.close()},h.install=function(o){o.use(b),o.config.globalProperties.$dialog=h},h.Component=b;e({}).use(h);const{createDemo:w}=k("dialog");var C=w({props:{},setup(){const l=t({dialogShow:!1,isEditor:!1,item:{}});return o(o({},c(l)),{showDialog1:function(){h({title:"确定删除此订单?",content:"删除后将从你的记录里消失,无法找回",closeOnPopstate:!0})},showDialog2:function(){h({title:"确定要加入购物车吗?"})},showDialog3:function(){h({content:"点击返回将中断注册,确定返回?<br>删除后您可以在回收站还原。",closeBtn:!0,noOkBtn:!0,cancelBtnTxt:"我知道了"})},showDialog4:function(){h({customClass:"my-dialog",title:"注册说明",content:"原账号为您本人所有,建议直接登录或找回密码。原账号内的订单资产可能丢失,可联系京东客服找回。",closeBtn:!0,noFooter:!0})},showDialog5:function(){const o={okBtnTxt:"好 的",title:"事件",content:"点击按钮触发事件",closeBtn:!0,onOkBtn(o){alert("okBtn"),h.close()},onCancelBtn(o){alert("cancelBtn")},onCloseBtn(o){alert("closeBtn")},closeCallback(o){alert("will close")}};h(o)},showDialog6:function(){h({animation:!1,title:"注册说明",canDestroy:!1,content:"原账号为您本人所有,建议直接登录或找回密码。原账号内的订单资产可能丢失,可联系京东客服找回。"})},showDialog7:function(){h({maskBgStyle:"rgba(0,0,0,0)",title:"注册说明",content:"原账号为您本人所有,建议直接登录或找回密码。原账号内的订单资产可能丢失,可联系京东客服找回。"})},showDialog8:function(){h({title:"背景滚动锁定",lockBgScroll:!0,content:"弹窗弹出后,页面滚动锁止。在窗体和遮罩层上滑动时,页面不再跟随滚动。",noOkBtn:!0,cancelBtnTxt:"我知道了",onCancelBtn(){h.close()}})},showDialog9:function(){h({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(){h({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 m={class:"demo-list"},p=n("h4",null,"基本用法",-1),f=n("h4",null,"图片弹窗",-1),B=n("p",null," type值为“image”时为图片弹窗,需要配置一张图片,可带链接(非必须)。默认展示关闭按钮。点击图片触发onClickImageLink事件,返回false可阻止默认的跳转链接行为。 ",-1),D=n("h4",null,"背景滚动锁定",-1),v=n("p",null,"lockBgScroll值设为true时,可在弹窗出现时锁定页面滚动,且不影响窗体内部滚动。",-1),S=n("h4",null,"高级用法",-1),y=n("p",null,"如果Dialog内容有复杂交互,可使用Dialog的标签式用法。",-1);C.render=function(o,l,i,t,c,e){const b=s("nut-cell"),k=s("nut-dialog");return a(),r("div",m,[p,n("div",null,[n(b,{"is-link":!0,"show-icon":!0,onClick:o.showDialog1,title:"自定义标题和内容"},null,8,["onClick"]),n(b,{"is-link":!0,"show-icon":!0,onClick:o.showDialog2,title:"只有标题"},null,8,["onClick"]),n(b,{"is-link":!0,"show-icon":!0,onClick:o.showDialog3,title:"只有内容"},null,8,["onClick"]),n(b,{"is-link":!0,"show-icon":!0,onClick:o.showDialog4,title:"移除按钮栏"},null,8,["onClick"]),n(b,{"is-link":!0,"show-icon":!0,onClick:o.showDialog5,title:"事件"},null,8,["onClick"]),n(b,{"is-link":!0,"show-icon":!0,onClick:o.showDialog6,title:"无弹出动效且关闭时不销毁dislog实例"},null,8,["onClick"]),n(b,{"is-link":!0,"show-icon":!0,onClick:o.showDialog7,title:"遮罩层透明"},null,8,["onClick"])]),f,B,n("div",null,[n(b,{"is-link":!0,"show-icon":!0,onClick:o.showImageDialog,title:"图片弹窗"},null,8,["onClick"])]),D,v,n("div",null,[n(b,{"is-link":!0,"show-icon":!0,onClick:o.showDialog8,title:"背景滚动锁定"},null,8,["onClick"]),n(b,{"is-link":!0,"show-icon":!0,onClick:o.showDialog9,title:"窗体内部滚动不影响页面滚动"},null,8,["onClick"])]),S,y,n("div",null,[n(b,{"is-link":!0,"show-icon":!0,onClick:l[1]||(l[1]=l=>o.dialogShow=!0),title:"以标签形式调用Dialog"})]),n(k,{title:"标签形式调用",visible:o.dialogShow,"cancel-auto-close":!1,onOkBtnClick:l[3]||(l[3]=l=>o.dialogShow=!1),onCancelBtnClick:l[4]||(l[4]=l=>o.dialogShow=!1),onClose:l[5]||(l[5]=l=>o.dialogShow=!1)},{default:g((()=>[n("a",{href:"javascript:;",onClick:l[2]||(l[2]=l=>o.dialogShow=!1),noCancelBtn:!0},"点我可以直接关闭对话框")])),_:1},8,["visible"])])};export default C;