mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-08 01:17:23 +08:00
2 lines
10 KiB
JavaScript
2 lines
10 KiB
JavaScript
import{m as l}from"./message-9ae1daa3.js";import{K as r,f as t,h as d,i as K}from"./index-c61a73ff.js";import{_ as i}from"./form.vue_vue_type_script_setup_true_lang-ef5d82af.js";const j={class:"card-header"},P={class:"font-medium"},U=Vue.defineComponent({name:"Dialog",__name:"index",setup(q){function s(){t({title:"基本使用",contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-基本使用")])})}function f(){t({title:"可拖拽",draggable:!0,contentRenderer:()=>Vue.h("p","弹框内容-可拖拽")})}function F(){t({title:"全屏",fullscreen:!0,contentRenderer:()=>Vue.createVNode("p",null,"弹框内容-全屏")})}function x(){t({title:"无背景遮罩层",modal:!1,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-无背景遮罩层")])})}function m(){t({title:"自定义弹出位置",top:"60vh",style:{marginRight:"20px"},contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-自定义弹出位置")])})}function p(){t({title:"延时2秒打开弹框",openDelay:2e3,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-延时2秒打开弹框")])})}function B(){t({title:"延时2秒关闭弹框",closeDelay:2e3,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-延时2秒关闭弹框")])})}function E(){t({title:"不显示右上角关闭按钮图标",showClose:!1,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-不显示右上角关闭按钮图标")])})}function k(){t({title:"禁止通过键盘ESC关闭",closeOnPressEscape:!1,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-禁止通过键盘ESC关闭")])})}function h(){t({title:"禁止通过点击modal关闭",closeOnClickModal:!1,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-禁止通过点击modal关闭")])})}function _(){t({title:"隐藏底部取消、确定按钮",hideFooter:!0,contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-隐藏底部取消、确定按钮")])})}function T(){t({title:"自定义头部",showClose:!1,headerRenderer:({close:o,titleId:u,titleClass:n})=>Vue.createVNode("div",{class:"flex flex-row justify-between"},[Vue.createVNode("h4",{id:u,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 w(){t({title:"自定义底部",footerRenderer:({options:o,index:u})=>Vue.createVNode(Vue.resolveComponent("el-button"),{onClick:()=>d(o,u)},{default:()=>[o.title,Vue.createTextVNode("-"),u]}),contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-自定义底部")])})}function D(){t({title:"自定义底部按钮",footerButtons:[{label:"按钮1",size:"small",type:"success",btnClick:({dialog:{options:o,index:u},button:n})=>{d(o,u)}},{label:"按钮2",text:!0,bg:!0,btnClick:({dialog:{options:o,index:u},button:n})=>{d(o,u)}},{label:"按钮3",size:"large",type:"warning",btnClick:({dialog:{options:o,index:u},button:n})=>{d(o,u)}}],contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-自定义底部按钮")])})}function v(){t({title:"打开后的回调",open:({options:o,index:u})=>l({options:o,index:u}),contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-打开后的回调")])})}function R(){t({title:"关闭后的回调",closeCallBack:({options:o,index:u,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 A(){t({title:"嵌套的弹框",contentRenderer:({index:o})=>Vue.createVNode(Vue.resolveComponent("el-button"),{onClick:()=>t({title:`第${o+1}个子弹框`,width:"40%",contentRenderer:({index:u})=>Vue.createVNode(Vue.resolveComponent("el-button"),{onClick:()=>t({title:`第${u+1}个子弹框`,width:"30%",contentRenderer:()=>Vue.createVNode(Vue.Fragment,null,[Vue.createVNode(Vue.resolveComponent("el-button"),{round:!0,onClick:()=>K()},{default:()=>[Vue.createTextVNode("哎呦，你干嘛，赶快关闭所有弹框")]})])})},{default:()=>[Vue.createTextVNode("点击打开第"),u+1,Vue.createTextVNode("个子弹框")]})})},{default:()=>[Vue.createTextVNode("点击打开第"),o+1,Vue.createTextVNode("个子弹框")]})})}function b(){t({width:"30%",title:"结合Form表单（第一种方式）",contentRenderer:()=>i,props:{formInline:{user:"菜虚鲲",region:"浙江"}},closeCallBack:({options:o,args:u})=>{const{formInline:n}=o.props,e=`姓名：${n.user} 城市：${n.region}`;(u==null?void 0:u.command)==="cancel"?l(`您点击了取消按钮，当前表单数据为 ${e}`):(u==null?void 0:u.command)==="sure"?l(`您点击了确定按钮，当前表单数据为 ${e}`):l(`您点击了右上角关闭按钮或者空白页，当前表单数据为 ${e}`)}})}const c=Vue.ref({user:"菜虚鲲",region:"浙江"}),$=r(c.value);function g(){t({width:"30%",title:"结合Form表单（第二种方式）",contentRenderer:()=>Vue.h(i,{formInline:c.value}),closeCallBack:()=>{l(`当前表单数据为 姓名：${c.value.user} 城市：${c.value.region}`),c.value=r($)}})}const V=Vue.ref({user:"菜虚鲲",region:"浙江"}),y=r(V.value);function I(){t({width:"30%",title:"结合Form表单（第三种方式）",contentRenderer:()=>Vue.createVNode(i,{formInline:V.value}),closeCallBack:()=>{l(`当前表单数据为 姓名：${V.value.user} 城市：${V.value.region}`),V.value=r(y)}})}const a=Vue.ref({user:"菜虚鲲",region:"浙江"}),S=r(a.value);function O(){t({width:"30%",title:"结合Form表单（第四种方式）",contentRenderer:()=>Vue.createVNode(i,{formInline:a.value},null),closeCallBack:()=>{l(`当前表单数据为 姓名：${a.value.user} 城市：${a.value.region}`),a.value=r(S)}})}function z(){t({title:"点击底部取消按钮的回调",contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-点击底部取消按钮的回调（会暂停弹框的关闭）")]),beforeCancel:(o,{options:u,index:n})=>{}})}function M(){t({title:"点击底部确定按钮的回调",contentRenderer:()=>Vue.createVNode("p",null,[Vue.createTextVNode("弹框内容-点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口）")]),beforeSure:(o,{options:u,index:n})=>{}})}return(o,u)=>{const n=Vue.resolveComponent("el-link"),e=Vue.resolveComponent("el-button"),C=Vue.resolveComponent("el-space"),N=Vue.resolveComponent("el-divider"),H=Vue.resolveComponent("el-card");return Vue.openBlock(),Vue.createBlock(H,{shadow:"never"},{header:Vue.withCtx(()=>[Vue.createElementVNode("div",j,[Vue.createElementVNode("span",P,[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:u[0]||(u[0]=G=>o.$router.push({name:"Dept"}))},"系统管理页面"),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:f},{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:p},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 延时2秒打开弹框 ")]),_:1}),Vue.createVNode(e,{onClick:B},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 延时2秒关闭弹框 ")]),_:1}),Vue.createVNode(e,{onClick:E},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 不显示右上角关闭按钮图标 ")]),_:1}),Vue.createVNode(e,{onClick:k},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 禁止通过键盘ESC关闭 ")]),_:1}),Vue.createVNode(e,{onClick:h},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 禁止通过点击modal关闭 ")]),_:1}),Vue.createVNode(e,{onClick:_},{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:D},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 自定义底部按钮 ")]),_:1}),Vue.createVNode(e,{onClick:v},{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})]),_:1}),Vue.createVNode(N),Vue.createVNode(C,{wrap:""},{default:Vue.withCtx(()=>[Vue.createVNode(e,{onClick:b},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 结合Form表单（第一种方式） ")]),_:1}),Vue.createVNode(e,{onClick:g},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 结合Form表单（第二种方式） ")]),_:1}),Vue.createVNode(e,{onClick:I},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 结合Form表单（第三种方式） ")]),_:1}),Vue.createVNode(e,{onClick:O},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 结合Form表单（第四种方式） ")]),_:1})]),_:1}),Vue.createVNode(N),Vue.createVNode(C,{wrap:""},{default:Vue.withCtx(()=>[Vue.createVNode(e,{onClick:z},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 点击底部取消按钮的回调（会暂停弹框的关闭） ")]),_:1}),Vue.createVNode(e,{onClick:M},{default:Vue.withCtx(()=>[Vue.createTextVNode(" 点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口） ")]),_:1})]),_:1})]),_:1})}}});export{U as default};
|