mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-15 14:03:36 +08:00
2 lines
10 KiB
JavaScript
2 lines
10 KiB
JavaScript
import{d as eu,a as C,ah as a,b as nu,e as lu,w as t,f as e,h as s,j as n,u as tu,W as ou,g as A,an as r,ao as F,H as d,F as b,ap as ru,aq as R,J as w}from"./index-DJO4XqnH.js";import{_ as iu}from"./formPrimitive.vue_vue_type_script_setup_true_lang-C6bc0Vy_.js";import{_ as c}from"./form.vue_vue_type_script_setup_true_lang-Jp3wbd-d.js";const su={class:"card-header"},du={class:"font-medium"},mu=eu({__name:"index",setup(Cu){function $(){r({title:"基础用法",contentRenderer:()=>e("p",null,[n("抽屉内容-基础用法")])})}function z(){r({title:"无背景遮罩层",modal:!1,contentRenderer:()=>e("p",null,[n("抽屉内容-无背景遮罩层")])})}const x=ou(()=>r({title:"延时2秒打开抽屉",openDelay:1400,contentRenderer:()=>e("p",null,[n("抽屉内容-延时2秒打开抽屉")])}),600);function P(){r({title:"延时2秒关闭抽屉",closeDelay:2e3,contentRenderer:()=>e("p",null,[n("抽屉内容-延时2秒关闭抽屉")])})}function I(){r({title:"不显示右上角关闭按钮图标",showClose:!1,contentRenderer:()=>e("p",null,[n("抽屉内容-不显示右上角关闭按钮图标")])})}function y(){r({title:"禁止通过键盘ESC关闭",closeOnPressEscape:!1,contentRenderer:()=>e("p",null,[n("抽屉内容-禁止通过键盘ESC关闭")])})}function S(){r({title:"禁止通过点击modal关闭",closeOnClickModal:!1,contentRenderer:()=>e("p",null,[n("抽屉内容-禁止通过点击modal关闭")])})}function g(){r({title:"隐藏底部取消、确定按钮",hideFooter:!0,contentRenderer:()=>e("p",null,[n("抽屉内容-隐藏底部取消、确定按钮")])})}function O(){r({title:"自定义头部",showClose:!1,headerRenderer:({close:o,titleId:u,titleClass:i})=>e("div",{class:"flex flex-row justify-between"},[e("h4",{id:u,class:i},[n("自定义头部")]),e(s("el-button"),{type:"danger",onClick:o},{default:()=>[n("关闭")]})]),contentRenderer:()=>e("p",null,[n("抽屉内容-自定义头部")])})}function T(){r({title:"自定义底部",footerRenderer:({options:o,index:u})=>e(s("el-button"),{onClick:()=>F(o,u)},{default:()=>[o.title,n("-"),u]}),contentRenderer:()=>e("p",null,[n("抽屉内容-自定义底部")])})}function N(){r({title:"自定义底部按钮",footerButtons:[{label:"按钮1",size:"small",type:"success",btnClick:({drawer:{options:o,index:u},button:i})=>{F(o,u)}},{label:"按钮2",text:!0,bg:!0,btnClick:({drawer:{options:o,index:u},button:i})=>{F(o,u)}},{label:"按钮3",size:"large",type:"warning",btnClick:({drawer:{options:o,index:u},button:i})=>{F(o,u)}}],contentRenderer:()=>e("p",null,[n("抽屉内容-自定义底部按钮")])})}function H(){r({title:"打开后的回调",open:({options:o,index:u})=>d({options:o,index:u}),contentRenderer:()=>e("p",null,[n("抽屉内容-打开后的回调")])})}function L(){r({title:"关闭后的回调",closeCallBack:({options:o,index:u,args:i})=>{let l="";(i==null?void 0:i.command)==="cancel"?l="您点击了取消按钮":(i==null?void 0:i.command)==="sure"?l="您点击了确定按钮":l="您点击了右上角关闭按钮或空白页或按下了esc键",d(l)},contentRenderer:()=>e("p",null,[n("抽屉内容-关闭后的回调")])})}function M(){r({title:"嵌套的抽屉",size:"50%",contentRenderer:({index:o})=>e(s("el-button"),{onClick:()=>r({title:`第${o+1}个子抽屉`,size:"40%",contentRenderer:({index:u})=>e(s("el-button"),{onClick:()=>r({title:`第${u+1}个子抽屉`,size:"30%",contentRenderer:()=>e(b,null,[e(s("el-button"),{round:!0,onClick:()=>ru()},{default:()=>[n("哎呦,你干嘛,赶快关闭所有抽屉")]})])})},{default:()=>[n("点击打开第"),u+1,n("个子抽屉")]})})},{default:()=>[n("点击打开第"),o+1,n("个子抽屉")]})})}function V(){const o=C(1);r({title:`第${o.value}页`,contentRenderer:()=>e(b,null,[e(s("el-button"),{disabled:o.value<=1,onClick:()=>{o.value-=1,R(`第${o.value}页`)}},{default:()=>[n("上一页")]}),e(s("el-button"),{onClick:()=>{o.value+=1,R(`第${o.value}页`)}},{default:()=>[n("下一页")]})])})}function j(){r({size:"30%",title:"Popconfirm确认框示例",popConfirm:{title:"是否确认修改当前数据"},contentRenderer:()=>e("p",null,[n("点击右下方确定按钮看看效果吧")])})}function U(){r({size:"30%",title:"结合Form表单(第一种方式)",contentRenderer:()=>c,props:{formInline:{user:"菜虚鲲",region:"浙江"}},closeCallBack:({options:o,args:u})=>{const{formInline:i}=o.props,l=`姓名:${i.user} 城市:${i.region}`;(u==null?void 0:u.command)==="cancel"?d(`您点击了取消按钮,当前表单数据为 ${l}`):(u==null?void 0:u.command)==="sure"?d(`您点击了确定按钮,当前表单数据为 ${l}`):d(`您点击了右上角关闭按钮或空白页或按下了esc键,当前表单数据为 ${l}`)}})}const f=C({user:"菜虚鲲",region:"浙江"}),W=a(f.value);function q(){r({size:"30%",title:"结合Form表单(第二种方式)",contentRenderer:()=>w(c,{formInline:f.value}),closeCallBack:()=>{d(`当前表单数据为 姓名:${f.value.user} 城市:${f.value.region}`),f.value=a(W)}})}const B=C({user:"菜虚鲲",region:"浙江"}),J=a(B.value);function G(){r({size:"30%",title:"结合Form表单(第三种方式)",contentRenderer:()=>e(c,{formInline:B.value}),closeCallBack:()=>{d(`当前表单数据为 姓名:${B.value.user} 城市:${B.value.region}`),B.value=a(J)}})}const m=C({user:"菜虚鲲",region:"浙江"}),K=a(m.value);function Q(){r({size:"30%",title:"结合Form表单(第四种方式)",contentRenderer:()=>e(c,{formInline:m.value},null),closeCallBack:()=>{d(`当前表单数据为 姓名:${m.value.user} 城市:${m.value.region}`),m.value=a(K)}})}const E=C("Hello World"),X=C(E.value);function Y(){r({size:"30%",title:"子组件 prop 为 primitive 类型 demo",contentRenderer:()=>w(iu,{data:E.value,"onUpdate:data":o=>E.value=o}),closeCallBack:()=>{d(`当前表单内容:${E.value}`),E.value=X.value}})}function Z(){r({title:"点击底部取消按钮的回调",contentRenderer:()=>e("p",null,[n("抽屉内容-点击底部取消按钮的回调(会暂停抽屉的关闭)")]),beforeCancel:(o,{options:u,index:i})=>{}})}function _(){r({title:"点击底部确定按钮的回调",contentRenderer:()=>e("p",null,[n("抽屉内容-点击底部确定按钮的回调(会暂停抽屉的关闭,经常用于新增、修改抽屉内容后调用接口)")]),beforeSure:(o,{options:u,index:i})=>{}})}function h(){r({sureBtnLoading:!0,title:"点击底部确定按钮可开启按钮动画",contentRenderer:()=>e("p",null,[n("抽屉内容-点击底部确定按钮可开启按钮动画")]),beforeSure:(o,{closeLoading:u})=>{setTimeout(()=>o(),800)}})}function p(o,u,i){r({title:o,direction:i,resizable:!0,contentRenderer:()=>e("p",{class:"text-[var(--el-color-primary)]"},[u])})}return(o,u)=>{const i=s("el-link"),l=s("el-button"),k=s("el-space"),D=s("el-divider"),uu=s("el-card");return lu(),nu(uu,{shadow:"never"},{header:t(()=>[A("div",su,[A("span",du,[u[5]||(u[5]=n(" 二次封装 Element Plus 的 ",-1)),e(i,{href:"https://element-plus.org/zh-CN/component/drawer.html",target:"_blank",style:{margin:"0 4px 5px","font-size":"16px"}},{default:t(()=>[...u[4]||(u[4]=[n(" Drawer ",-1)])]),_:1})])]),e(i,{href:"https://github.com/pure-admin/vue-pure-admin/tree/main/src/views/components/drawer",target:"_blank"},{default:t(()=>[...u[6]||(u[6]=[n(" 代码位置 src/views/components/drawer ",-1)])]),_:1})]),default:t(()=>[e(k,{wrap:""},{default:t(()=>[e(l,{onClick:$},{default:t(()=>[...u[7]||(u[7]=[n("基础用法",-1)])]),_:1}),e(l,{onClick:z},{default:t(()=>[...u[8]||(u[8]=[n(" 无背景遮罩层 ",-1)])]),_:1}),e(l,{onClick:tu(x)},{default:t(()=>[...u[9]||(u[9]=[n(" 延时2秒打开抽屉 ",-1)])]),_:1},8,["onClick"]),e(l,{onClick:P},{default:t(()=>[...u[10]||(u[10]=[n(" 延时2秒关闭抽屉 ",-1)])]),_:1}),e(l,{onClick:I},{default:t(()=>[...u[11]||(u[11]=[n(" 不显示右上角关闭按钮图标 ",-1)])]),_:1}),e(l,{onClick:y},{default:t(()=>[...u[12]||(u[12]=[n(" 禁止通过键盘ESC关闭 ",-1)])]),_:1}),e(l,{onClick:S},{default:t(()=>[...u[13]||(u[13]=[n(" 禁止通过点击modal关闭 ",-1)])]),_:1}),e(l,{onClick:g},{default:t(()=>[...u[14]||(u[14]=[n(" 隐藏底部取消、确定按钮 ",-1)])]),_:1}),e(l,{onClick:O},{default:t(()=>[...u[15]||(u[15]=[n(" 自定义头部 ",-1)])]),_:1}),e(l,{onClick:T},{default:t(()=>[...u[16]||(u[16]=[n(" 自定义底部 ",-1)])]),_:1}),e(l,{onClick:N},{default:t(()=>[...u[17]||(u[17]=[n(" 自定义底部按钮 ",-1)])]),_:1}),e(l,{onClick:H},{default:t(()=>[...u[18]||(u[18]=[n(" 打开后的回调 ",-1)])]),_:1}),e(l,{onClick:L},{default:t(()=>[...u[19]||(u[19]=[n(" 关闭后的回调 ",-1)])]),_:1}),e(l,{onClick:M},{default:t(()=>[...u[20]||(u[20]=[n(" 嵌套的抽屉 ",-1)])]),_:1}),e(l,{onClick:V},{default:t(()=>[...u[21]||(u[21]=[n(" 更改抽屉自身属性值 ",-1)])]),_:1}),e(l,{onClick:j},{default:t(()=>[...u[22]||(u[22]=[n("Popconfirm确认框",-1)])]),_:1})]),_:1}),e(D),e(k,{wrap:""},{default:t(()=>[e(l,{onClick:U},{default:t(()=>[...u[23]||(u[23]=[n(" 结合Form表单(第一种方式) ",-1)])]),_:1}),e(l,{onClick:q},{default:t(()=>[...u[24]||(u[24]=[n(" 结合Form表单(第二种方式) ",-1)])]),_:1}),e(l,{onClick:G},{default:t(()=>[...u[25]||(u[25]=[n(" 结合Form表单(第三种方式) ",-1)])]),_:1}),e(l,{onClick:Q},{default:t(()=>[...u[26]||(u[26]=[n(" 结合Form表单(第四种方式) ",-1)])]),_:1}),e(l,{onClick:Y},{default:t(()=>[...u[27]||(u[27]=[n(" 子组件 prop 为 primitive 类型 ",-1)])]),_:1})]),_:1}),e(D),e(k,{wrap:""},{default:t(()=>[e(l,{onClick:Z},{default:t(()=>[...u[28]||(u[28]=[n(" 点击底部取消按钮的回调(会暂停抽屉的关闭) ",-1)])]),_:1}),e(l,{onClick:_},{default:t(()=>[...u[29]||(u[29]=[n(" 点击底部确定按钮的回调(会暂停抽屉的关闭,经常用于新增、修改抽屉内容后调用接口) ",-1)])]),_:1}),e(l,{onClick:h},{default:t(()=>[...u[30]||(u[30]=[n(" 点击底部确定按钮可开启按钮动画 ",-1)])]),_:1})]),_:1}),e(D),e(k,{wrap:""},{default:t(()=>[e(l,{onClick:u[0]||(u[0]=v=>p("从左侧打开","拖动抽屉右侧边缘","ltr"))},{default:t(()=>[...u[31]||(u[31]=[n(" 拖拽调整大小(从左侧打开) ",-1)])]),_:1}),e(l,{onClick:u[1]||(u[1]=v=>p("从右侧打开","拖动抽屉左侧边缘","rtl"))},{default:t(()=>[...u[32]||(u[32]=[n(" 拖拽调整大小(从右侧打开) ",-1)])]),_:1}),e(l,{onClick:u[2]||(u[2]=v=>p("从顶部打开","拖动抽屉底部边缘","ttb"))},{default:t(()=>[...u[33]||(u[33]=[n(" 拖拽调整大小(从顶部打开) ",-1)])]),_:1}),e(l,{onClick:u[3]||(u[3]=v=>p("从底部打开","拖动抽屉顶部边缘","btt"))},{default:t(()=>[...u[34]||(u[34]=[n(" 拖拽调整大小(从底部打开) ",-1)])]),_:1})]),_:1})]),_:1})}}});export{mu as default};
|