import{m as l}from"./message-9ac44594.js";import{K as c,f as u,h as d,i as M}from"./index-28562d9d.js";import{_ as i}from"./form.vue_vue_type_script_setup_true_lang-ef5d82af.js";const H={class:"card-header"},K={class:"font-medium"},j=Vue.defineComponent({name:"Dialog"}),L=Vue.defineComponent({...j,setup(P){function s(){u({title:"基本使用",contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-基本使用")])})}function N(){u({title:"可拖拽",draggable:!0,contentRenderer:()=>Vue.h("p","弹框内容-可拖拽")})}function f(){u({title:"全屏",fullscreen:!0,contentRenderer:()=>Vue.createVNode("p",null,"弹框内容-全屏")})}function x(){u({title:"无背景遮罩层",modal:!1,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-无背景遮罩层")])})}function m(){u({title:"自定义弹出位置",top:"60vh",style:{marginRight:"20px"},contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-自定义弹出位置")])})}function F(){u({title:"延时2秒打开弹框",openDelay:2e3,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-延时2秒打开弹框")])})}function p(){u({title:"延时2秒关闭弹框",closeDelay:2e3,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-延时2秒关闭弹框")])})}function k(){u({title:"不显示右上角关闭按钮图标",showClose:!1,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-不显示右上角关闭按钮图标")])})}function B(){u({title:"禁止通过键盘ESC关闭",closeOnPressEscape:!1,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-禁止通过键盘ESC关闭")])})}function _(){u({title:"禁止通过点击modal关闭",closeOnClickModal:!1,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-禁止通过点击modal关闭")])})}function h(){u({title:"隐藏底部取消、确定按钮",hideFooter:!0,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-隐藏底部取消、确定按钮")])})}function E(){u({title:"自定义头部",showClose:!1,headerRenderer:({close:o,titleId:t,titleClass:n})=>Vue.createVNode("div",{class:"flex flex-row justify-between"},[Vue.createVNode("h4",{id:t,class:n},[Vue.createTextVNode("自定义头部")]),Vue.createVNode(Vue.resolveComponent("el-button"),{type:"danger",onClick:o},{default:()=>[Vue.createTextVNode("关闭")]})]),contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-自定义头部")])})}function T(){u({title:"自定义底部",footerRenderer:({options:o,index:t})=>Vue.createVNode(Vue.resolveComponent("el-button"),{onClick:()=>d(o,t)},{default:()=>[o.title,Vue.createTextVNode("-"),t]}),contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-自定义底部")])})}function w(){u({title:"自定义底部按钮",footerButtons:[{label:"按钮1",size:"small",type:"success",btnClick:({dialog:{options:o,index:t},button:n})=>{d(o,t)}},{label:"按钮2",text:!0,bg:!0,btnClick:({dialog:{options:o,index:t},button:n})=>{d(o,t)}},{label:"按钮3",size:"large",type:"warning",btnClick:({dialog:{options:o,index:t},button:n})=>{d(o,t)}}],contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-自定义底部按钮")])})}function v(){u({title:"打开后的回调",open:({options:o,index:t})=>l({options:o,index:t}),contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-打开后的回调")])})}function D(){u({title:"关闭后的回调",closeCallBack:({options:o,index:t,args:n})=>{let e="";(n==null?void 0:n.command)==="cancel"?e="您点击了取消按钮":(n==null?void 0:n.command)==="sure"?e="您点击了确定按钮":e="您点击了右上角关闭按钮或者空白页",l(e)},contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-关闭后的回调")])})}function R(){u({title:"嵌套的弹框",contentRenderer:({index:o})=>Vue.createVNode(Vue.resolveComponent("el-button"),{onClick:()=>u({title:`第${o+1}个子弹框`,width:"40%",contentRenderer:({index:t})=>Vue.createVNode(Vue.resolveComponent("el-button"),{onClick:()=>u({title:`第${t+1}个子弹框`,width:"30%",contentRenderer:()=>Vue.createVNode(Vue.Fragment,null,[Vue.createVNode(Vue.resolveComponent("el-button"),{round:!0,onClick:()=>M()},{default:()=>[Vue.createTextVNode("哎呦，你干嘛，赶快关闭所有弹框")]})])})},{default:()=>[Vue.createTextVNode("点击打开第"),t+1,Vue.createTextVNode("个子弹框")]})})},{default:()=>[Vue.createTextVNode("点击打开第"),o+1,Vue.createTextVNode("个子弹框")]})})}function A(){u({width:"30%",title:"结合Form表单（第一种方式）",contentRenderer:()=>i,props:{formInline:{user:"菜虚鲲",region:"浙江"}},closeCallBack:({options:o,args:t})=>{const{formInline:n}=o.props,e=`姓名：${n.user} 城市：${n.region}`;(t==null?void 0:t.command)==="cancel"?l(`您点击了取消按钮，当前表单数据为 ${e}`):(t==null?void 0:t.command)==="sure"?l(`您点击了确定按钮，当前表单数据为 ${e}`):l(`您点击了右上角关闭按钮或者空白页，当前表单数据为 ${e}`)}})}const r=Vue.ref({user:"菜虚鲲",region:"浙江"}),b=c(r.value);function g(){u({width:"30%",title:"结合Form表单（第二种方式）",contentRenderer:()=>Vue.h(i,{formInline:r.value}),closeCallBack:()=>{l(`当前表单数据为 姓名：${r.value.user} 城市：${r.value.region}`),r.value=c(b)}})}const V=Vue.ref({user:"菜虚鲲",region:"浙江"}),$=c(V.value);function y(){u({width:"30%",title:"结合Form表单（第三种方式）",contentRenderer:()=>Vue.createVNode(i,{formInline:V.value}),closeCallBack:()=>{l(`当前表单数据为 姓名：${V.value.user} 城市：${V.value.region}`),V.value=c($)}})}const a=Vue.ref({user:"菜虚鲲",region:"浙江"}),I=c(a.value);function O(){u({width:"30%",title:"结合Form表单（第四种方式）",contentRenderer:()=>Vue.createVNode(i,{formInline:a.value},null),closeCallBack:()=>{l(`当前表单数据为 姓名：${a.value.user} 城市：${a.value.region}`),a.value=c(I)}})}return(o,t)=>{const n=Vue.resolveComponent("el-link"),e=Vue.resolveComponent("el-button"),C=Vue.resolveComponent("el-space"),S=Vue.resolveComponent("el-divider"),z=Vue.resolveComponent("el-card");return Vue.openBlock(),Vue.createBlock(z,{shadow:"never"},{header:Vue.withCtx(()=>[Vue.createElementVNode("div",H,[Vue.createElementVNode("span",K,[Vue.createTextVNode(" 二次封装 element-plus 的 "),Vue.createVNode(n,{href:"https://element-plus.org/zh-CN/component/dialog.html",target:"_blank",style:{margin:"0 4px 5px","font-size":"16px"}},{default:Vue.withCtx(()=>[Vue.createTextVNode(" Dialog ")]),_:1}),Vue.createTextVNode(" ，采用函数式调用弹框组件 ")])])]),default:Vue.withCtx(()=>[Vue.createVNode(C,{wrap:""},{default:Vue.withCtx(()=>[Vue.createVNode(e,{onClick:s},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 基本使用 ")]),_:1}),Vue.createVNode(e,{onClick:N},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 可拖拽 ")]),_:1}),Vue.createVNode(e,{onClick:f},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 全屏 ")]),_:1}),Vue.createVNode(e,{onClick:x},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 无背景遮罩层 ")]),_:1}),Vue.createVNode(e,{onClick:m},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 自定义弹出位置 ")]),_:1}),Vue.createVNode(e,{onClick:F},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 延时2秒打开弹框 ")]),_:1}),Vue.createVNode(e,{onClick:p},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 延时2秒关闭弹框 ")]),_:1}),Vue.createVNode(e,{onClick:k},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 不显示右上角关闭按钮图标 ")]),_:1}),Vue.createVNode(e,{onClick:B},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 禁止通过键盘ESC关闭 ")]),_:1}),Vue.createVNode(e,{onClick:_},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 禁止通过点击modal关闭 ")]),_:1}),Vue.createVNode(e,{onClick:h},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 隐藏底部取消、确定按钮 ")]),_:1}),Vue.createVNode(e,{onClick:E},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 自定义头部 ")]),_:1}),Vue.createVNode(e,{onClick:T},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 自定义底部 ")]),_:1}),Vue.createVNode(e,{onClick:w},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 自定义底部按钮 ")]),_:1}),Vue.createVNode(e,{onClick:v},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 打开后的回调 ")]),_:1}),Vue.createVNode(e,{onClick:D},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 关闭后的回调 ")]),_:1}),Vue.createVNode(e,{onClick:R},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 嵌套的弹框 ")]),_:1})]),_:1}),Vue.createVNode(S),Vue.createVNode(C,{wrap:""},{default:Vue.withCtx(()=>[Vue.createVNode(e,{onClick:A},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 结合Form表单（第一种方式） ")]),_:1}),Vue.createVNode(e,{onClick:g},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 结合Form表单（第二种方式） ")]),_:1}),Vue.createVNode(e,{onClick:y},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 结合Form表单（第三种方式） ")]),_:1}),Vue.createVNode(e,{onClick:O},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 结合Form表单（第四种方式） ")]),_:1})]),_:1})]),_:1})}}});export{L as default};