vue-pure-admin/dist/static/js/index-a9403ca2.js

import{m as l}from"./message-6f31e976.js";import{_ as d}from"./form.vue_vue_type_script_setup_true_lang-ef5d82af.js";import{t as c,f as o,v as G,h as s,i,j as J}from"./index-fa5d6b3f.js";const K={class:"card-header"},L={class:"font-medium"},ee=Vue.defineComponent({name:"DialogPage",__name:"index",setup(Q){const f=VueRouter.useRouter();function x(){o({title:"基本使用",contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-基本使用")])})}function F(){o({title:"可拖拽",draggable:!0,contentRenderer:()=>Vue.h("p","弹框内容-可拖拽")})}function m(){o({title:"全屏",fullscreen:!0,contentRenderer:()=>Vue.createVNode("p",null,"弹框内容-全屏")})}function p(){o({title:"全屏按钮",fullscreenIcon:!0,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-全屏按钮")])})}function E(){o({title:"无背景遮罩层",modal:!1,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-无背景遮罩层")])})}function B(){o({title:"自定义弹出位置",top:"60vh",style:{marginRight:"20px"},contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-自定义弹出位置")])})}const k=G(()=>o({title:"延时2秒打开弹框",openDelay:2e3-600,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-延时2秒打开弹框")])}),600);function h(){o({title:"延时2秒关闭弹框",closeDelay:2e3,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-延时2秒关闭弹框")])})}function T(){o({title:"不显示右上角关闭按钮图标",showClose:!1,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-不显示右上角关闭按钮图标")])})}function _(){o({title:"禁止通过键盘ESC关闭",closeOnPressEscape:!1,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-禁止通过键盘ESC关闭")])})}function w(){o({title:"禁止通过点击modal关闭",closeOnClickModal:!1,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-禁止通过点击modal关闭")])})}function v(){o({title:"隐藏底部取消、确定按钮",hideFooter:!0,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-隐藏底部取消、确定按钮")])})}function D(){o({title:"自定义头部",showClose:!1,headerRenderer:({close:u,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:u},{default:()=>[Vue.createTextVNode("关闭")]})]),contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-自定义头部")])})}function R(){o({title:"自定义底部",footerRenderer:({options:u,index:t})=>Vue.createVNode(Vue.resolveComponent("el-button"),{onClick:()=>i(u,t)},{default:()=>[u.title,Vue.createTextVNode("-"),t]}),contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-自定义底部")])})}function A(){o({title:"自定义底部按钮",footerButtons:[{label:"按钮1",size:"small",type:"success",btnClick:({dialog:{options:u,index:t},button:n})=>{i(u,t)}},{label:"按钮2",text:!0,bg:!0,btnClick:({dialog:{options:u,index:t},button:n})=>{i(u,t)}},{label:"按钮3",size:"large",type:"warning",btnClick:({dialog:{options:u,index:t},button:n})=>{i(u,t)}}],contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-自定义底部按钮")])})}function b(){o({title:"打开后的回调",open:({options:u,index:t})=>l({options:u,index:t}),contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-打开后的回调")])})}function g(){o({title:"关闭后的回调",closeCallBack:({options:u,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 $(){o({title:"嵌套的弹框",contentRenderer:({index:u})=>Vue.createVNode(Vue.resolveComponent("el-button"),{onClick:()=>o({title:`第${u+1}个子弹框`,width:"40%",contentRenderer:({index:t})=>Vue.createVNode(Vue.resolveComponent("el-button"),{onClick:()=>o({title:`第${t+1}个子弹框`,width:"30%",contentRenderer:()=>Vue.createVNode(Vue.Fragment,null,[Vue.createVNode(Vue.resolveComponent("el-button"),{round:!0,onClick:()=>J()},{default:()=>[Vue.createTextVNode("哎呦，你干嘛，赶快关闭所有弹框")]})])})},{default:()=>[Vue.createTextVNode("点击打开第"),t+1,Vue.createTextVNode("个子弹框")]})})},{default:()=>[Vue.createTextVNode("点击打开第"),u+1,Vue.createTextVNode("个子弹框")]})})}function I(){const u=Vue.ref(1);o({title:`第${u.value}页`,contentRenderer:()=>Vue.createVNode(Vue.Fragment,null,[Vue.createVNode(Vue.resolveComponent("el-button"),{disabled:!(u.value>1),onClick:()=>{u.value-=1,s(`第${u.value}页`)}},{default:()=>[Vue.createTextVNode("上一页")]}),Vue.createVNode(Vue.resolveComponent("el-button"),{onClick:()=>{u.value+=1,s(`第${u.value}页`)}},{default:()=>[Vue.createTextVNode("下一页")]})])})}function y(){o({width:"30%",title:"结合Form表单（第一种方式）",contentRenderer:()=>d,props:{formInline:{user:"菜虚鲲",region:"浙江"}},closeCallBack:({options:u,args:t})=>{const{formInline:n}=u.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:"浙江"}),S=c(r.value);function O(){o({width:"30%",title:"结合Form表单（第二种方式）",contentRenderer:()=>Vue.h(d,{formInline:r.value}),closeCallBack:()=>{l(`当前表单数据为 姓名：${r.value.user} 城市：${r.value.region}`),r.value=c(S)}})}const V=Vue.ref({user:"菜虚鲲",region:"浙江"}),z=c(V.value);function M(){o({width:"30%",title:"结合Form表单（第三种方式）",contentRenderer:()=>Vue.createVNode(d,{formInline:V.value}),closeCallBack:()=>{l(`当前表单数据为 姓名：${V.value.user} 城市：${V.value.region}`),V.value=c(z)}})}const a=Vue.ref({user:"菜虚鲲",region:"浙江"}),P=c(a.value);function j(){o({width:"30%",title:"结合Form表单（第四种方式）",contentRenderer:()=>Vue.createVNode(d,{formInline:a.value},null),closeCallBack:()=>{l(`当前表单数据为 姓名：${a.value.user} 城市：${a.value.region}`),a.value=c(P)}})}function H(){o({title:"点击底部取消按钮的回调",contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-点击底部取消按钮的回调（会暂停弹框的关闭）")]),beforeCancel:(u,{options:t,index:n})=>{}})}function U(){o({title:"点击底部确定按钮的回调",contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口）")]),beforeSure:(u,{options:t,index:n})=>{}})}return(u,t)=>{const n=Vue.resolveComponent("el-link"),e=Vue.resolveComponent("el-button"),C=Vue.resolveComponent("el-space"),N=Vue.resolveComponent("el-divider"),q=Vue.resolveComponent("el-card");return Vue.openBlock(),Vue.createBlock(q,{shadow:"never"},{header:Vue.withCtx(()=>[Vue.createElementVNode("div",K,[Vue.createElementVNode("span",L,[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(" ，采用函数式调用弹框组件（更多操作实例请参考 "),Vue.createElementVNode("span",{class:"cursor-pointer text-primary",onClick:t[0]||(t[0]=W=>Vue.unref(f).push({name:"Dept"}))},"系统管理页面"),Vue.createTextVNode(" ） ")])])]),default:Vue.withCtx(()=>[Vue.createVNode(C,{wrap:""},{default:Vue.withCtx(()=>[Vue.createVNode(e,{onClick:x},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 基本使用 ")]),_:1}),Vue.createVNode(e,{onClick:F},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 可拖拽 ")]),_:1}),Vue.createVNode(e,{onClick:m},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 全屏 ")]),_:1}),Vue.createVNode(e,{onClick:p},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 全屏按钮 ")]),_:1}),Vue.createVNode(e,{onClick:E},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 无背景遮罩层 ")]),_:1}),Vue.createVNode(e,{onClick:B},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 自定义弹出位置 ")]),_:1}),Vue.createVNode(e,{onClick:Vue.unref(k)},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 延时2秒打开弹框 ")]),_:1},8,["onClick"]),Vue.createVNode(e,{onClick:h},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 延时2秒关闭弹框 ")]),_:1}),Vue.createVNode(e,{onClick:T},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 不显示右上角关闭按钮图标 ")]),_:1}),Vue.createVNode(e,{onClick:_},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 禁止通过键盘ESC关闭 ")]),_:1}),Vue.createVNode(e,{onClick:w},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 禁止通过点击modal关闭 ")]),_: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}),Vue.createVNode(e,{onClick:A},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 自定义底部按钮 ")]),_:1}),Vue.createVNode(e,{onClick:b},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 打开后的回调 ")]),_:1}),Vue.createVNode(e,{onClick:g},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 关闭后的回调 ")]),_:1}),Vue.createVNode(e,{onClick:$},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 嵌套的弹框 ")]),_:1}),Vue.createVNode(e,{onClick:I},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 更改弹框自身属性值 ")]),_:1})]),_:1}),Vue.createVNode(N),Vue.createVNode(C,{wrap:""},{default:Vue.withCtx(()=>[Vue.createVNode(e,{onClick:y},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 结合Form表单（第一种方式） ")]),_:1}),Vue.createVNode(e,{onClick:O},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 结合Form表单（第二种方式） ")]),_:1}),Vue.createVNode(e,{onClick:M},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 结合Form表单（第三种方式） ")]),_:1}),Vue.createVNode(e,{onClick:j},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 结合Form表单（第四种方式） ")]),_:1})]),_:1}),Vue.createVNode(N),Vue.createVNode(C,{wrap:""},{default:Vue.withCtx(()=>[Vue.createVNode(e,{onClick:H},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 点击底部取消按钮的回调（会暂停弹框的关闭） ")]),_:1}),Vue.createVNode(e,{onClick:U},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口） ")]),_:1})]),_:1})]),_:1})}}});export{ee as default};