import{d as le,ae as te,r as d,af as s,c as oe,w as t,e as r,f as ie,g as p,h as u,i as e,u as D,ag as i,Y as ce,ah as R,F as A,D as _,A as a,ai as k,aj as re}from"./index-CuWJll_k.js";import{_ as ae}from"./formPrimitive.vue_vue_type_script_setup_true_lang-Dx-KSCd8.js";import{_ as m}from"./form.vue_vue_type_script_setup_true_lang-Buelno3B.js";const de={class:"card-header"},se={class:"font-medium"},me=le({name:"DialogPage",__name:"index",setup(Ce){const h=te();function b(){i({title:"基础用法",contentRenderer:()=>e("p",null,[u("弹框内容-基础用法")])})}function g(){i({title:"可拖拽",draggable:!0,contentRenderer:()=>_("p","弹框内容-可拖拽")})}function w(){i({title:"全屏",fullscreen:!0,contentRenderer:()=>e("p",null,"弹框内容-全屏")})}function $(){i({title:"全屏按钮和全屏事件",fullscreenIcon:!0,fullscreenCallBack:({options:l,index:o})=>a(l.fullscreen?"全屏":"非全屏"),contentRenderer:()=>e("p",null,[u("弹框内容-全屏按钮和全屏事件")])})}function x(){i({title:"无背景遮罩层",modal:!1,contentRenderer:()=>e("p",null,[u("弹框内容-无背景遮罩层")])})}function y(){i({title:"自定义弹出位置",top:"60vh",style:{marginRight:"20px"},contentRenderer:()=>e("p",null,[u("弹框内容-自定义弹出位置")])})}const I=ce(()=>i({title:"延时2秒打开弹框",openDelay:1400,contentRenderer:()=>e("p",null,[u("弹框内容-延时2秒打开弹框")])}),600);function P(){i({title:"延时2秒关闭弹框",closeDelay:2e3,contentRenderer:()=>e("p",null,[u("弹框内容-延时2秒关闭弹框")])})}function S(){i({title:"不显示右上角关闭按钮图标",showClose:!1,contentRenderer:()=>e("p",null,[u("弹框内容-不显示右上角关闭按钮图标")])})}function O(){i({title:"禁止通过键盘ESC关闭",closeOnPressEscape:!1,contentRenderer:()=>e("p",null,[u("弹框内容-禁止通过键盘ESC关闭")])})}function N(){i({title:"禁止通过点击modal关闭",closeOnClickModal:!1,contentRenderer:()=>e("p",null,[u("弹框内容-禁止通过点击modal关闭")])})}function T(){i({title:"隐藏底部取消、确定按钮",hideFooter:!0,contentRenderer:()=>e("p",null,[u("弹框内容-隐藏底部取消、确定按钮")])})}function z(){i({title:"自定义头部",showClose:!1,headerRenderer:({close:l,titleId:o,titleClass:c})=>e("div",{class:"flex flex-row justify-between"},[e("h4",{id:o,class:c},[u("自定义头部")]),e(r("el-button"),{type:"danger",onClick:l},{default:()=>[u("关闭")]})]),contentRenderer:()=>e("p",null,[u("弹框内容-自定义头部")])})}function H(){i({title:"自定义底部",footerRenderer:({options:l,index:o})=>e(r("el-button"),{onClick:()=>k(l,o)},{default:()=>[l.title,u("-"),o]}),contentRenderer:()=>e("p",null,[u("弹框内容-自定义底部")])})}function M(){i({title:"自定义底部按钮",footerButtons:[{label:"按钮1",size:"small",type:"success",btnClick:({dialog:{options:l,index:o},button:c})=>{k(l,o)}},{label:"按钮2",text:!0,bg:!0,btnClick:({dialog:{options:l,index:o},button:c})=>{k(l,o)}},{label:"按钮3",size:"large",type:"warning",btnClick:({dialog:{options:l,index:o},button:c})=>{k(l,o)}}],contentRenderer:()=>e("p",null,[u("弹框内容-自定义底部按钮")])})}function V(){i({title:"打开后的回调",open:({options:l,index:o})=>a({options:l,index:o}),contentRenderer:()=>e("p",null,[u("弹框内容-打开后的回调")])})}function j(){i({title:"关闭后的回调",closeCallBack:({options:l,index:o,args:c})=>{let n="";(c==null?void 0:c.command)==="cancel"?n="您点击了取消按钮":(c==null?void 0:c.command)==="sure"?n="您点击了确定按钮":n="您点击了右上角关闭按钮或空白页或按下了esc键",a(n)},contentRenderer:()=>e("p",null,[u("弹框内容-关闭后的回调")])})}function U(){i({title:"嵌套的弹框",contentRenderer:({index:l})=>e(r("el-button"),{onClick:()=>i({title:`第${l+1}个子弹框`,width:"40%",contentRenderer:({index:o})=>e(r("el-button"),{onClick:()=>i({title:`第${o+1}个子弹框`,width:"30%",contentRenderer:()=>e(A,null,[e(r("el-button"),{round:!0,onClick:()=>re()},{default:()=>[u("哎呦，你干嘛，赶快关闭所有弹框")]})])})},{default:()=>[u("点击打开第"),o+1,u("个子弹框")]})})},{default:()=>[u("点击打开第"),l+1,u("个子弹框")]})})}function W(){const l=d(1);i({title:`第${l.value}页`,contentRenderer:()=>e(A,null,[e(r("el-button"),{disabled:!(l.value>1),onClick:()=>{l.value-=1,R(`第${l.value}页`)}},{default:()=>[u("上一页")]}),e(r("el-button"),{onClick:()=>{l.value+=1,R(`第${l.value}页`)}},{default:()=>[u("下一页")]})])})}function Y(){i({width:"30%",title:"结合Form表单（第一种方式）",contentRenderer:()=>m,props:{formInline:{user:"菜虚鲲",region:"浙江"}},closeCallBack:({options:l,args:o})=>{const{formInline:c}=l.props,n=`姓名：${c.user} 城市：${c.region}`;(o==null?void 0:o.command)==="cancel"?a(`您点击了取消按钮，当前表单数据为 ${n}`):(o==null?void 0:o.command)==="sure"?a(`您点击了确定按钮，当前表单数据为 ${n}`):a(`您点击了右上角关闭按钮或空白页或按下了esc键，当前表单数据为 ${n}`)}})}const C=d({user:"菜虚鲲",region:"浙江"}),q=s(C.value);function G(){i({width:"30%",title:"结合Form表单（第二种方式）",contentRenderer:()=>_(m,{formInline:C.value}),closeCallBack:()=>{a(`当前表单数据为 姓名：${C.value.user} 城市：${C.value.region}`),C.value=s(q)}})}const f=d({user:"菜虚鲲",region:"浙江"}),J=s(f.value);function K(){i({width:"30%",title:"结合Form表单（第三种方式）",contentRenderer:()=>e(m,{formInline:f.value}),closeCallBack:()=>{a(`当前表单数据为 姓名：${f.value.user} 城市：${f.value.region}`),f.value=s(J)}})}const F=d({user:"菜虚鲲",region:"浙江"}),L=s(F.value);function Q(){i({width:"30%",title:"结合Form表单（第四种方式）",contentRenderer:()=>e(m,{formInline:F.value},null),closeCallBack:()=>{a(`当前表单数据为 姓名：${F.value.user} 城市：${F.value.region}`),F.value=s(L)}})}const B=d("Hello World"),X=d(B.value);function Z(){i({width:"30%",title:"子组件 prop 为 primitive 类型 demo",contentRenderer:()=>_(ae,{data:B.value,"onUpdate:data":l=>B.value=l}),closeCallBack:()=>{a(`当前表单内容：${B.value}`),B.value=X.value}})}function ee(){i({title:"点击底部取消按钮的回调",contentRenderer:()=>e("p",null,[u("弹框内容-点击底部取消按钮的回调（会暂停弹框的关闭）")]),beforeCancel:(l,{options:o,index:c})=>{}})}function ue(){i({title:"点击底部确定按钮的回调",contentRenderer:()=>e("p",null,[u("弹框内容-点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、修改弹框内容后调用接口）")]),beforeSure:(l,{options:o,index:c})=>{}})}return(l,o)=>{const c=r("el-link"),n=r("el-button"),E=r("el-space"),v=r("el-divider"),ne=r("el-card");return ie(),oe(ne,{shadow:"never"},{header:t(()=>[p("div",de,[p("span",se,[u(" 二次封装 element-plus 的 "),e(c,{href:"https://element-plus.org/zh-CN/component/dialog.html",target:"_blank",style:{margin:"0 4px 5px","font-size":"16px"}},{default:t(()=>[u(" Dialog ")]),_:1}),u(" ，采用函数式调用弹框组件（更多操作实例请参考 "),p("span",{class:"cursor-pointer text-primary",onClick:o[0]||(o[0]=fe=>D(h).push({name:"SystemDept"}))}," 系统管理页面 "),u(" ） ")])])]),default:t(()=>[e(E,{wrap:""},{default:t(()=>[e(n,{onClick:b},{default:t(()=>[u(" 基础用法 ")]),_:1}),e(n,{onClick:g},{default:t(()=>[u(" 可拖拽 ")]),_:1}),e(n,{onClick:w},{default:t(()=>[u(" 全屏 ")]),_:1}),e(n,{onClick:$},{default:t(()=>[u(" 全屏按钮和全屏事件 ")]),_:1}),e(n,{onClick:x},{default:t(()=>[u(" 无背景遮罩层 ")]),_:1}),e(n,{onClick:y},{default:t(()=>[u(" 自定义弹出位置 ")]),_:1}),e(n,{onClick:D(I)},{default:t(()=>[u(" 延时2秒打开弹框 ")]),_:1},8,["onClick"]),e(n,{onClick:P},{default:t(()=>[u(" 延时2秒关闭弹框 ")]),_:1}),e(n,{onClick:S},{default:t(()=>[u(" 不显示右上角关闭按钮图标 ")]),_:1}),e(n,{onClick:O},{default:t(()=>[u(" 禁止通过键盘ESC关闭 ")]),_:1}),e(n,{onClick:N},{default:t(()=>[u(" 禁止通过点击modal关闭 ")]),_:1}),e(n,{onClick:T},{default:t(()=>[u(" 隐藏底部取消、确定按钮 ")]),_:1}),e(n,{onClick:z},{default:t(()=>[u(" 自定义头部 ")]),_:1}),e(n,{onClick:H},{default:t(()=>[u(" 自定义底部 ")]),_:1}),e(n,{onClick:M},{default:t(()=>[u(" 自定义底部按钮 ")]),_:1}),e(n,{onClick:V},{default:t(()=>[u(" 打开后的回调 ")]),_:1}),e(n,{onClick:j},{default:t(()=>[u(" 关闭后的回调 ")]),_:1}),e(n,{onClick:U},{default:t(()=>[u(" 嵌套的弹框 ")]),_:1}),e(n,{onClick:W},{default:t(()=>[u(" 更改弹框自身属性值 ")]),_:1})]),_:1}),e(v),e(E,{wrap:""},{default:t(()=>[e(n,{onClick:Y},{default:t(()=>[u(" 结合Form表单（第一种方式） ")]),_:1}),e(n,{onClick:G},{default:t(()=>[u(" 结合Form表单（第二种方式） ")]),_:1}),e(n,{onClick:K},{default:t(()=>[u(" 结合Form表单（第三种方式） ")]),_:1}),e(n,{onClick:Q},{default:t(()=>[u(" 结合Form表单（第四种方式） ")]),_:1}),e(n,{onClick:Z},{default:t(()=>[u(" 子组件 prop 为 primitive 类型 ")]),_:1})]),_:1}),e(v),e(E,{wrap:""},{default:t(()=>[e(n,{onClick:ee},{default:t(()=>[u(" 点击底部取消按钮的回调（会暂停弹框的关闭） ")]),_:1}),e(n,{onClick:ue},{default:t(()=>[u(" 点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、修改弹框内容后调用接口） ")]),_:1})]),_:1})]),_:1})}}});export{me as default};