doc_project/3x.antv.design/assets/index.97b033c8.js

import{d as y,r as A,_ as v,l as h,w as s,j as p,k as b,f as o,e as a,b as n,a as B,t as P,F as H,$ as R,z as f,P as V,J,q as D}from"./index.3fe853a6.js";const x=y({setup(){const e=A(!1);return{visible:e,afterVisibleChange:r=>{console.log("visible",r)},showDrawer:()=>{e.value=!0}}}});function L(e,t,i,r,I,w){const c=p("a-button"),g=p("a-drawer"),d=p("demo-box");return b(),h(d,{jsfiddle:{us:"Basic drawer.",cn:"\u57FA\u7840\u62BD\u5C49\uFF0C\u70B9\u51FB\u89E6\u53D1\u6309\u94AE\u62BD\u5C49\u4ECE\u53F3\u6ED1\u51FA\uFF0C\u70B9\u51FB\u906E\u7F69\u533A\u5173\u95ED\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u57FA\u7840\u62BD\u5C49\uFF0C\u70B9\u51FB\u89E6\u53D1\u6309\u94AE\u62BD\u5C49\u4ECE\u53F3\u6ED1\u51FA\uFF0C\u70B9\u51FB\u906E\u7F69\u533A\u5173\u95ED\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Basic drawer.</p>
`,order:0,title:{"zh-CN":"\u57FA\u672C\u7528\u6CD5","en-US":"Basic usage"},relativePath:"components/drawer/demo/basic.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9InNob3dEcmF3ZXIiPk9wZW48L2EtYnV0dG9uPgogIDxhLWRyYXdlcgogICAgdi1tb2RlbDp2aXNpYmxlPSJ2aXNpYmxlIgogICAgY2xhc3M9ImN1c3RvbS1jbGFzcyIKICAgIHN0eWxlPSJjb2xvcjogcmVkIgogICAgdGl0bGU9IkJhc2ljIERyYXdlciIKICAgIHBsYWNlbWVudD0icmlnaHQiCiAgICBAYWZ0ZXItdmlzaWJsZS1jaGFuZ2U9ImFmdGVyVmlzaWJsZUNoYW5nZSIKICA+CiAgICA8cD5Tb21lIGNvbnRlbnRzLi4uPC9wPgogICAgPHA+U29tZSBjb250ZW50cy4uLjwvcD4KICAgIDxwPlNvbWUgY29udGVudHMuLi48L3A+CiAgPC9hLWRyYXdlcj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IHZpc2libGUgPSByZWY8Ym9vbGVhbj4oZmFsc2UpOwoKICAgIGNvbnN0IGFmdGVyVmlzaWJsZUNoYW5nZSA9IChib29sOiBib29sZWFuKSA9PiB7CiAgICAgIGNvbnNvbGUubG9nKCd2aXNpYmxlJywgYm9vbCk7CiAgICB9OwoKICAgIGNvbnN0IHNob3dEcmF3ZXIgPSAoKSA9PiB7CiAgICAgIHZpc2libGUudmFsdWUgPSB0cnVlOwogICAgfTsKCiAgICByZXR1cm4gewogICAgICB2aXNpYmxlLAogICAgICBhZnRlclZpc2libGVDaGFuZ2UsCiAgICAgIHNob3dEcmF3ZXIsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9InNob3dEcmF3ZXIiPk9wZW48L2EtYnV0dG9uPgogIDxhLWRyYXdlcgogICAgdi1tb2RlbDp2aXNpYmxlPSJ2aXNpYmxlIgogICAgY2xhc3M9ImN1c3RvbS1jbGFzcyIKICAgIHN0eWxlPSJjb2xvcjogcmVkIgogICAgdGl0bGU9IkJhc2ljIERyYXdlciIKICAgIHBsYWNlbWVudD0icmlnaHQiCiAgICBAYWZ0ZXItdmlzaWJsZS1jaGFuZ2U9ImFmdGVyVmlzaWJsZUNoYW5nZSIKICA+CiAgICA8cD5Tb21lIGNvbnRlbnRzLi4uPC9wPgogICAgPHA+U29tZSBjb250ZW50cy4uLjwvcD4KICAgIDxwPlNvbWUgY29udGVudHMuLi48L3A+CiAgPC9hLWRyYXdlcj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgdmlzaWJsZSA9IHJlZihmYWxzZSk7CiAgICBjb25zdCBhZnRlclZpc2libGVDaGFuZ2UgPSBib29sID0+IHsKICAgICAgY29uc29sZS5sb2coJ3Zpc2libGUnLCBib29sKTsKICAgIH07CiAgICBjb25zdCBzaG93RHJhd2VyID0gKCkgPT4gewogICAgICB2aXNpYmxlLnZhbHVlID0gdHJ1ZTsKICAgIH07CiAgICByZXR1cm4gewogICAgICB2aXNpYmxlLAogICAgICBhZnRlclZpc2libGVDaGFuZ2UsCiAgICAgIHNob3dEcmF3ZXIsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:s(()=>[o(c,{type:"primary",onClick:e.showDrawer},{default:s(()=>t[1]||(t[1]=[a("Open")])),_:1,__:[1]},8,["onClick"]),o(g,{visible:e.visible,"onUpdate:visible":t[0]||(t[0]=k=>e.visible=k),class:"custom-class",style:{color:"red"},title:"Basic Drawer",placement:"right",onAfterVisibleChange:e.afterVisibleChange},{default:s(()=>t[2]||(t[2]=[n("p",null,"Some contents...",-1),n("p",null,"Some contents...",-1),n("p",null,"Some contents...",-1)])),_:1,__:[2]},8,["visible","onAfterVisibleChange"])]),htmlCode:s(()=>t[3]||(t[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Open"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("visible")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("custom-class"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),a(" red")]),n("span",{class:"token punctuation"},'"')])]),a(`
    `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Basic Drawer"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"placement"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("right"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@after-visible-change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("afterVisibleChange"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" visible "),n("span",{class:"token operator"},"="),a(" ref"),n("span",{class:"token operator"},"<"),a("boolean"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"afterVisibleChange"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"bool"),n("span",{class:"token operator"},":"),a(" boolean")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'visible'"),n("span",{class:"token punctuation"},","),a(" bool"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showDrawer"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},","),a(`
      afterVisibleChange`),n("span",{class:"token punctuation"},","),a(`
      showDrawer`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:s(()=>t[4]||(t[4]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Open"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("visible")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("custom-class"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"color"),n("span",{class:"token punctuation"},":"),a(" red")]),n("span",{class:"token punctuation"},'"')])]),a(`
    `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Basic Drawer"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"placement"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("right"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@after-visible-change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("afterVisibleChange"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" visible "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"afterVisibleChange"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token parameter"},"bool"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'visible'"),n("span",{class:"token punctuation"},","),a(" bool"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showDrawer"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},","),a(`
      afterVisibleChange`),n("span",{class:"token punctuation"},","),a(`
      showDrawer`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const F=v(x,[["render",L]]),z=y({setup(){const e=A("left"),t=A(!1);return{placement:e,visible:t,showDrawer:()=>{t.value=!0},onClose:()=>{t.value=!1}}}});function j(e,t,i,r,I,w){const c=p("a-radio"),g=p("a-radio-group"),d=p("a-button"),k=p("a-drawer"),l=p("demo-box");return b(),h(l,{jsfiddle:{us:"Extra actions should be placed at corner of drawer in Ant Design, you can using `extra` prop for that.",cn:"\u5728 Ant Design \u89C4\u8303\u4E2D\uFF0C\u64CD\u4F5C\u6309\u94AE\u5EFA\u8BAE\u653E\u5728\u62BD\u5C49\u7684\u53F3\u4E0A\u89D2\uFF0C\u53EF\u4EE5\u4F7F\u7528 extra \u5C5E\u6027\u6765\u5B9E\u73B0\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u5728 Ant Design \u89C4\u8303\u4E2D\uFF0C\u64CD\u4F5C\u6309\u94AE\u5EFA\u8BAE\u653E\u5728\u62BD\u5C49\u7684\u53F3\u4E0A\u89D2\uFF0C\u53EF\u4EE5\u4F7F\u7528 extra \u5C5E\u6027\u6765\u5B9E\u73B0\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Extra actions should be placed at corner of drawer in Ant Design, you can using <code>extra</code> prop for that.</p>
`,order:2,title:{"zh-CN":"\u989D\u5916\u64CD\u4F5C","en-US":"Extra Actions"},relativePath:"components/drawer/demo/extra.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXJhZGlvLWdyb3VwIHYtbW9kZWw6dmFsdWU9InBsYWNlbWVudCIgc3R5bGU9Im1hcmdpbi1yaWdodDogOHB4Ij4KICAgIDxhLXJhZGlvIHZhbHVlPSJ0b3AiPnRvcDwvYS1yYWRpbz4KICAgIDxhLXJhZGlvIHZhbHVlPSJyaWdodCI+cmlnaHQ8L2EtcmFkaW8+CiAgICA8YS1yYWRpbyB2YWx1ZT0iYm90dG9tIj5ib3R0b208L2EtcmFkaW8+CiAgICA8YS1yYWRpbyB2YWx1ZT0ibGVmdCI+bGVmdDwvYS1yYWRpbz4KICA8L2EtcmFkaW8tZ3JvdXA+CiAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljaz0ic2hvd0RyYXdlciI+T3BlbjwvYS1idXR0b24+CiAgPGEtZHJhd2VyCiAgICA6d2lkdGg9IjUwMCIKICAgIHRpdGxlPSJCYXNpYyBEcmF3ZXIiCiAgICA6cGxhY2VtZW50PSJwbGFjZW1lbnQiCiAgICA6dmlzaWJsZT0idmlzaWJsZSIKICAgIEBjbG9zZT0ib25DbG9zZSIKICA+CiAgICA8dGVtcGxhdGUgI2V4dHJhPgogICAgICA8YS1idXR0b24gc3R5bGU9Im1hcmdpbi1yaWdodDogOHB4IiBAY2xpY2s9Im9uQ2xvc2UiPkNhbmNlbDwvYS1idXR0b24+CiAgICAgIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9uQ2xvc2UiPlN1Ym1pdDwvYS1idXR0b24+CiAgICA8L3RlbXBsYXRlPgogICAgPHA+U29tZSBjb250ZW50cy4uLjwvcD4KICAgIDxwPlNvbWUgY29udGVudHMuLi48L3A+CiAgICA8cD5Tb21lIGNvbnRlbnRzLi4uPC9wPgogIDwvYS1kcmF3ZXI+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB0eXBlIHsgRHJhd2VyUHJvcHMgfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBwbGFjZW1lbnQgPSByZWY8RHJhd2VyUHJvcHNbJ3BsYWNlbWVudCddPignbGVmdCcpOwogICAgY29uc3QgdmlzaWJsZSA9IHJlZjxib29sZWFuPihmYWxzZSk7CgogICAgY29uc3Qgc2hvd0RyYXdlciA9ICgpID0+IHsKICAgICAgdmlzaWJsZS52YWx1ZSA9IHRydWU7CiAgICB9OwoKICAgIGNvbnN0IG9uQ2xvc2UgPSAoKSA9PiB7CiAgICAgIHZpc2libGUudmFsdWUgPSBmYWxzZTsKICAgIH07CiAgICByZXR1cm4gewogICAgICBwbGFjZW1lbnQsCiAgICAgIHZpc2libGUsCiAgICAgIHNob3dEcmF3ZXIsCiAgICAgIG9uQ2xvc2UsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXJhZGlvLWdyb3VwIHYtbW9kZWw6dmFsdWU9InBsYWNlbWVudCIgc3R5bGU9Im1hcmdpbi1yaWdodDogOHB4Ij4KICAgIDxhLXJhZGlvIHZhbHVlPSJ0b3AiPnRvcDwvYS1yYWRpbz4KICAgIDxhLXJhZGlvIHZhbHVlPSJyaWdodCI+cmlnaHQ8L2EtcmFkaW8+CiAgICA8YS1yYWRpbyB2YWx1ZT0iYm90dG9tIj5ib3R0b208L2EtcmFkaW8+CiAgICA8YS1yYWRpbyB2YWx1ZT0ibGVmdCI+bGVmdDwvYS1yYWRpbz4KICA8L2EtcmFkaW8tZ3JvdXA+CiAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljaz0ic2hvd0RyYXdlciI+T3BlbjwvYS1idXR0b24+CiAgPGEtZHJhd2VyCiAgICA6d2lkdGg9IjUwMCIKICAgIHRpdGxlPSJCYXNpYyBEcmF3ZXIiCiAgICA6cGxhY2VtZW50PSJwbGFjZW1lbnQiCiAgICA6dmlzaWJsZT0idmlzaWJsZSIKICAgIEBjbG9zZT0ib25DbG9zZSIKICA+CiAgICA8dGVtcGxhdGUgI2V4dHJhPgogICAgICA8YS1idXR0b24gc3R5bGU9Im1hcmdpbi1yaWdodDogOHB4IiBAY2xpY2s9Im9uQ2xvc2UiPkNhbmNlbDwvYS1idXR0b24+CiAgICAgIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9uQ2xvc2UiPlN1Ym1pdDwvYS1idXR0b24+CiAgICA8L3RlbXBsYXRlPgogICAgPHA+U29tZSBjb250ZW50cy4uLjwvcD4KICAgIDxwPlNvbWUgY29udGVudHMuLi48L3A+CiAgICA8cD5Tb21lIGNvbnRlbnRzLi4uPC9wPgogIDwvYS1kcmF3ZXI+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IHBsYWNlbWVudCA9IHJlZignbGVmdCcpOwogICAgY29uc3QgdmlzaWJsZSA9IHJlZihmYWxzZSk7CiAgICBjb25zdCBzaG93RHJhd2VyID0gKCkgPT4gewogICAgICB2aXNpYmxlLnZhbHVlID0gdHJ1ZTsKICAgIH07CiAgICBjb25zdCBvbkNsb3NlID0gKCkgPT4gewogICAgICB2aXNpYmxlLnZhbHVlID0gZmFsc2U7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgcGxhY2VtZW50LAogICAgICB2aXNpYmxlLAogICAgICBzaG93RHJhd2VyLAogICAgICBvbkNsb3NlLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:s(()=>[o(g,{value:e.placement,"onUpdate:value":t[0]||(t[0]=u=>e.placement=u),style:{"margin-right":"8px"}},{default:s(()=>[o(c,{value:"top"},{default:s(()=>t[1]||(t[1]=[a("top")])),_:1,__:[1]}),o(c,{value:"right"},{default:s(()=>t[2]||(t[2]=[a("right")])),_:1,__:[2]}),o(c,{value:"bottom"},{default:s(()=>t[3]||(t[3]=[a("bottom")])),_:1,__:[3]}),o(c,{value:"left"},{default:s(()=>t[4]||(t[4]=[a("left")])),_:1,__:[4]})]),_:1},8,["value"]),o(d,{type:"primary",onClick:e.showDrawer},{default:s(()=>t[5]||(t[5]=[a("Open")])),_:1,__:[5]},8,["onClick"]),o(k,{width:500,title:"Basic Drawer",placement:e.placement,visible:e.visible,onClose:e.onClose},{extra:s(()=>[o(d,{style:{"margin-right":"8px"},onClick:e.onClose},{default:s(()=>t[6]||(t[6]=[a("Cancel")])),_:1,__:[6]},8,["onClick"]),o(d,{type:"primary",onClick:e.onClose},{default:s(()=>t[7]||(t[7]=[a("Submit")])),_:1,__:[7]},8,["onClick"])]),default:s(()=>[t[8]||(t[8]=n("p",null,"Some contents...",-1)),t[9]||(t[9]=n("p",null,"Some contents...",-1)),t[10]||(t[10]=n("p",null,"Some contents...",-1))]),_:1,__:[8,9,10]},8,["placement","visible","onClose"])]),htmlCode:s(()=>t[11]||(t[11]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("placement"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 8px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("top"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("top"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("right"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("right"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("bottom"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("bottom"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("left"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-group")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Open"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(`
    `),n("span",{class:"token attr-name"},":width"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("500"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Basic Drawer"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":placement"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("placement"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":visible"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#extra"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 8px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Cancel"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Submit"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(" type "),n("span",{class:"token punctuation"},"{"),a(" DrawerProps "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" placement "),n("span",{class:"token operator"},"="),a(" ref"),n("span",{class:"token operator"},"<"),a("DrawerProps"),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'placement'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'left'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" visible "),n("span",{class:"token operator"},"="),a(" ref"),n("span",{class:"token operator"},"<"),a("boolean"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showDrawer"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onClose"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      placement`),n("span",{class:"token punctuation"},","),a(`
      visible`),n("span",{class:"token punctuation"},","),a(`
      showDrawer`),n("span",{class:"token punctuation"},","),a(`
      onClose`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:s(()=>t[12]||(t[12]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("placement"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 8px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("top"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("top"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("right"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("right"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("bottom"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("bottom"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("left"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-group")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Open"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(`
    `),n("span",{class:"token attr-name"},":width"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("500"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Basic Drawer"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":placement"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("placement"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":visible"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#extra"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 8px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Cancel"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Submit"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" placement "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'left'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" visible "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showDrawer"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onClose"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      placement`),n("span",{class:"token punctuation"},","),a(`
      visible`),n("span",{class:"token punctuation"},","),a(`
      showDrawer`),n("span",{class:"token punctuation"},","),a(`
      onClose`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const K=v(z,[["render",j]]),q=y({setup(){const e=A("left"),t=A(!1);return{placement:e,visible:t,showDrawer:()=>{t.value=!0},onClose:()=>{t.value=!1}}}});function U(e,t,i,r,I,w){const c=p("a-radio"),g=p("a-radio-group"),d=p("a-button"),k=p("a-drawer"),l=p("demo-box");return b(),h(l,{jsfiddle:{us:"The Drawer can appear from any edge of the screen.",cn:"\u81EA\u5B9A\u4E49\u4F4D\u7F6E\uFF0C\u70B9\u51FB\u89E6\u53D1\u6309\u94AE\u62BD\u5C49\u4ECE\u76F8\u5E94\u7684\u4F4D\u7F6E\u6ED1\u51FA\uFF0C\u70B9\u51FB\u906E\u7F69\u533A\u5173\u95ED",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u81EA\u5B9A\u4E49\u4F4D\u7F6E\uFF0C\u70B9\u51FB\u89E6\u53D1\u6309\u94AE\u62BD\u5C49\u4ECE\u76F8\u5E94\u7684\u4F4D\u7F6E\u6ED1\u51FA\uFF0C\u70B9\u51FB\u906E\u7F69\u533A\u5173\u95ED</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>The Drawer can appear from any edge of the screen.</p>
`,order:1,title:{"zh-CN":"\u81EA\u5B9A\u4E49\u4F4D\u7F6E","en-US":"Custom Placement"},relativePath:"components/drawer/demo/placement.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXJhZGlvLWdyb3VwIHYtbW9kZWw6dmFsdWU9InBsYWNlbWVudCIgc3R5bGU9Im1hcmdpbi1yaWdodDogOHB4Ij4KICAgIDxhLXJhZGlvIHZhbHVlPSJ0b3AiPnRvcDwvYS1yYWRpbz4KICAgIDxhLXJhZGlvIHZhbHVlPSJyaWdodCI+cmlnaHQ8L2EtcmFkaW8+CiAgICA8YS1yYWRpbyB2YWx1ZT0iYm90dG9tIj5ib3R0b208L2EtcmFkaW8+CiAgICA8YS1yYWRpbyB2YWx1ZT0ibGVmdCI+bGVmdDwvYS1yYWRpbz4KICA8L2EtcmFkaW8tZ3JvdXA+CiAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljaz0ic2hvd0RyYXdlciI+T3BlbjwvYS1idXR0b24+CiAgPGEtZHJhd2VyCiAgICB0aXRsZT0iQmFzaWMgRHJhd2VyIgogICAgOnBsYWNlbWVudD0icGxhY2VtZW50IgogICAgOmNsb3NhYmxlPSJmYWxzZSIKICAgIDp2aXNpYmxlPSJ2aXNpYmxlIgogICAgQGNsb3NlPSJvbkNsb3NlIgogID4KICAgIDxwPlNvbWUgY29udGVudHMuLi48L3A+CiAgICA8cD5Tb21lIGNvbnRlbnRzLi4uPC9wPgogICAgPHA+U29tZSBjb250ZW50cy4uLjwvcD4KICA8L2EtZHJhd2VyPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYgfSBmcm9tICd2dWUnOwppbXBvcnQgdHlwZSB7IERyYXdlclByb3BzIH0gZnJvbSAnYW50LWRlc2lnbi12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgcGxhY2VtZW50ID0gcmVmPERyYXdlclByb3BzWydwbGFjZW1lbnQnXT4oJ2xlZnQnKTsKICAgIGNvbnN0IHZpc2libGUgPSByZWY8Ym9vbGVhbj4oZmFsc2UpOwoKICAgIGNvbnN0IHNob3dEcmF3ZXIgPSAoKSA9PiB7CiAgICAgIHZpc2libGUudmFsdWUgPSB0cnVlOwogICAgfTsKCiAgICBjb25zdCBvbkNsb3NlID0gKCkgPT4gewogICAgICB2aXNpYmxlLnZhbHVlID0gZmFsc2U7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgcGxhY2VtZW50LAogICAgICB2aXNpYmxlLAogICAgICBzaG93RHJhd2VyLAogICAgICBvbkNsb3NlLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXJhZGlvLWdyb3VwIHYtbW9kZWw6dmFsdWU9InBsYWNlbWVudCIgc3R5bGU9Im1hcmdpbi1yaWdodDogOHB4Ij4KICAgIDxhLXJhZGlvIHZhbHVlPSJ0b3AiPnRvcDwvYS1yYWRpbz4KICAgIDxhLXJhZGlvIHZhbHVlPSJyaWdodCI+cmlnaHQ8L2EtcmFkaW8+CiAgICA8YS1yYWRpbyB2YWx1ZT0iYm90dG9tIj5ib3R0b208L2EtcmFkaW8+CiAgICA8YS1yYWRpbyB2YWx1ZT0ibGVmdCI+bGVmdDwvYS1yYWRpbz4KICA8L2EtcmFkaW8tZ3JvdXA+CiAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljaz0ic2hvd0RyYXdlciI+T3BlbjwvYS1idXR0b24+CiAgPGEtZHJhd2VyCiAgICB0aXRsZT0iQmFzaWMgRHJhd2VyIgogICAgOnBsYWNlbWVudD0icGxhY2VtZW50IgogICAgOmNsb3NhYmxlPSJmYWxzZSIKICAgIDp2aXNpYmxlPSJ2aXNpYmxlIgogICAgQGNsb3NlPSJvbkNsb3NlIgogID4KICAgIDxwPlNvbWUgY29udGVudHMuLi48L3A+CiAgICA8cD5Tb21lIGNvbnRlbnRzLi4uPC9wPgogICAgPHA+U29tZSBjb250ZW50cy4uLjwvcD4KICA8L2EtZHJhd2VyPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBwbGFjZW1lbnQgPSByZWYoJ2xlZnQnKTsKICAgIGNvbnN0IHZpc2libGUgPSByZWYoZmFsc2UpOwogICAgY29uc3Qgc2hvd0RyYXdlciA9ICgpID0+IHsKICAgICAgdmlzaWJsZS52YWx1ZSA9IHRydWU7CiAgICB9OwogICAgY29uc3Qgb25DbG9zZSA9ICgpID0+IHsKICAgICAgdmlzaWJsZS52YWx1ZSA9IGZhbHNlOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIHBsYWNlbWVudCwKICAgICAgdmlzaWJsZSwKICAgICAgc2hvd0RyYXdlciwKICAgICAgb25DbG9zZSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:s(()=>[o(g,{value:e.placement,"onUpdate:value":t[0]||(t[0]=u=>e.placement=u),style:{"margin-right":"8px"}},{default:s(()=>[o(c,{value:"top"},{default:s(()=>t[1]||(t[1]=[a("top")])),_:1,__:[1]}),o(c,{value:"right"},{default:s(()=>t[2]||(t[2]=[a("right")])),_:1,__:[2]}),o(c,{value:"bottom"},{default:s(()=>t[3]||(t[3]=[a("bottom")])),_:1,__:[3]}),o(c,{value:"left"},{default:s(()=>t[4]||(t[4]=[a("left")])),_:1,__:[4]})]),_:1},8,["value"]),o(d,{type:"primary",onClick:e.showDrawer},{default:s(()=>t[5]||(t[5]=[a("Open")])),_:1,__:[5]},8,["onClick"]),o(k,{title:"Basic Drawer",placement:e.placement,closable:!1,visible:e.visible,onClose:e.onClose},{default:s(()=>t[6]||(t[6]=[n("p",null,"Some contents...",-1),n("p",null,"Some contents...",-1),n("p",null,"Some contents...",-1)])),_:1,__:[6]},8,["placement","visible","onClose"])]),htmlCode:s(()=>t[7]||(t[7]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("placement"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 8px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("top"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("top"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("right"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("right"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("bottom"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("bottom"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("left"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-group")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Open"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(`
    `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Basic Drawer"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":placement"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("placement"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":closable"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("false"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":visible"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(" type "),n("span",{class:"token punctuation"},"{"),a(" DrawerProps "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" placement "),n("span",{class:"token operator"},"="),a(" ref"),n("span",{class:"token operator"},"<"),a("DrawerProps"),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'placement'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'left'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" visible "),n("span",{class:"token operator"},"="),a(" ref"),n("span",{class:"token operator"},"<"),a("boolean"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showDrawer"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onClose"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      placement`),n("span",{class:"token punctuation"},","),a(`
      visible`),n("span",{class:"token punctuation"},","),a(`
      showDrawer`),n("span",{class:"token punctuation"},","),a(`
      onClose`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:s(()=>t[8]||(t[8]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio-group")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("placement"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 8px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("top"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("top"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("right"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("right"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("bottom"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("bottom"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-radio")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("left"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-radio-group")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Open"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(`
    `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Basic Drawer"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":placement"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("placement"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":closable"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("false"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":visible"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" placement "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'left'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" visible "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showDrawer"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onClose"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      placement`),n("span",{class:"token punctuation"},","),a(`
      visible`),n("span",{class:"token punctuation"},","),a(`
      showDrawer`),n("span",{class:"token punctuation"},","),a(`
      onClose`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const E=v(q,[["render",U]]),T=y({props:{title:String,content:String}}),Q={style:{"font-size":"14px","line-height":"22px","margin-bottom":"7px",color:"rgba(0, 0, 0, 0.65)"}},_={style:{"margin-right":"8px",display:"inline-block",color:"rgba(0, 0, 0, 0.85)"}};function O(e,t,i,r,I,w){return b(),B("div",Q,[n("p",_,P(e.title)+"\uFF1A ",1),e.content?(b(),B(H,{key:0},[a(P(e.content),1)],64)):R(e.$slots,"content",{key:1})])}const M=v(T,[["render",O]]),$=y({components:{descriptionItem:M},setup(){const e=A(!1);return{visible:e,pStyle:{fontSize:"16px",color:"rgba(0,0,0,0.85)",lineHeight:"24px",display:"block",marginBottom:"16px"},pStyle2:{marginBottom:"24px"},showDrawer:()=>{e.value=!0},onClose:()=>{e.value=!1}}}}),nn={href:"https://www.antdv.com/"};function an(e,t,i,r,I,w){const c=p("a-avatar"),g=p("a-list-item-meta"),d=p("a-list-item"),k=p("a-list"),l=p("description-item"),u=p("a-col"),C=p("a-row"),Z=p("a-divider"),W=p("a-drawer"),S=p("demo-box");return b(),h(S,{jsfiddle:{us:"Use Drawer to quickly preview details of an object, such as those in a list.",cn:"\u9700\u8981\u5FEB\u901F\u9884\u89C8\u5BF9\u8C61\u6982\u8981\u65F6\u4F7F\u7528\uFF0C\u70B9\u51FB\u906E\u7F69\u533A\u5173\u95ED\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u9700\u8981\u5FEB\u901F\u9884\u89C8\u5BF9\u8C61\u6982\u8981\u65F6\u4F7F\u7528\uFF0C\u70B9\u51FB\u906E\u7F69\u533A\u5173\u95ED\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Use Drawer to quickly preview details of an object, such as those in a list.</p>
`,order:6,title:{"zh-CN":"\u4FE1\u606F\u9884\u89C8\u62BD\u5C49","en-US":"Preview drawer"},relativePath:"components/drawer/demo/user-profile.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QKICAgIDpkYXRhLXNvdXJjZT0iWwogICAgICB7CiAgICAgICAgbmFtZTogJ0xpbHknLAogICAgICB9LAogICAgICB7CiAgICAgICAgbmFtZTogJ0xpbHknLAogICAgICB9LAogICAgXSIKICAgIGJvcmRlcmVkCiAgPgogICAgPHRlbXBsYXRlICNyZW5kZXJJdGVtPSJ7IGl0ZW0gfSI+CiAgICAgIDxhLWxpc3QtaXRlbSA6a2V5PSJgYS0ke2l0ZW0uaWR9YCI+CiAgICAgICAgPHRlbXBsYXRlICNhY3Rpb25zPjxhIEBjbGljaz0ic2hvd0RyYXdlciI+VmlldyBQcm9maWxlPC9hPjwvdGVtcGxhdGU+CiAgICAgICAgPGEtbGlzdC1pdGVtLW1ldGEgZGVzY3JpcHRpb249IlByb2dyZXNzZXIgWFRlY2giPgogICAgICAgICAgPHRlbXBsYXRlICN0aXRsZT4KICAgICAgICAgICAgPGEgaHJlZj0iaHR0cHM6Ly93d3cuYW50ZHYuY29tLyI+e3sgaXRlbS5uYW1lIH19PC9hPgogICAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICAgIDx0ZW1wbGF0ZSAjYXZhdGFyPgogICAgICAgICAgICA8YS1hdmF0YXIgc3JjPSJodHRwczovL2d3LmFsaXBheW9iamVjdHMuY29tL3pvcy9ybXNwb3J0YWwvQmlhemZhbnhtYW1OUm94eFZ4a2EucG5nIiAvPgogICAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8L2EtbGlzdC1pdGVtLW1ldGE+CiAgICAgIDwvYS1saXN0LWl0ZW0+CiAgICA8L3RlbXBsYXRlPgogIDwvYS1saXN0PgogIDxhLWRyYXdlciB3aWR0aD0iNjQwIiBwbGFjZW1lbnQ9InJpZ2h0IiA6Y2xvc2FibGU9ImZhbHNlIiA6dmlzaWJsZT0idmlzaWJsZSIgQGNsb3NlPSJvbkNsb3NlIj4KICAgIDxwIDpzdHlsZT0iW3BTdHlsZSwgcFN0eWxlMl0iPlVzZXIgUHJvZmlsZTwvcD4KICAgIDxwIDpzdHlsZT0icFN0eWxlIj5QZXJzb25hbDwvcD4KICAgIDxhLXJvdz4KICAgICAgPGEtY29sIDpzcGFuPSIxMiI+CiAgICAgICAgPGRlc2NyaXB0aW9uLWl0ZW0gdGl0bGU9IkZ1bGwgTmFtZSIgY29udGVudD0iTGlseSIgLz4KICAgICAgPC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSIxMiI+CiAgICAgICAgPGRlc2NyaXB0aW9uLWl0ZW0gdGl0bGU9IkFjY291bnQiIGNvbnRlbnQ9IkFudERlc2lnbkBleGFtcGxlLmNvbSIgLz4KICAgICAgPC9hLWNvbD4KICAgIDwvYS1yb3c+CiAgICA8YS1yb3c+CiAgICAgIDxhLWNvbCA6c3Bhbj0iMTIiPgogICAgICAgIDxkZXNjcmlwdGlvbi1pdGVtIHRpdGxlPSJDaXR5IiBjb250ZW50PSJIYW5nWmhvdSIgLz4KICAgICAgPC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSIxMiI+CiAgICAgICAgPGRlc2NyaXB0aW9uLWl0ZW0gdGl0bGU9IkNvdW50cnkiIGNvbnRlbnQ9IkNoaW5h8J+HqPCfh7MiIC8+CiAgICAgIDwvYS1jb2w+CiAgICA8L2Etcm93PgogICAgPGEtcm93PgogICAgICA8YS1jb2wgOnNwYW49IjEyIj4KICAgICAgICA8ZGVzY3JpcHRpb24taXRlbSB0aXRsZT0iQmlydGhkYXkiIGNvbnRlbnQ9IkZlYnJ1YXJ5IDIsMTkwMCIgLz4KICAgICAgPC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSIxMiI+CiAgICAgICAgPGRlc2NyaXB0aW9uLWl0ZW0gdGl0bGU9IldlYnNpdGUiIGNvbnRlbnQ9Ii0iIC8+CiAgICAgIDwvYS1jb2w+CiAgICA8L2Etcm93PgogICAgPGEtcm93PgogICAgICA8YS1jb2wgOnNwYW49IjEyIj4KICAgICAgICA8ZGVzY3JpcHRpb24taXRlbQogICAgICAgICAgdGl0bGU9Ik1lc3NhZ2UiCiAgICAgICAgICBjb250ZW50PSJNYWtlIHRoaW5ncyBhcyBzaW1wbGUgYXMgcG9zc2libGUgYnV0IG5vIHNpbXBsZXIuIgogICAgICAgIC8+CiAgICAgIDwvYS1jb2w+CiAgICA8L2Etcm93PgogICAgPGEtZGl2aWRlciAvPgogICAgPHAgOnN0eWxlPSJwU3R5bGUiPkNvbXBhbnk8L3A+CiAgICA8YS1yb3c+CiAgICAgIDxhLWNvbCA6c3Bhbj0iMTIiPgogICAgICAgIDxkZXNjcmlwdGlvbi1pdGVtIHRpdGxlPSJQb3NpdGlvbiIgY29udGVudD0iUHJvZ3JhbW1lciIgLz4KICAgICAgPC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSIxMiI+CiAgICAgICAgPGRlc2NyaXB0aW9uLWl0ZW0gdGl0bGU9IlJlc3BvbnNpYmlsaXRpZXMiIGNvbnRlbnQ9IkNvZGluZyIgLz4KICAgICAgPC9hLWNvbD4KICAgIDwvYS1yb3c+CiAgICA8YS1yb3c+CiAgICAgIDxhLWNvbCA6c3Bhbj0iMTIiPgogICAgICAgIDxkZXNjcmlwdGlvbi1pdGVtIHRpdGxlPSJEZXBhcnRtZW50IiBjb250ZW50PSJYVGVjaCIgLz4KICAgICAgPC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSIxMiI+CiAgICAgICAgPGRlc2NyaXB0aW9uLWl0ZW0gdGl0bGU9IlN1cGVydmlzb3IiPgogICAgICAgICAgPHRlbXBsYXRlICNjb250ZW50PjxhPkxpbjwvYT48L3RlbXBsYXRlPgogICAgICAgIDwvZGVzY3JpcHRpb24taXRlbT4KICAgICAgPC9hLWNvbD4KICAgIDwvYS1yb3c+CiAgICA8YS1yb3c+CiAgICAgIDxhLWNvbCA6c3Bhbj0iMjQiPgogICAgICAgIDxkZXNjcmlwdGlvbi1pdGVtCiAgICAgICAgICB0aXRsZT0iU2tpbGxzIgogICAgICAgICAgY29udGVudD0iQyAvIEMgKyArLCBkYXRhIHN0cnVjdHVyZXMsIHNvZnR3YXJlIGVuZ2luZWVyaW5nLCBvcGVyYXRpbmcgc3lzdGVtcywgY29tcHV0ZXIgbmV0d29ya3MsIGRhdGFiYXNlcywgY29tcGlsZXIgdGhlb3J5LCBjb21wdXRlciBhcmNoaXRlY3R1cmUsIE1pY3JvY29tcHV0ZXIgUHJpbmNpcGxlIGFuZCBJbnRlcmZhY2UgVGVjaG5vbG9neSwgQ29tcHV0ZXIgRW5nbGlzaCwgSmF2YSwgQVNQLCBldGMuIgogICAgICAgIC8+CiAgICAgIDwvYS1jb2w+CiAgICA8L2Etcm93PgogICAgPGEtZGl2aWRlciAvPgogICAgPHAgOnN0eWxlPSJwU3R5bGUiPkNvbnRhY3RzPC9wPgogICAgPGEtcm93PgogICAgICA8YS1jb2wgOnNwYW49IjEyIj4KICAgICAgICA8ZGVzY3JpcHRpb24taXRlbSB0aXRsZT0iRW1haWwiIGNvbnRlbnQ9ImFudC1kZXNpZ24tdnVlQGV4YW1wbGUuY29tIiAvPgogICAgICA8L2EtY29sPgogICAgICA8YS1jb2wgOnNwYW49IjEyIj4KICAgICAgICA8ZGVzY3JpcHRpb24taXRlbSB0aXRsZT0iUGhvbmUgTnVtYmVyIiBjb250ZW50PSIrODYgMTgxIDAwMDAgMDAwMCIgLz4KICAgICAgPC9hLWNvbD4KICAgIDwvYS1yb3c+CiAgICA8YS1yb3c+CiAgICAgIDxhLWNvbCA6c3Bhbj0iMjQiPgogICAgICAgIDxkZXNjcmlwdGlvbi1pdGVtIHRpdGxlPSJHaXRodWIiPgogICAgICAgICAgPHRlbXBsYXRlICNjb250ZW50PgogICAgICAgICAgICA8YSBocmVmPSJodHRwczovL2dpdGh1Yi5jb20vdnVlQ29tcG9uZW50L2FudC1kZXNpZ24tdnVlIj4KICAgICAgICAgICAgICBnaXRodWIuY29tL3Z1ZUNvbXBvbmVudC9hbnQtZGVzaWduLXZ1ZQogICAgICAgICAgICA8L2E+CiAgICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIDwvZGVzY3JpcHRpb24taXRlbT4KICAgICAgPC9hLWNvbD4KICAgIDwvYS1yb3c+CiAgPC9hLWRyYXdlcj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCBkZXNjcmlwdGlvbkl0ZW0gZnJvbSAnLi9kZXNjcmlwdGlvbkl0ZW0vaW5kZXgudnVlJzsKaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIGRlc2NyaXB0aW9uSXRlbSwKICB9LAogIHNldHVwKCkgewogICAgY29uc3QgdmlzaWJsZSA9IHJlZjxib29sZWFuPihmYWxzZSk7CiAgICBjb25zdCBwU3R5bGUgPSB7CiAgICAgIGZvbnRTaXplOiAnMTZweCcsCiAgICAgIGNvbG9yOiAncmdiYSgwLDAsMCwwLjg1KScsCiAgICAgIGxpbmVIZWlnaHQ6ICcyNHB4JywKICAgICAgZGlzcGxheTogJ2Jsb2NrJywKICAgICAgbWFyZ2luQm90dG9tOiAnMTZweCcsCiAgICB9OwogICAgY29uc3QgcFN0eWxlMiA9IHsKICAgICAgbWFyZ2luQm90dG9tOiAnMjRweCcsCiAgICB9OwoKICAgIGNvbnN0IHNob3dEcmF3ZXIgPSAoKSA9PiB7CiAgICAgIHZpc2libGUudmFsdWUgPSB0cnVlOwogICAgfTsKICAgIGNvbnN0IG9uQ2xvc2UgPSAoKSA9PiB7CiAgICAgIHZpc2libGUudmFsdWUgPSBmYWxzZTsKICAgIH07CiAgICByZXR1cm4gewogICAgICB2aXNpYmxlLAogICAgICBwU3R5bGUsCiAgICAgIHBTdHlsZTIsCiAgICAgIHNob3dEcmF3ZXIsCiAgICAgIG9uQ2xvc2UsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QKICAgIDpkYXRhLXNvdXJjZT0iWwogICAgICB7CiAgICAgICAgbmFtZTogJ0xpbHknLAogICAgICB9LAogICAgICB7CiAgICAgICAgbmFtZTogJ0xpbHknLAogICAgICB9LAogICAgXSIKICAgIGJvcmRlcmVkCiAgPgogICAgPHRlbXBsYXRlICNyZW5kZXJJdGVtPSJ7IGl0ZW0gfSI+CiAgICAgIDxhLWxpc3QtaXRlbSA6a2V5PSJgYS0ke2l0ZW0uaWR9YCI+CiAgICAgICAgPHRlbXBsYXRlICNhY3Rpb25zPjxhIEBjbGljaz0ic2hvd0RyYXdlciI+VmlldyBQcm9maWxlPC9hPjwvdGVtcGxhdGU+CiAgICAgICAgPGEtbGlzdC1pdGVtLW1ldGEgZGVzY3JpcHRpb249IlByb2dyZXNzZXIgWFRlY2giPgogICAgICAgICAgPHRlbXBsYXRlICN0aXRsZT4KICAgICAgICAgICAgPGEgaHJlZj0iaHR0cHM6Ly93d3cuYW50ZHYuY29tLyI+e3sgaXRlbS5uYW1lIH19PC9hPgogICAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICAgIDx0ZW1wbGF0ZSAjYXZhdGFyPgogICAgICAgICAgICA8YS1hdmF0YXIgc3JjPSJodHRwczovL2d3LmFsaXBheW9iamVjdHMuY29tL3pvcy9ybXNwb3J0YWwvQmlhemZhbnhtYW1OUm94eFZ4a2EucG5nIiAvPgogICAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8L2EtbGlzdC1pdGVtLW1ldGE+CiAgICAgIDwvYS1saXN0LWl0ZW0+CiAgICA8L3RlbXBsYXRlPgogIDwvYS1saXN0PgogIDxhLWRyYXdlciB3aWR0aD0iNjQwIiBwbGFjZW1lbnQ9InJpZ2h0IiA6Y2xvc2FibGU9ImZhbHNlIiA6dmlzaWJsZT0idmlzaWJsZSIgQGNsb3NlPSJvbkNsb3NlIj4KICAgIDxwIDpzdHlsZT0iW3BTdHlsZSwgcFN0eWxlMl0iPlVzZXIgUHJvZmlsZTwvcD4KICAgIDxwIDpzdHlsZT0icFN0eWxlIj5QZXJzb25hbDwvcD4KICAgIDxhLXJvdz4KICAgICAgPGEtY29sIDpzcGFuPSIxMiI+CiAgICAgICAgPGRlc2NyaXB0aW9uLWl0ZW0gdGl0bGU9IkZ1bGwgTmFtZSIgY29udGVudD0iTGlseSIgLz4KICAgICAgPC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSIxMiI+CiAgICAgICAgPGRlc2NyaXB0aW9uLWl0ZW0gdGl0bGU9IkFjY291bnQiIGNvbnRlbnQ9IkFudERlc2lnbkBleGFtcGxlLmNvbSIgLz4KICAgICAgPC9hLWNvbD4KICAgIDwvYS1yb3c+CiAgICA8YS1yb3c+CiAgICAgIDxhLWNvbCA6c3Bhbj0iMTIiPgogICAgICAgIDxkZXNjcmlwdGlvbi1pdGVtIHRpdGxlPSJDaXR5IiBjb250ZW50PSJIYW5nWmhvdSIgLz4KICAgICAgPC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSIxMiI+CiAgICAgICAgPGRlc2NyaXB0aW9uLWl0ZW0gdGl0bGU9IkNvdW50cnkiIGNvbnRlbnQ9IkNoaW5h8J+HqPCfh7MiIC8+CiAgICAgIDwvYS1jb2w+CiAgICA8L2Etcm93PgogICAgPGEtcm93PgogICAgICA8YS1jb2wgOnNwYW49IjEyIj4KICAgICAgICA8ZGVzY3JpcHRpb24taXRlbSB0aXRsZT0iQmlydGhkYXkiIGNvbnRlbnQ9IkZlYnJ1YXJ5IDIsMTkwMCIgLz4KICAgICAgPC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSIxMiI+CiAgICAgICAgPGRlc2NyaXB0aW9uLWl0ZW0gdGl0bGU9IldlYnNpdGUiIGNvbnRlbnQ9Ii0iIC8+CiAgICAgIDwvYS1jb2w+CiAgICA8L2Etcm93PgogICAgPGEtcm93PgogICAgICA8YS1jb2wgOnNwYW49IjEyIj4KICAgICAgICA8ZGVzY3JpcHRpb24taXRlbQogICAgICAgICAgdGl0bGU9Ik1lc3NhZ2UiCiAgICAgICAgICBjb250ZW50PSJNYWtlIHRoaW5ncyBhcyBzaW1wbGUgYXMgcG9zc2libGUgYnV0IG5vIHNpbXBsZXIuIgogICAgICAgIC8+CiAgICAgIDwvYS1jb2w+CiAgICA8L2Etcm93PgogICAgPGEtZGl2aWRlciAvPgogICAgPHAgOnN0eWxlPSJwU3R5bGUiPkNvbXBhbnk8L3A+CiAgICA8YS1yb3c+CiAgICAgIDxhLWNvbCA6c3Bhbj0iMTIiPgogICAgICAgIDxkZXNjcmlwdGlvbi1pdGVtIHRpdGxlPSJQb3NpdGlvbiIgY29udGVudD0iUHJvZ3JhbW1lciIgLz4KICAgICAgPC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSIxMiI+CiAgICAgICAgPGRlc2NyaXB0aW9uLWl0ZW0gdGl0bGU9IlJlc3BvbnNpYmlsaXRpZXMiIGNvbnRlbnQ9IkNvZGluZyIgLz4KICAgICAgPC9hLWNvbD4KICAgIDwvYS1yb3c+CiAgICA8YS1yb3c+CiAgICAgIDxhLWNvbCA6c3Bhbj0iMTIiPgogICAgICAgIDxkZXNjcmlwdGlvbi1pdGVtIHRpdGxlPSJEZXBhcnRtZW50IiBjb250ZW50PSJYVGVjaCIgLz4KICAgICAgPC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSIxMiI+CiAgICAgICAgPGRlc2NyaXB0aW9uLWl0ZW0gdGl0bGU9IlN1cGVydmlzb3IiPgogICAgICAgICAgPHRlbXBsYXRlICNjb250ZW50PjxhPkxpbjwvYT48L3RlbXBsYXRlPgogICAgICAgIDwvZGVzY3JpcHRpb24taXRlbT4KICAgICAgPC9hLWNvbD4KICAgIDwvYS1yb3c+CiAgICA8YS1yb3c+CiAgICAgIDxhLWNvbCA6c3Bhbj0iMjQiPgogICAgICAgIDxkZXNjcmlwdGlvbi1pdGVtCiAgICAgICAgICB0aXRsZT0iU2tpbGxzIgogICAgICAgICAgY29udGVudD0iQyAvIEMgKyArLCBkYXRhIHN0cnVjdHVyZXMsIHNvZnR3YXJlIGVuZ2luZWVyaW5nLCBvcGVyYXRpbmcgc3lzdGVtcywgY29tcHV0ZXIgbmV0d29ya3MsIGRhdGFiYXNlcywgY29tcGlsZXIgdGhlb3J5LCBjb21wdXRlciBhcmNoaXRlY3R1cmUsIE1pY3JvY29tcHV0ZXIgUHJpbmNpcGxlIGFuZCBJbnRlcmZhY2UgVGVjaG5vbG9neSwgQ29tcHV0ZXIgRW5nbGlzaCwgSmF2YSwgQVNQLCBldGMuIgogICAgICAgIC8+CiAgICAgIDwvYS1jb2w+CiAgICA8L2Etcm93PgogICAgPGEtZGl2aWRlciAvPgogICAgPHAgOnN0eWxlPSJwU3R5bGUiPkNvbnRhY3RzPC9wPgogICAgPGEtcm93PgogICAgICA8YS1jb2wgOnNwYW49IjEyIj4KICAgICAgICA8ZGVzY3JpcHRpb24taXRlbSB0aXRsZT0iRW1haWwiIGNvbnRlbnQ9ImFudC1kZXNpZ24tdnVlQGV4YW1wbGUuY29tIiAvPgogICAgICA8L2EtY29sPgogICAgICA8YS1jb2wgOnNwYW49IjEyIj4KICAgICAgICA8ZGVzY3JpcHRpb24taXRlbSB0aXRsZT0iUGhvbmUgTnVtYmVyIiBjb250ZW50PSIrODYgMTgxIDAwMDAgMDAwMCIgLz4KICAgICAgPC9hLWNvbD4KICAgIDwvYS1yb3c+CiAgICA8YS1yb3c+CiAgICAgIDxhLWNvbCA6c3Bhbj0iMjQiPgogICAgICAgIDxkZXNjcmlwdGlvbi1pdGVtIHRpdGxlPSJHaXRodWIiPgogICAgICAgICAgPHRlbXBsYXRlICNjb250ZW50PgogICAgICAgICAgICA8YSBocmVmPSJodHRwczovL2dpdGh1Yi5jb20vdnVlQ29tcG9uZW50L2FudC1kZXNpZ24tdnVlIj4KICAgICAgICAgICAgICBnaXRodWIuY29tL3Z1ZUNvbXBvbmVudC9hbnQtZGVzaWduLXZ1ZQogICAgICAgICAgICA8L2E+CiAgICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIDwvZGVzY3JpcHRpb24taXRlbT4KICAgICAgPC9hLWNvbD4KICAgIDwvYS1yb3c+CiAgPC9hLWRyYXdlcj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IGRlc2NyaXB0aW9uSXRlbSBmcm9tICcuL2Rlc2NyaXB0aW9uSXRlbS9pbmRleC52dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgZGVzY3JpcHRpb25JdGVtLAogIH0sCiAgc2V0dXAoKSB7CiAgICBjb25zdCB2aXNpYmxlID0gcmVmKGZhbHNlKTsKICAgIGNvbnN0IHBTdHlsZSA9IHsKICAgICAgZm9udFNpemU6ICcxNnB4JywKICAgICAgY29sb3I6ICdyZ2JhKDAsMCwwLDAuODUpJywKICAgICAgbGluZUhlaWdodDogJzI0cHgnLAogICAgICBkaXNwbGF5OiAnYmxvY2snLAogICAgICBtYXJnaW5Cb3R0b206ICcxNnB4JywKICAgIH07CiAgICBjb25zdCBwU3R5bGUyID0gewogICAgICBtYXJnaW5Cb3R0b206ICcyNHB4JywKICAgIH07CiAgICBjb25zdCBzaG93RHJhd2VyID0gKCkgPT4gewogICAgICB2aXNpYmxlLnZhbHVlID0gdHJ1ZTsKICAgIH07CiAgICBjb25zdCBvbkNsb3NlID0gKCkgPT4gewogICAgICB2aXNpYmxlLnZhbHVlID0gZmFsc2U7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgdmlzaWJsZSwKICAgICAgcFN0eWxlLAogICAgICBwU3R5bGUyLAogICAgICBzaG93RHJhd2VyLAogICAgICBvbkNsb3NlLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:s(()=>[o(k,{"data-source":[{name:"Lily"},{name:"Lily"}],bordered:""},{renderItem:s(({item:G})=>[(b(),h(d,{key:`a-${G.id}`},{actions:s(()=>[n("a",{onClick:t[0]||(t[0]=(...Y)=>e.showDrawer&&e.showDrawer(...Y))},"View Profile")]),default:s(()=>[o(g,{description:"Progresser XTech"},{title:s(()=>[n("a",nn,P(G.name),1)]),avatar:s(()=>[o(c,{src:"https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"})]),_:2},1024)]),_:2},1024))]),_:1}),o(W,{width:"640",placement:"right",closable:!1,visible:e.visible,onClose:e.onClose},{default:s(()=>[n("p",{style:f([e.pStyle,e.pStyle2])},"User Profile",4),n("p",{style:f(e.pStyle)},"Personal",4),o(C,null,{default:s(()=>[o(u,{span:12},{default:s(()=>[o(l,{title:"Full Name",content:"Lily"})]),_:1}),o(u,{span:12},{default:s(()=>[o(l,{title:"Account",content:"AntDesign@example.com"})]),_:1})]),_:1}),o(C,null,{default:s(()=>[o(u,{span:12},{default:s(()=>[o(l,{title:"City",content:"HangZhou"})]),_:1}),o(u,{span:12},{default:s(()=>[o(l,{title:"Country",content:"China\u{1F1E8}\u{1F1F3}"})]),_:1})]),_:1}),o(C,null,{default:s(()=>[o(u,{span:12},{default:s(()=>[o(l,{title:"Birthday",content:"February 2,1900"})]),_:1}),o(u,{span:12},{default:s(()=>[o(l,{title:"Website",content:"-"})]),_:1})]),_:1}),o(C,null,{default:s(()=>[o(u,{span:12},{default:s(()=>[o(l,{title:"Message",content:"Make things as simple as possible but no simpler."})]),_:1})]),_:1}),o(Z),n("p",{style:f(e.pStyle)},"Company",4),o(C,null,{default:s(()=>[o(u,{span:12},{default:s(()=>[o(l,{title:"Position",content:"Programmer"})]),_:1}),o(u,{span:12},{default:s(()=>[o(l,{title:"Responsibilities",content:"Coding"})]),_:1})]),_:1}),o(C,null,{default:s(()=>[o(u,{span:12},{default:s(()=>[o(l,{title:"Department",content:"XTech"})]),_:1}),o(u,{span:12},{default:s(()=>[o(l,{title:"Supervisor"},{content:s(()=>t[1]||(t[1]=[n("a",null,"Lin",-1)])),_:1})]),_:1})]),_:1}),o(C,null,{default:s(()=>[o(u,{span:24},{default:s(()=>[o(l,{title:"Skills",content:"C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc."})]),_:1})]),_:1}),o(Z),n("p",{style:f(e.pStyle)},"Contacts",4),o(C,null,{default:s(()=>[o(u,{span:12},{default:s(()=>[o(l,{title:"Email",content:"ant-design-vue@example.com"})]),_:1}),o(u,{span:12},{default:s(()=>[o(l,{title:"Phone Number",content:"+86 181 0000 0000"})]),_:1})]),_:1}),o(C,null,{default:s(()=>[o(u,{span:24},{default:s(()=>[o(l,{title:"Github"},{content:s(()=>t[2]||(t[2]=[n("a",{href:"https://github.com/vueComponent/ant-design-vue"}," github.com/vueComponent/ant-design-vue ",-1)])),_:1})]),_:1})]),_:1})]),_:1},8,["visible","onClose"])]),htmlCode:s(()=>t[3]||(t[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-list")]),a(`
    `),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a(`[
      {
        name: 'Lily',
      },
      {
        name: 'Lily',
      },
    ]`),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"bordered"),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-list-item")]),a(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("`a-${item.id}`"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#actions"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("View Profile"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-list-item-meta")]),a(),n("span",{class:"token attr-name"},"description"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Progresser XTech"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("https://www.antdv.com/"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("{{ item.name }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a")]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#avatar"),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-list-item-meta")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-list-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-list")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(),n("span",{class:"token attr-name"},"width"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("640"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placement"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("right"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":closable"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("false"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":visible"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("[pStyle, pStyle2]"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("User Profile"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("pStyle"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Personal"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Full Name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Lily"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Account"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("AntDesign@example.com"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("City"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("HangZhou"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Country"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("China\u{1F1E8}\u{1F1F3}"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Birthday"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("February 2,1900"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Website"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("-"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(`
          `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Message"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Make things as simple as possible but no simpler."),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("pStyle"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Company"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Position"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Programmer"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Responsibilities"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Coding"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Department"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("XTech"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Supervisor"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#content"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),n("span",{class:"token punctuation"},">")]),a("Lin"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("description-item")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("24"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(`
          `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Skills"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc."),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("pStyle"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Contacts"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Email"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ant-design-vue@example.com"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Phone Number"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("+86 181 0000 0000"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("24"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Github"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#content"),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("https://github.com/vueComponent/ant-design-vue"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
              github.com/vueComponent/ant-design-vue
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a")]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("description-item")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(" descriptionItem "),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'./descriptionItem/index.vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
    descriptionItem`),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" visible "),n("span",{class:"token operator"},"="),a(" ref"),n("span",{class:"token operator"},"<"),a("boolean"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" pStyle "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"fontSize"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'16px'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"color"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'rgba(0,0,0,0.85)'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"lineHeight"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'24px'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"display"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'block'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"marginBottom"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'16px'"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" pStyle2 "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"marginBottom"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'24px'"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showDrawer"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onClose"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},","),a(`
      pStyle`),n("span",{class:"token punctuation"},","),a(`
      pStyle2`),n("span",{class:"token punctuation"},","),a(`
      showDrawer`),n("span",{class:"token punctuation"},","),a(`
      onClose`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:s(()=>t[4]||(t[4]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-list")]),a(`
    `),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a(`[
      {
        name: 'Lily',
      },
      {
        name: 'Lily',
      },
    ]`),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"bordered"),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-list-item")]),a(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("`a-${item.id}`"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#actions"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("View Profile"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-list-item-meta")]),a(),n("span",{class:"token attr-name"},"description"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Progresser XTech"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("https://www.antdv.com/"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("{{ item.name }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a")]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#avatar"),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-avatar")]),a(),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-list-item-meta")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-list-item")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-list")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(),n("span",{class:"token attr-name"},"width"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("640"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placement"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("right"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":closable"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("false"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":visible"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("[pStyle, pStyle2]"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("User Profile"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("pStyle"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Personal"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Full Name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Lily"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Account"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("AntDesign@example.com"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("City"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("HangZhou"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Country"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("China\u{1F1E8}\u{1F1F3}"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Birthday"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("February 2,1900"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Website"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("-"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(`
          `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Message"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Make things as simple as possible but no simpler."),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("pStyle"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Company"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Position"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Programmer"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Responsibilities"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Coding"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Department"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("XTech"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Supervisor"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#content"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),n("span",{class:"token punctuation"},">")]),a("Lin"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("description-item")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("24"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(`
          `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Skills"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc."),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("pStyle"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Contacts"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Email"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ant-design-vue@example.com"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Phone Number"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"content"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("+86 181 0000 0000"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("24"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("description-item")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Github"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#content"),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a")]),a(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("https://github.com/vueComponent/ant-design-vue"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
              github.com/vueComponent/ant-design-vue
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a")]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("description-item")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(" descriptionItem "),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'./descriptionItem/index.vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
    descriptionItem`),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" visible "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" pStyle "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"fontSize"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'16px'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"color"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'rgba(0,0,0,0.85)'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"lineHeight"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'24px'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"display"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'block'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"marginBottom"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'16px'"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" pStyle2 "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"marginBottom"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'24px'"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showDrawer"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onClose"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},","),a(`
      pStyle`),n("span",{class:"token punctuation"},","),a(`
      pStyle2`),n("span",{class:"token punctuation"},","),a(`
      showDrawer`),n("span",{class:"token punctuation"},","),a(`
      onClose`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const tn=v($,[["render",an]]),sn=y({setup(){const e=A(!1),t=A(!1);return{visible:e,childrenDrawer:t,showDrawer:()=>{e.value=!0},onClose:()=>{e.value=!1},showChildrenDrawer:()=>{t.value=!0}}}});function on(e,t,i,r,I,w){const c=p("a-button"),g=p("a-drawer"),d=p("demo-box");return b(),h(d,{jsfiddle:{us:"Open a new drawer on top of an existing drawer to handle multi branch tasks.",cn:"\u5728\u62BD\u5C49\u5185\u6253\u5F00\u65B0\u7684\u62BD\u5C49\uFF0C\u7528\u4EE5\u89E3\u51B3\u591A\u5206\u652F\u4EFB\u52A1\u7684\u590D\u6742\u72B6\u51B5\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u5728\u62BD\u5C49\u5185\u6253\u5F00\u65B0\u7684\u62BD\u5C49\uFF0C\u7528\u4EE5\u89E3\u51B3\u591A\u5206\u652F\u4EFB\u52A1\u7684\u590D\u6742\u72B6\u51B5\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Open a new drawer on top of an existing drawer to handle multi branch tasks.</p>
`,order:5,title:{"zh-CN":"\u591A\u5C42\u62BD\u5C49","en-US":"Multi-level drawer"},relativePath:"components/drawer/demo/multi-level-drawer.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9InNob3dEcmF3ZXIiPk9wZW48L2EtYnV0dG9uPgogIDxhLWRyYXdlcgogICAgdi1tb2RlbDp2aXNpYmxlPSJ2aXNpYmxlIgogICAgdGl0bGU9Ik11bHRpLWxldmVsIGRyYXdlciIKICAgIHdpZHRoPSI1MjAiCiAgICA6Y2xvc2FibGU9ImZhbHNlIgogICAgOmZvb3Rlci1zdHlsZT0ieyB0ZXh0QWxpZ246ICdyaWdodCcgfSIKICAgIEBjbG9zZT0ib25DbG9zZSIKICA+CiAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJzaG93Q2hpbGRyZW5EcmF3ZXIiPlR3by1sZXZlbCBkcmF3ZXI8L2EtYnV0dG9uPgogICAgPGEtZHJhd2VyCiAgICAgIHYtbW9kZWw6dmlzaWJsZT0iY2hpbGRyZW5EcmF3ZXIiCiAgICAgIHRpdGxlPSJUd28tbGV2ZWwgRHJhd2VyIgogICAgICB3aWR0aD0iMzIwIgogICAgICA6Y2xvc2FibGU9ImZhbHNlIgogICAgPgogICAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJzaG93Q2hpbGRyZW5EcmF3ZXIiPlRoaXMgaXMgdHdvLWxldmVsIGRyYXdlcjwvYS1idXR0b24+CiAgICA8L2EtZHJhd2VyPgoKICAgIDx0ZW1wbGF0ZSAjZm9vdGVyPgogICAgICA8YS1idXR0b24gc3R5bGU9Im1hcmdpbi1yaWdodDogOHB4IiBAY2xpY2s9Im9uQ2xvc2UiPkNhbmNlbDwvYS1idXR0b24+CiAgICAgIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9uQ2xvc2UiPlN1Ym1pdDwvYS1idXR0b24+CiAgICA8L3RlbXBsYXRlPgogIDwvYS1kcmF3ZXI+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CgpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgdmlzaWJsZSA9IHJlZjxib29sZWFuPihmYWxzZSk7CgogICAgY29uc3QgY2hpbGRyZW5EcmF3ZXIgPSByZWY8Ym9vbGVhbj4oZmFsc2UpOwoKICAgIGNvbnN0IHNob3dEcmF3ZXIgPSAoKSA9PiB7CiAgICAgIHZpc2libGUudmFsdWUgPSB0cnVlOwogICAgfTsKICAgIGNvbnN0IG9uQ2xvc2UgPSAoKSA9PiB7CiAgICAgIHZpc2libGUudmFsdWUgPSBmYWxzZTsKICAgIH07CiAgICBjb25zdCBzaG93Q2hpbGRyZW5EcmF3ZXIgPSAoKSA9PiB7CiAgICAgIGNoaWxkcmVuRHJhd2VyLnZhbHVlID0gdHJ1ZTsKICAgIH07CiAgICByZXR1cm4gewogICAgICB2aXNpYmxlLAogICAgICBjaGlsZHJlbkRyYXdlciwKICAgICAgc2hvd0RyYXdlciwKICAgICAgb25DbG9zZSwKICAgICAgc2hvd0NoaWxkcmVuRHJhd2VyLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9InNob3dEcmF3ZXIiPk9wZW48L2EtYnV0dG9uPgogIDxhLWRyYXdlcgogICAgdi1tb2RlbDp2aXNpYmxlPSJ2aXNpYmxlIgogICAgdGl0bGU9Ik11bHRpLWxldmVsIGRyYXdlciIKICAgIHdpZHRoPSI1MjAiCiAgICA6Y2xvc2FibGU9ImZhbHNlIgogICAgOmZvb3Rlci1zdHlsZT0ieyB0ZXh0QWxpZ246ICdyaWdodCcgfSIKICAgIEBjbG9zZT0ib25DbG9zZSIKICA+CiAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJzaG93Q2hpbGRyZW5EcmF3ZXIiPlR3by1sZXZlbCBkcmF3ZXI8L2EtYnV0dG9uPgogICAgPGEtZHJhd2VyCiAgICAgIHYtbW9kZWw6dmlzaWJsZT0iY2hpbGRyZW5EcmF3ZXIiCiAgICAgIHRpdGxlPSJUd28tbGV2ZWwgRHJhd2VyIgogICAgICB3aWR0aD0iMzIwIgogICAgICA6Y2xvc2FibGU9ImZhbHNlIgogICAgPgogICAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJzaG93Q2hpbGRyZW5EcmF3ZXIiPlRoaXMgaXMgdHdvLWxldmVsIGRyYXdlcjwvYS1idXR0b24+CiAgICA8L2EtZHJhd2VyPgoKICAgIDx0ZW1wbGF0ZSAjZm9vdGVyPgogICAgICA8YS1idXR0b24gc3R5bGU9Im1hcmdpbi1yaWdodDogOHB4IiBAY2xpY2s9Im9uQ2xvc2UiPkNhbmNlbDwvYS1idXR0b24+CiAgICAgIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9uQ2xvc2UiPlN1Ym1pdDwvYS1idXR0b24+CiAgICA8L3RlbXBsYXRlPgogIDwvYS1kcmF3ZXI+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IHZpc2libGUgPSByZWYoZmFsc2UpOwogICAgY29uc3QgY2hpbGRyZW5EcmF3ZXIgPSByZWYoZmFsc2UpOwogICAgY29uc3Qgc2hvd0RyYXdlciA9ICgpID0+IHsKICAgICAgdmlzaWJsZS52YWx1ZSA9IHRydWU7CiAgICB9OwogICAgY29uc3Qgb25DbG9zZSA9ICgpID0+IHsKICAgICAgdmlzaWJsZS52YWx1ZSA9IGZhbHNlOwogICAgfTsKICAgIGNvbnN0IHNob3dDaGlsZHJlbkRyYXdlciA9ICgpID0+IHsKICAgICAgY2hpbGRyZW5EcmF3ZXIudmFsdWUgPSB0cnVlOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIHZpc2libGUsCiAgICAgIGNoaWxkcmVuRHJhd2VyLAogICAgICBzaG93RHJhd2VyLAogICAgICBvbkNsb3NlLAogICAgICBzaG93Q2hpbGRyZW5EcmF3ZXIsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:s(()=>[o(c,{type:"primary",onClick:e.showDrawer},{default:s(()=>t[2]||(t[2]=[a("Open")])),_:1,__:[2]},8,["onClick"]),o(g,{visible:e.visible,"onUpdate:visible":t[1]||(t[1]=k=>e.visible=k),title:"Multi-level drawer",width:"520",closable:!1,"footer-style":{textAlign:"right"},onClose:e.onClose},{footer:s(()=>[o(c,{style:{"margin-right":"8px"},onClick:e.onClose},{default:s(()=>t[5]||(t[5]=[a("Cancel")])),_:1,__:[5]},8,["onClick"]),o(c,{type:"primary",onClick:e.onClose},{default:s(()=>t[6]||(t[6]=[a("Submit")])),_:1,__:[6]},8,["onClick"])]),default:s(()=>[o(c,{type:"primary",onClick:e.showChildrenDrawer},{default:s(()=>t[3]||(t[3]=[a("Two-level drawer")])),_:1,__:[3]},8,["onClick"]),o(g,{visible:e.childrenDrawer,"onUpdate:visible":t[0]||(t[0]=k=>e.childrenDrawer=k),title:"Two-level Drawer",width:"320",closable:!1},{default:s(()=>[o(c,{type:"primary",onClick:e.showChildrenDrawer},{default:s(()=>t[4]||(t[4]=[a("This is two-level drawer")])),_:1,__:[4]},8,["onClick"])]),_:1},8,["visible"])]),_:1},8,["visible","onClose"])]),htmlCode:s(()=>t[7]||(t[7]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Open"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("visible")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Multi-level drawer"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"width"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("520"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":closable"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("false"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":footer-style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ textAlign: 'right' }"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showChildrenDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Two-level drawer"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("visible")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("childrenDrawer"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Two-level Drawer"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},"width"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("320"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":closable"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("false"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showChildrenDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("This is two-level drawer"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`

    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#footer"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 8px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Cancel"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Submit"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`

`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" visible "),n("span",{class:"token operator"},"="),a(" ref"),n("span",{class:"token operator"},"<"),a("boolean"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(" childrenDrawer "),n("span",{class:"token operator"},"="),a(" ref"),n("span",{class:"token operator"},"<"),a("boolean"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showDrawer"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onClose"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showChildrenDrawer"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      childrenDrawer`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},","),a(`
      childrenDrawer`),n("span",{class:"token punctuation"},","),a(`
      showDrawer`),n("span",{class:"token punctuation"},","),a(`
      onClose`),n("span",{class:"token punctuation"},","),a(`
      showChildrenDrawer`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:s(()=>t[8]||(t[8]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Open"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("visible")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Multi-level drawer"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"width"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("520"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":closable"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("false"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":footer-style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ textAlign: 'right' }"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showChildrenDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Two-level drawer"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("visible")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("childrenDrawer"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Two-level Drawer"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},"width"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("320"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":closable"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("false"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showChildrenDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("This is two-level drawer"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`

    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#footer"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 8px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Cancel"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Submit"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" visible "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" childrenDrawer "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showDrawer"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onClose"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showChildrenDrawer"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      childrenDrawer`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},","),a(`
      childrenDrawer`),n("span",{class:"token punctuation"},","),a(`
      showDrawer`),n("span",{class:"token punctuation"},","),a(`
      onClose`),n("span",{class:"token punctuation"},","),a(`
      showChildrenDrawer`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const en=v(sn,[["render",on]]),pn=y({components:{PlusOutlined:V},setup(){const e=J({name:"",url:"",owner:"",type:"",approver:"",dateTime:null,description:""}),t={name:[{required:!0,message:"Please enter user name"}],url:[{required:!0,message:"please enter url"}],owner:[{required:!0,message:"Please select an owner"}],type:[{required:!0,message:"Please choose the type"}],approver:[{required:!0,message:"Please choose the approver"}],dateTime:[{required:!0,message:"Please choose the dateTime",type:"object"}],description:[{required:!0,message:"Please enter url description"}]},i=A(!1);return{form:e,rules:t,visible:i,showDrawer:()=>{i.value=!0},onClose:()=>{i.value=!1}}}});function cn(e,t,i,r,I,w){const c=p("PlusOutlined"),g=p("a-button"),d=p("a-input"),k=p("a-form-item"),l=p("a-col"),u=p("a-row"),C=p("a-select-option"),Z=p("a-select"),W=p("a-date-picker"),S=p("a-textarea"),G=p("a-form"),Y=p("a-space"),X=p("a-drawer"),N=p("demo-box");return b(),h(N,{jsfiddle:{us:"Use form in drawer with submit button.",cn:"\u5728\u62BD\u5C49\u4E2D\u4F7F\u7528\u8868\u5355\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u5728\u62BD\u5C49\u4E2D\u4F7F\u7528\u8868\u5355\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Use form in drawer with submit button.</p>
`,order:4,title:{"zh-CN":"\u62BD\u5C49\u8868\u5355","en-US":"Submit form in drawer"},relativePath:"components/drawer/demo/form-in-drawer.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9InNob3dEcmF3ZXIiPgogICAgPHRlbXBsYXRlICNpY29uPjxQbHVzT3V0bGluZWQgLz48L3RlbXBsYXRlPgogICAgTmV3IGFjY291bnQKICA8L2EtYnV0dG9uPgogIDxhLWRyYXdlcgogICAgdGl0bGU9IkNyZWF0ZSBhIG5ldyBhY2NvdW50IgogICAgOndpZHRoPSI3MjAiCiAgICA6dmlzaWJsZT0idmlzaWJsZSIKICAgIDpib2R5LXN0eWxlPSJ7IHBhZGRpbmdCb3R0b206ICc4MHB4JyB9IgogICAgOmZvb3Rlci1zdHlsZT0ieyB0ZXh0QWxpZ246ICdyaWdodCcgfSIKICAgIEBjbG9zZT0ib25DbG9zZSIKICA+CiAgICA8YS1mb3JtIDptb2RlbD0iZm9ybSIgOnJ1bGVzPSJydWxlcyIgbGF5b3V0PSJ2ZXJ0aWNhbCI+CiAgICAgIDxhLXJvdyA6Z3V0dGVyPSIxNiI+CiAgICAgICAgPGEtY29sIDpzcGFuPSIxMiI+CiAgICAgICAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9Ik5hbWUiIG5hbWU9Im5hbWUiPgogICAgICAgICAgICA8YS1pbnB1dCB2LW1vZGVsOnZhbHVlPSJmb3JtLm5hbWUiIHBsYWNlaG9sZGVyPSJQbGVhc2UgZW50ZXIgdXNlciBuYW1lIiAvPgogICAgICAgICAgPC9hLWZvcm0taXRlbT4KICAgICAgICA8L2EtY29sPgogICAgICAgIDxhLWNvbCA6c3Bhbj0iMTIiPgogICAgICAgICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJVcmwiIG5hbWU9InVybCI+CiAgICAgICAgICAgIDxhLWlucHV0CiAgICAgICAgICAgICAgdi1tb2RlbDp2YWx1ZT0iZm9ybS51cmwiCiAgICAgICAgICAgICAgc3R5bGU9IndpZHRoOiAxMDAlIgogICAgICAgICAgICAgIGFkZG9uLWJlZm9yZT0iaHR0cDovLyIKICAgICAgICAgICAgICBhZGRvbi1hZnRlcj0iLmNvbSIKICAgICAgICAgICAgICBwbGFjZWhvbGRlcj0icGxlYXNlIGVudGVyIHVybCIKICAgICAgICAgICAgLz4KICAgICAgICAgIDwvYS1mb3JtLWl0ZW0+CiAgICAgICAgPC9hLWNvbD4KICAgICAgPC9hLXJvdz4KICAgICAgPGEtcm93IDpndXR0ZXI9IjE2Ij4KICAgICAgICA8YS1jb2wgOnNwYW49IjEyIj4KICAgICAgICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iT3duZXIiIG5hbWU9Im93bmVyIj4KICAgICAgICAgICAgPGEtc2VsZWN0IHYtbW9kZWw6dmFsdWU9ImZvcm0ub3duZXIiIHBsYWNlaG9sZGVyPSJQbGVhc2UgYS1zIGFuIG93bmVyIj4KICAgICAgICAgICAgICA8YS1zZWxlY3Qtb3B0aW9uIHZhbHVlPSJ4aWFvIj5YaWFveGlhbyBGdTwvYS1zZWxlY3Qtb3B0aW9uPgogICAgICAgICAgICAgIDxhLXNlbGVjdC1vcHRpb24gdmFsdWU9Im1hbyI+TWFvbWFvIFpob3U8L2Etc2VsZWN0LW9wdGlvbj4KICAgICAgICAgICAgPC9hLXNlbGVjdD4KICAgICAgICAgIDwvYS1mb3JtLWl0ZW0+CiAgICAgICAgPC9hLWNvbD4KICAgICAgICA8YS1jb2wgOnNwYW49IjEyIj4KICAgICAgICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iVHlwZSIgbmFtZT0idHlwZSI+CiAgICAgICAgICAgIDxhLXNlbGVjdCB2LW1vZGVsOnZhbHVlPSJmb3JtLnR5cGUiIHBsYWNlaG9sZGVyPSJQbGVhc2UgY2hvb3NlIHRoZSB0eXBlIj4KICAgICAgICAgICAgICA8YS1zZWxlY3Qtb3B0aW9uIHZhbHVlPSJwcml2YXRlIj5Qcml2YXRlPC9hLXNlbGVjdC1vcHRpb24+CiAgICAgICAgICAgICAgPGEtc2VsZWN0LW9wdGlvbiB2YWx1ZT0icHVibGljIj5QdWJsaWM8L2Etc2VsZWN0LW9wdGlvbj4KICAgICAgICAgICAgPC9hLXNlbGVjdD4KICAgICAgICAgIDwvYS1mb3JtLWl0ZW0+CiAgICAgICAgPC9hLWNvbD4KICAgICAgPC9hLXJvdz4KICAgICAgPGEtcm93IDpndXR0ZXI9IjE2Ij4KICAgICAgICA8YS1jb2wgOnNwYW49IjEyIj4KICAgICAgICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iQXBwcm92ZXIiIG5hbWU9ImFwcHJvdmVyIj4KICAgICAgICAgICAgPGEtc2VsZWN0IHYtbW9kZWw6dmFsdWU9ImZvcm0uYXBwcm92ZXIiIHBsYWNlaG9sZGVyPSJQbGVhc2UgY2hvb3NlIHRoZSBhcHByb3ZlciI+CiAgICAgICAgICAgICAgPGEtc2VsZWN0LW9wdGlvbiB2YWx1ZT0iamFjayI+SmFjayBNYTwvYS1zZWxlY3Qtb3B0aW9uPgogICAgICAgICAgICAgIDxhLXNlbGVjdC1vcHRpb24gdmFsdWU9InRvbSI+VG9tIExpdTwvYS1zZWxlY3Qtb3B0aW9uPgogICAgICAgICAgICA8L2Etc2VsZWN0PgogICAgICAgICAgPC9hLWZvcm0taXRlbT4KICAgICAgICA8L2EtY29sPgogICAgICAgIDxhLWNvbCA6c3Bhbj0iMTIiPgogICAgICAgICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJEYXRlVGltZSIgbmFtZT0iZGF0ZVRpbWUiPgogICAgICAgICAgICA8YS1kYXRlLXBpY2tlcgogICAgICAgICAgICAgIHYtbW9kZWw6dmFsdWU9ImZvcm0uZGF0ZVRpbWUiCiAgICAgICAgICAgICAgc3R5bGU9IndpZHRoOiAxMDAlIgogICAgICAgICAgICAgIDpnZXQtcG9wdXAtY29udGFpbmVyPSJ0cmlnZ2VyID0+IHRyaWdnZXIucGFyZW50RWxlbWVudCIKICAgICAgICAgICAgLz4KICAgICAgICAgIDwvYS1mb3JtLWl0ZW0+CiAgICAgICAgPC9hLWNvbD4KICAgICAgPC9hLXJvdz4KICAgICAgPGEtcm93IDpndXR0ZXI9IjE2Ij4KICAgICAgICA8YS1jb2wgOnNwYW49IjI0Ij4KICAgICAgICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iRGVzY3JpcHRpb24iIG5hbWU9ImRlc2NyaXB0aW9uIj4KICAgICAgICAgICAgPGEtdGV4dGFyZWEKICAgICAgICAgICAgICB2LW1vZGVsOnZhbHVlPSJmb3JtLmRlc2NyaXB0aW9uIgogICAgICAgICAgICAgIDpyb3dzPSI0IgogICAgICAgICAgICAgIHBsYWNlaG9sZGVyPSJwbGVhc2UgZW50ZXIgdXJsIGRlc2NyaXB0aW9uIgogICAgICAgICAgICAvPgogICAgICAgICAgPC9hLWZvcm0taXRlbT4KICAgICAgICA8L2EtY29sPgogICAgICA8L2Etcm93PgogICAgPC9hLWZvcm0+CiAgICA8dGVtcGxhdGUgI2V4dHJhPgogICAgICA8YS1zcGFjZT4KICAgICAgICA8YS1idXR0b24gQGNsaWNrPSJvbkNsb3NlIj5DYW5jZWw8L2EtYnV0dG9uPgogICAgICAgIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9uQ2xvc2UiPlN1Ym1pdDwvYS1idXR0b24+CiAgICAgIDwvYS1zcGFjZT4KICAgIDwvdGVtcGxhdGU+CiAgPC9hLWRyYXdlcj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IFBsdXNPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVhY3RpdmUsIHJlZiB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB0eXBlIHsgUnVsZSB9IGZyb20gJ2FudC1kZXNpZ24tdnVlL2VzL2Zvcm0nOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIFBsdXNPdXRsaW5lZCwKICB9LAogIHNldHVwKCkgewogICAgY29uc3QgZm9ybSA9IHJlYWN0aXZlKHsKICAgICAgbmFtZTogJycsCiAgICAgIHVybDogJycsCiAgICAgIG93bmVyOiAnJywKICAgICAgdHlwZTogJycsCiAgICAgIGFwcHJvdmVyOiAnJywKICAgICAgZGF0ZVRpbWU6IG51bGwsCiAgICAgIGRlc2NyaXB0aW9uOiAnJywKICAgIH0pOwoKICAgIGNvbnN0IHJ1bGVzOiBSZWNvcmQ8c3RyaW5nLCBSdWxlW10+ID0gewogICAgICBuYW1lOiBbeyByZXF1aXJlZDogdHJ1ZSwgbWVzc2FnZTogJ1BsZWFzZSBlbnRlciB1c2VyIG5hbWUnIH1dLAogICAgICB1cmw6IFt7IHJlcXVpcmVkOiB0cnVlLCBtZXNzYWdlOiAncGxlYXNlIGVudGVyIHVybCcgfV0sCiAgICAgIG93bmVyOiBbeyByZXF1aXJlZDogdHJ1ZSwgbWVzc2FnZTogJ1BsZWFzZSBzZWxlY3QgYW4gb3duZXInIH1dLAogICAgICB0eXBlOiBbeyByZXF1aXJlZDogdHJ1ZSwgbWVzc2FnZTogJ1BsZWFzZSBjaG9vc2UgdGhlIHR5cGUnIH1dLAogICAgICBhcHByb3ZlcjogW3sgcmVxdWlyZWQ6IHRydWUsIG1lc3NhZ2U6ICdQbGVhc2UgY2hvb3NlIHRoZSBhcHByb3ZlcicgfV0sCiAgICAgIGRhdGVUaW1lOiBbeyByZXF1aXJlZDogdHJ1ZSwgbWVzc2FnZTogJ1BsZWFzZSBjaG9vc2UgdGhlIGRhdGVUaW1lJywgdHlwZTogJ29iamVjdCcgfV0sCiAgICAgIGRlc2NyaXB0aW9uOiBbeyByZXF1aXJlZDogdHJ1ZSwgbWVzc2FnZTogJ1BsZWFzZSBlbnRlciB1cmwgZGVzY3JpcHRpb24nIH1dLAogICAgfTsKCiAgICBjb25zdCB2aXNpYmxlID0gcmVmPGJvb2xlYW4+KGZhbHNlKTsKCiAgICBjb25zdCBzaG93RHJhd2VyID0gKCkgPT4gewogICAgICB2aXNpYmxlLnZhbHVlID0gdHJ1ZTsKICAgIH07CgogICAgY29uc3Qgb25DbG9zZSA9ICgpID0+IHsKICAgICAgdmlzaWJsZS52YWx1ZSA9IGZhbHNlOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIGZvcm0sCiAgICAgIHJ1bGVzLAogICAgICB2aXNpYmxlLAogICAgICBzaG93RHJhd2VyLAogICAgICBvbkNsb3NlLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9InNob3dEcmF3ZXIiPgogICAgPHRlbXBsYXRlICNpY29uPjxQbHVzT3V0bGluZWQgLz48L3RlbXBsYXRlPgogICAgTmV3IGFjY291bnQKICA8L2EtYnV0dG9uPgogIDxhLWRyYXdlcgogICAgdGl0bGU9IkNyZWF0ZSBhIG5ldyBhY2NvdW50IgogICAgOndpZHRoPSI3MjAiCiAgICA6dmlzaWJsZT0idmlzaWJsZSIKICAgIDpib2R5LXN0eWxlPSJ7IHBhZGRpbmdCb3R0b206ICc4MHB4JyB9IgogICAgOmZvb3Rlci1zdHlsZT0ieyB0ZXh0QWxpZ246ICdyaWdodCcgfSIKICAgIEBjbG9zZT0ib25DbG9zZSIKICA+CiAgICA8YS1mb3JtIDptb2RlbD0iZm9ybSIgOnJ1bGVzPSJydWxlcyIgbGF5b3V0PSJ2ZXJ0aWNhbCI+CiAgICAgIDxhLXJvdyA6Z3V0dGVyPSIxNiI+CiAgICAgICAgPGEtY29sIDpzcGFuPSIxMiI+CiAgICAgICAgICA8YS1mb3JtLWl0ZW0gbGFiZWw9Ik5hbWUiIG5hbWU9Im5hbWUiPgogICAgICAgICAgICA8YS1pbnB1dCB2LW1vZGVsOnZhbHVlPSJmb3JtLm5hbWUiIHBsYWNlaG9sZGVyPSJQbGVhc2UgZW50ZXIgdXNlciBuYW1lIiAvPgogICAgICAgICAgPC9hLWZvcm0taXRlbT4KICAgICAgICA8L2EtY29sPgogICAgICAgIDxhLWNvbCA6c3Bhbj0iMTIiPgogICAgICAgICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJVcmwiIG5hbWU9InVybCI+CiAgICAgICAgICAgIDxhLWlucHV0CiAgICAgICAgICAgICAgdi1tb2RlbDp2YWx1ZT0iZm9ybS51cmwiCiAgICAgICAgICAgICAgc3R5bGU9IndpZHRoOiAxMDAlIgogICAgICAgICAgICAgIGFkZG9uLWJlZm9yZT0iaHR0cDovLyIKICAgICAgICAgICAgICBhZGRvbi1hZnRlcj0iLmNvbSIKICAgICAgICAgICAgICBwbGFjZWhvbGRlcj0icGxlYXNlIGVudGVyIHVybCIKICAgICAgICAgICAgLz4KICAgICAgICAgIDwvYS1mb3JtLWl0ZW0+CiAgICAgICAgPC9hLWNvbD4KICAgICAgPC9hLXJvdz4KICAgICAgPGEtcm93IDpndXR0ZXI9IjE2Ij4KICAgICAgICA8YS1jb2wgOnNwYW49IjEyIj4KICAgICAgICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iT3duZXIiIG5hbWU9Im93bmVyIj4KICAgICAgICAgICAgPGEtc2VsZWN0IHYtbW9kZWw6dmFsdWU9ImZvcm0ub3duZXIiIHBsYWNlaG9sZGVyPSJQbGVhc2UgYS1zIGFuIG93bmVyIj4KICAgICAgICAgICAgICA8YS1zZWxlY3Qtb3B0aW9uIHZhbHVlPSJ4aWFvIj5YaWFveGlhbyBGdTwvYS1zZWxlY3Qtb3B0aW9uPgogICAgICAgICAgICAgIDxhLXNlbGVjdC1vcHRpb24gdmFsdWU9Im1hbyI+TWFvbWFvIFpob3U8L2Etc2VsZWN0LW9wdGlvbj4KICAgICAgICAgICAgPC9hLXNlbGVjdD4KICAgICAgICAgIDwvYS1mb3JtLWl0ZW0+CiAgICAgICAgPC9hLWNvbD4KICAgICAgICA8YS1jb2wgOnNwYW49IjEyIj4KICAgICAgICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iVHlwZSIgbmFtZT0idHlwZSI+CiAgICAgICAgICAgIDxhLXNlbGVjdCB2LW1vZGVsOnZhbHVlPSJmb3JtLnR5cGUiIHBsYWNlaG9sZGVyPSJQbGVhc2UgY2hvb3NlIHRoZSB0eXBlIj4KICAgICAgICAgICAgICA8YS1zZWxlY3Qtb3B0aW9uIHZhbHVlPSJwcml2YXRlIj5Qcml2YXRlPC9hLXNlbGVjdC1vcHRpb24+CiAgICAgICAgICAgICAgPGEtc2VsZWN0LW9wdGlvbiB2YWx1ZT0icHVibGljIj5QdWJsaWM8L2Etc2VsZWN0LW9wdGlvbj4KICAgICAgICAgICAgPC9hLXNlbGVjdD4KICAgICAgICAgIDwvYS1mb3JtLWl0ZW0+CiAgICAgICAgPC9hLWNvbD4KICAgICAgPC9hLXJvdz4KICAgICAgPGEtcm93IDpndXR0ZXI9IjE2Ij4KICAgICAgICA8YS1jb2wgOnNwYW49IjEyIj4KICAgICAgICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iQXBwcm92ZXIiIG5hbWU9ImFwcHJvdmVyIj4KICAgICAgICAgICAgPGEtc2VsZWN0IHYtbW9kZWw6dmFsdWU9ImZvcm0uYXBwcm92ZXIiIHBsYWNlaG9sZGVyPSJQbGVhc2UgY2hvb3NlIHRoZSBhcHByb3ZlciI+CiAgICAgICAgICAgICAgPGEtc2VsZWN0LW9wdGlvbiB2YWx1ZT0iamFjayI+SmFjayBNYTwvYS1zZWxlY3Qtb3B0aW9uPgogICAgICAgICAgICAgIDxhLXNlbGVjdC1vcHRpb24gdmFsdWU9InRvbSI+VG9tIExpdTwvYS1zZWxlY3Qtb3B0aW9uPgogICAgICAgICAgICA8L2Etc2VsZWN0PgogICAgICAgICAgPC9hLWZvcm0taXRlbT4KICAgICAgICA8L2EtY29sPgogICAgICAgIDxhLWNvbCA6c3Bhbj0iMTIiPgogICAgICAgICAgPGEtZm9ybS1pdGVtIGxhYmVsPSJEYXRlVGltZSIgbmFtZT0iZGF0ZVRpbWUiPgogICAgICAgICAgICA8YS1kYXRlLXBpY2tlcgogICAgICAgICAgICAgIHYtbW9kZWw6dmFsdWU9ImZvcm0uZGF0ZVRpbWUiCiAgICAgICAgICAgICAgc3R5bGU9IndpZHRoOiAxMDAlIgogICAgICAgICAgICAgIDpnZXQtcG9wdXAtY29udGFpbmVyPSJ0cmlnZ2VyID0+IHRyaWdnZXIucGFyZW50RWxlbWVudCIKICAgICAgICAgICAgLz4KICAgICAgICAgIDwvYS1mb3JtLWl0ZW0+CiAgICAgICAgPC9hLWNvbD4KICAgICAgPC9hLXJvdz4KICAgICAgPGEtcm93IDpndXR0ZXI9IjE2Ij4KICAgICAgICA8YS1jb2wgOnNwYW49IjI0Ij4KICAgICAgICAgIDxhLWZvcm0taXRlbSBsYWJlbD0iRGVzY3JpcHRpb24iIG5hbWU9ImRlc2NyaXB0aW9uIj4KICAgICAgICAgICAgPGEtdGV4dGFyZWEKICAgICAgICAgICAgICB2LW1vZGVsOnZhbHVlPSJmb3JtLmRlc2NyaXB0aW9uIgogICAgICAgICAgICAgIDpyb3dzPSI0IgogICAgICAgICAgICAgIHBsYWNlaG9sZGVyPSJwbGVhc2UgZW50ZXIgdXJsIGRlc2NyaXB0aW9uIgogICAgICAgICAgICAvPgogICAgICAgICAgPC9hLWZvcm0taXRlbT4KICAgICAgICA8L2EtY29sPgogICAgICA8L2Etcm93PgogICAgPC9hLWZvcm0+CiAgICA8dGVtcGxhdGUgI2V4dHJhPgogICAgICA8YS1zcGFjZT4KICAgICAgICA8YS1idXR0b24gQGNsaWNrPSJvbkNsb3NlIj5DYW5jZWw8L2EtYnV0dG9uPgogICAgICAgIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9Im9uQ2xvc2UiPlN1Ym1pdDwvYS1idXR0b24+CiAgICAgIDwvYS1zcGFjZT4KICAgIDwvdGVtcGxhdGU+CiAgPC9hLWRyYXdlcj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgUGx1c091dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgcmVmIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBQbHVzT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IGZvcm0gPSByZWFjdGl2ZSh7CiAgICAgIG5hbWU6ICcnLAogICAgICB1cmw6ICcnLAogICAgICBvd25lcjogJycsCiAgICAgIHR5cGU6ICcnLAogICAgICBhcHByb3ZlcjogJycsCiAgICAgIGRhdGVUaW1lOiBudWxsLAogICAgICBkZXNjcmlwdGlvbjogJycsCiAgICB9KTsKICAgIGNvbnN0IHJ1bGVzID0gewogICAgICBuYW1lOiBbewogICAgICAgIHJlcXVpcmVkOiB0cnVlLAogICAgICAgIG1lc3NhZ2U6ICdQbGVhc2UgZW50ZXIgdXNlciBuYW1lJywKICAgICAgfV0sCiAgICAgIHVybDogW3sKICAgICAgICByZXF1aXJlZDogdHJ1ZSwKICAgICAgICBtZXNzYWdlOiAncGxlYXNlIGVudGVyIHVybCcsCiAgICAgIH1dLAogICAgICBvd25lcjogW3sKICAgICAgICByZXF1aXJlZDogdHJ1ZSwKICAgICAgICBtZXNzYWdlOiAnUGxlYXNlIHNlbGVjdCBhbiBvd25lcicsCiAgICAgIH1dLAogICAgICB0eXBlOiBbewogICAgICAgIHJlcXVpcmVkOiB0cnVlLAogICAgICAgIG1lc3NhZ2U6ICdQbGVhc2UgY2hvb3NlIHRoZSB0eXBlJywKICAgICAgfV0sCiAgICAgIGFwcHJvdmVyOiBbewogICAgICAgIHJlcXVpcmVkOiB0cnVlLAogICAgICAgIG1lc3NhZ2U6ICdQbGVhc2UgY2hvb3NlIHRoZSBhcHByb3ZlcicsCiAgICAgIH1dLAogICAgICBkYXRlVGltZTogW3sKICAgICAgICByZXF1aXJlZDogdHJ1ZSwKICAgICAgICBtZXNzYWdlOiAnUGxlYXNlIGNob29zZSB0aGUgZGF0ZVRpbWUnLAogICAgICAgIHR5cGU6ICdvYmplY3QnLAogICAgICB9XSwKICAgICAgZGVzY3JpcHRpb246IFt7CiAgICAgICAgcmVxdWlyZWQ6IHRydWUsCiAgICAgICAgbWVzc2FnZTogJ1BsZWFzZSBlbnRlciB1cmwgZGVzY3JpcHRpb24nLAogICAgICB9XSwKICAgIH07CiAgICBjb25zdCB2aXNpYmxlID0gcmVmKGZhbHNlKTsKICAgIGNvbnN0IHNob3dEcmF3ZXIgPSAoKSA9PiB7CiAgICAgIHZpc2libGUudmFsdWUgPSB0cnVlOwogICAgfTsKICAgIGNvbnN0IG9uQ2xvc2UgPSAoKSA9PiB7CiAgICAgIHZpc2libGUudmFsdWUgPSBmYWxzZTsKICAgIH07CiAgICByZXR1cm4gewogICAgICBmb3JtLAogICAgICBydWxlcywKICAgICAgdmlzaWJsZSwKICAgICAgc2hvd0RyYXdlciwKICAgICAgb25DbG9zZSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:s(()=>[o(g,{type:"primary",onClick:e.showDrawer},{icon:s(()=>[o(c)]),default:s(()=>[t[7]||(t[7]=a(" New account "))]),_:1,__:[7]},8,["onClick"]),o(X,{title:"Create a new account",width:720,visible:e.visible,"body-style":{paddingBottom:"80px"},"footer-style":{textAlign:"right"},onClose:e.onClose},{extra:s(()=>[o(Y,null,{default:s(()=>[o(g,{onClick:e.onClose},{default:s(()=>t[14]||(t[14]=[a("Cancel")])),_:1,__:[14]},8,["onClick"]),o(g,{type:"primary",onClick:e.onClose},{default:s(()=>t[15]||(t[15]=[a("Submit")])),_:1,__:[15]},8,["onClick"])]),_:1})]),default:s(()=>[o(G,{model:e.form,rules:e.rules,layout:"vertical"},{default:s(()=>[o(u,{gutter:16},{default:s(()=>[o(l,{span:12},{default:s(()=>[o(k,{label:"Name",name:"name"},{default:s(()=>[o(d,{value:e.form.name,"onUpdate:value":t[0]||(t[0]=m=>e.form.name=m),placeholder:"Please enter user name"},null,8,["value"])]),_:1})]),_:1}),o(l,{span:12},{default:s(()=>[o(k,{label:"Url",name:"url"},{default:s(()=>[o(d,{value:e.form.url,"onUpdate:value":t[1]||(t[1]=m=>e.form.url=m),style:{width:"100%"},"addon-before":"http://","addon-after":".com",placeholder:"please enter url"},null,8,["value"])]),_:1})]),_:1})]),_:1}),o(u,{gutter:16},{default:s(()=>[o(l,{span:12},{default:s(()=>[o(k,{label:"Owner",name:"owner"},{default:s(()=>[o(Z,{value:e.form.owner,"onUpdate:value":t[2]||(t[2]=m=>e.form.owner=m),placeholder:"Please a-s an owner"},{default:s(()=>[o(C,{value:"xiao"},{default:s(()=>t[8]||(t[8]=[a("Xiaoxiao Fu")])),_:1,__:[8]}),o(C,{value:"mao"},{default:s(()=>t[9]||(t[9]=[a("Maomao Zhou")])),_:1,__:[9]})]),_:1},8,["value"])]),_:1})]),_:1}),o(l,{span:12},{default:s(()=>[o(k,{label:"Type",name:"type"},{default:s(()=>[o(Z,{value:e.form.type,"onUpdate:value":t[3]||(t[3]=m=>e.form.type=m),placeholder:"Please choose the type"},{default:s(()=>[o(C,{value:"private"},{default:s(()=>t[10]||(t[10]=[a("Private")])),_:1,__:[10]}),o(C,{value:"public"},{default:s(()=>t[11]||(t[11]=[a("Public")])),_:1,__:[11]})]),_:1},8,["value"])]),_:1})]),_:1})]),_:1}),o(u,{gutter:16},{default:s(()=>[o(l,{span:12},{default:s(()=>[o(k,{label:"Approver",name:"approver"},{default:s(()=>[o(Z,{value:e.form.approver,"onUpdate:value":t[4]||(t[4]=m=>e.form.approver=m),placeholder:"Please choose the approver"},{default:s(()=>[o(C,{value:"jack"},{default:s(()=>t[12]||(t[12]=[a("Jack Ma")])),_:1,__:[12]}),o(C,{value:"tom"},{default:s(()=>t[13]||(t[13]=[a("Tom Liu")])),_:1,__:[13]})]),_:1},8,["value"])]),_:1})]),_:1}),o(l,{span:12},{default:s(()=>[o(k,{label:"DateTime",name:"dateTime"},{default:s(()=>[o(W,{value:e.form.dateTime,"onUpdate:value":t[5]||(t[5]=m=>e.form.dateTime=m),style:{width:"100%"},"get-popup-container":m=>m.parentElement},null,8,["value","get-popup-container"])]),_:1})]),_:1})]),_:1}),o(u,{gutter:16},{default:s(()=>[o(l,{span:24},{default:s(()=>[o(k,{label:"Description",name:"description"},{default:s(()=>[o(S,{value:e.form.description,"onUpdate:value":t[6]||(t[6]=m=>e.form.description=m),rows:4,placeholder:"please enter url description"},null,8,["value"])]),_:1})]),_:1})]),_:1})]),_:1},8,["model","rules"])]),_:1},8,["visible","onClose"])]),htmlCode:s(()=>t[16]||(t[16]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("PlusOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
    New account
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(`
    `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Create a new account"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":width"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("720"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":visible"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":body-style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ paddingBottom: '80px' }"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":footer-style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ textAlign: 'right' }"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("form"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":rules"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("rules"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"layout"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("vertical"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},":gutter"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("16"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("name"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("form.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Please enter user name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Url"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("url"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(`
              `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("form.url"),n("span",{class:"token punctuation"},'"')]),a(`
              `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 100%")]),n("span",{class:"token punctuation"},'"')])]),a(`
              `),n("span",{class:"token attr-name"},"addon-before"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("http://"),n("span",{class:"token punctuation"},'"')]),a(`
              `),n("span",{class:"token attr-name"},"addon-after"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a(".com"),n("span",{class:"token punctuation"},'"')]),a(`
              `),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("please enter url"),n("span",{class:"token punctuation"},'"')]),a(`
            `),n("span",{class:"token punctuation"},"/>")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},":gutter"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("16"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Owner"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("owner"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("form.owner"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Please a-s an owner"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("xiao"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Xiaoxiao Fu"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("mao"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Maomao Zhou"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select")]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Type"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("form.type"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Please choose the type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("private"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Private"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("public"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Public"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select")]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},":gutter"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("16"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Approver"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("approver"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("form.approver"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Please choose the approver"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("jack"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Jack Ma"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("tom"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Tom Liu"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select")]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("DateTime"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("dateTime"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-date-picker")]),a(`
              `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("form.dateTime"),n("span",{class:"token punctuation"},'"')]),a(`
              `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 100%")]),n("span",{class:"token punctuation"},'"')])]),a(`
              `),n("span",{class:"token attr-name"},":get-popup-container"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("trigger => trigger.parentElement"),n("span",{class:"token punctuation"},'"')]),a(`
            `),n("span",{class:"token punctuation"},"/>")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},":gutter"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("16"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("24"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Description"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("description"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-textarea")]),a(`
              `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("form.description"),n("span",{class:"token punctuation"},'"')]),a(`
              `),n("span",{class:"token attr-name"},":rows"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),a(`
              `),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("please enter url description"),n("span",{class:"token punctuation"},'"')]),a(`
            `),n("span",{class:"token punctuation"},"/>")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#extra"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-space")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Cancel"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Submit"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-space")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" PlusOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(" type "),n("span",{class:"token punctuation"},"{"),a(" Rule "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'ant-design-vue/es/form'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
    PlusOutlined`),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" form "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"owner"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"approver"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"dateTime"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"null"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token literal-property property"},"rules"),n("span",{class:"token operator"},":"),a(" Record"),n("span",{class:"token operator"},"<"),a("string"),n("span",{class:"token punctuation"},","),a(" Rule"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},">"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please enter user name'"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'please enter url'"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"owner"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select an owner'"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please choose the type'"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"approver"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please choose the approver'"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"dateTime"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please choose the dateTime'"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'object'"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please enter url description'"),a(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(" visible "),n("span",{class:"token operator"},"="),a(" ref"),n("span",{class:"token operator"},"<"),a("boolean"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showDrawer"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onClose"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      form`),n("span",{class:"token punctuation"},","),a(`
      rules`),n("span",{class:"token punctuation"},","),a(`
      visible`),n("span",{class:"token punctuation"},","),a(`
      showDrawer`),n("span",{class:"token punctuation"},","),a(`
      onClose`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:s(()=>t[17]||(t[17]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("PlusOutlined")]),a(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
    New account
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(`
    `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Create a new account"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":width"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("720"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":visible"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":body-style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ paddingBottom: '80px' }"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},":footer-style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ textAlign: 'right' }"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form")]),a(),n("span",{class:"token attr-name"},":model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("form"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":rules"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("rules"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"layout"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("vertical"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},":gutter"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("16"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("name"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("form.name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Please enter user name"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Url"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("url"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-input")]),a(`
              `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("form.url"),n("span",{class:"token punctuation"},'"')]),a(`
              `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 100%")]),n("span",{class:"token punctuation"},'"')])]),a(`
              `),n("span",{class:"token attr-name"},"addon-before"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("http://"),n("span",{class:"token punctuation"},'"')]),a(`
              `),n("span",{class:"token attr-name"},"addon-after"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a(".com"),n("span",{class:"token punctuation"},'"')]),a(`
              `),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("please enter url"),n("span",{class:"token punctuation"},'"')]),a(`
            `),n("span",{class:"token punctuation"},"/>")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},":gutter"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("16"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Owner"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("owner"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("form.owner"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Please a-s an owner"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("xiao"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Xiaoxiao Fu"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("mao"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Maomao Zhou"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select")]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Type"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("form.type"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Please choose the type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("private"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Private"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("public"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Public"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select")]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},":gutter"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("16"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Approver"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("approver"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("form.approver"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Please choose the approver"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("jack"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Jack Ma"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-select-option")]),a(),n("span",{class:"token attr-name"},"value"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("tom"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Tom Liu"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select-option")]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-select")]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("DateTime"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("dateTime"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-date-picker")]),a(`
              `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("form.dateTime"),n("span",{class:"token punctuation"},'"')]),a(`
              `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 100%")]),n("span",{class:"token punctuation"},'"')])]),a(`
              `),n("span",{class:"token attr-name"},":get-popup-container"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("trigger => trigger.parentElement"),n("span",{class:"token punctuation"},'"')]),a(`
            `),n("span",{class:"token punctuation"},"/>")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},":gutter"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("16"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("24"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-form-item")]),a(),n("span",{class:"token attr-name"},"label"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Description"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"name"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("description"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-textarea")]),a(`
              `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("form.description"),n("span",{class:"token punctuation"},'"')]),a(`
              `),n("span",{class:"token attr-name"},":rows"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),a(`
              `),n("span",{class:"token attr-name"},"placeholder"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("please enter url description"),n("span",{class:"token punctuation"},'"')]),a(`
            `),n("span",{class:"token punctuation"},"/>")]),a(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form-item")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-form")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#extra"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-space")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Cancel"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Submit"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-space")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" PlusOutlined "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(`
    PlusOutlined`),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" form "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"owner"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"approver"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"dateTime"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token keyword"},"null"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"''"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" rules "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please enter user name'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"url"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'please enter url'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"owner"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please select an owner'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please choose the type'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"approver"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please choose the approver'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"dateTime"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please choose the dateTime'"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'object'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token literal-property property"},"required"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),a(`
        `),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token string"},"'Please enter url description'"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" visible "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showDrawer"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onClose"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      form`),n("span",{class:"token punctuation"},","),a(`
      rules`),n("span",{class:"token punctuation"},","),a(`
      visible`),n("span",{class:"token punctuation"},","),a(`
      showDrawer`),n("span",{class:"token punctuation"},","),a(`
      onClose`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const ln=v(pn,[["render",cn]]),un=y({setup(){const e=A(!1);return{visible:e,afterVisibleChange:I=>{console.log("visible",I)},showDrawer:()=>{e.value=!0},onClose:()=>{e.value=!1}}}}),kn={style:{height:"200px",overflow:"hidden",position:"relative",border:"1px solid #ebedf0",borderRadius:"2px",padding:"48px",textAlign:"center",background:"#fafafa",width:"100%"}},rn={style:{"margin-top":"16px"}};function gn(e,t,i,r,I,w){const c=p("a-button"),g=p("a-drawer"),d=p("demo-box");return b(),h(d,{jsfiddle:{us:"Render in current dom. custom container, check `getContainer`.",cn:"\u6E32\u67D3\u5728\u5F53\u524D dom \u91CC\u3002\u81EA\u5B9A\u4E49\u5BB9\u5668\uFF0C\u67E5\u770B `getContainer`\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u6E32\u67D3\u5728\u5F53\u524D dom \u91CC\u3002\u81EA\u5B9A\u4E49\u5BB9\u5668\uFF0C\u67E5\u770B <code>getContainer</code>\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Render in current dom. custom container, check <code>getContainer</code>.</p>
`,order:3,title:{"zh-CN":"\u6E32\u67D3\u5728\u5F53\u524D DOM","en-US":"Render in current dom"},relativePath:"components/drawer/demo/render-in-current.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXYKICAgIDpzdHlsZT0iewogICAgICBoZWlnaHQ6ICcyMDBweCcsCiAgICAgIG92ZXJmbG93OiAnaGlkZGVuJywKICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsCiAgICAgIGJvcmRlcjogJzFweCBzb2xpZCAjZWJlZGYwJywKICAgICAgYm9yZGVyUmFkaXVzOiAnMnB4JywKICAgICAgcGFkZGluZzogJzQ4cHgnLAogICAgICB0ZXh0QWxpZ246ICdjZW50ZXInLAogICAgICBiYWNrZ3JvdW5kOiAnI2ZhZmFmYScsCiAgICAgIHdpZHRoOiAnMTAwJScsCiAgICB9IgogID4KICAgIFJlbmRlciBpbiB0aGlzCiAgICA8ZGl2IHN0eWxlPSJtYXJnaW4tdG9wOiAxNnB4Ij4KICAgICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljaz0ic2hvd0RyYXdlciI+T3BlbjwvYS1idXR0b24+CiAgICA8L2Rpdj4KICAgIDxhLWRyYXdlcgogICAgICB0aXRsZT0iQmFzaWMgRHJhd2VyIgogICAgICBwbGFjZW1lbnQ9InJpZ2h0IgogICAgICA6Y2xvc2FibGU9ImZhbHNlIgogICAgICA6dmlzaWJsZT0idmlzaWJsZSIKICAgICAgOmdldC1jb250YWluZXI9ImZhbHNlIgogICAgICA6c3R5bGU9InsgcG9zaXRpb246ICdhYnNvbHV0ZScgfSIKICAgICAgQGNsb3NlPSJvbkNsb3NlIgogICAgPgogICAgICA8cD5Tb21lIGNvbnRlbnRzLi4uPC9wPgogICAgPC9hLWRyYXdlcj4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IHZpc2libGUgPSByZWYoZmFsc2UpOwoKICAgIGNvbnN0IGFmdGVyVmlzaWJsZUNoYW5nZSA9IChib29sOiBib29sZWFuKSA9PiB7CiAgICAgIGNvbnNvbGUubG9nKCd2aXNpYmxlJywgYm9vbCk7CiAgICB9OwoKICAgIGNvbnN0IHNob3dEcmF3ZXIgPSAoKSA9PiB7CiAgICAgIHZpc2libGUudmFsdWUgPSB0cnVlOwogICAgfTsKCiAgICBjb25zdCBvbkNsb3NlID0gKCkgPT4gewogICAgICB2aXNpYmxlLnZhbHVlID0gZmFsc2U7CiAgICB9OwoKICAgIHJldHVybiB7CiAgICAgIHZpc2libGUsCiAgICAgIGFmdGVyVmlzaWJsZUNoYW5nZSwKICAgICAgc2hvd0RyYXdlciwKICAgICAgb25DbG9zZSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXYKICAgIDpzdHlsZT0iewogICAgICBoZWlnaHQ6ICcyMDBweCcsCiAgICAgIG92ZXJmbG93OiAnaGlkZGVuJywKICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsCiAgICAgIGJvcmRlcjogJzFweCBzb2xpZCAjZWJlZGYwJywKICAgICAgYm9yZGVyUmFkaXVzOiAnMnB4JywKICAgICAgcGFkZGluZzogJzQ4cHgnLAogICAgICB0ZXh0QWxpZ246ICdjZW50ZXInLAogICAgICBiYWNrZ3JvdW5kOiAnI2ZhZmFmYScsCiAgICAgIHdpZHRoOiAnMTAwJScsCiAgICB9IgogID4KICAgIFJlbmRlciBpbiB0aGlzCiAgICA8ZGl2IHN0eWxlPSJtYXJnaW4tdG9wOiAxNnB4Ij4KICAgICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljaz0ic2hvd0RyYXdlciI+T3BlbjwvYS1idXR0b24+CiAgICA8L2Rpdj4KICAgIDxhLWRyYXdlcgogICAgICB0aXRsZT0iQmFzaWMgRHJhd2VyIgogICAgICBwbGFjZW1lbnQ9InJpZ2h0IgogICAgICA6Y2xvc2FibGU9ImZhbHNlIgogICAgICA6dmlzaWJsZT0idmlzaWJsZSIKICAgICAgOmdldC1jb250YWluZXI9ImZhbHNlIgogICAgICA6c3R5bGU9InsgcG9zaXRpb246ICdhYnNvbHV0ZScgfSIKICAgICAgQGNsb3NlPSJvbkNsb3NlIgogICAgPgogICAgICA8cD5Tb21lIGNvbnRlbnRzLi4uPC9wPgogICAgPC9hLWRyYXdlcj4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgdmlzaWJsZSA9IHJlZihmYWxzZSk7CiAgICBjb25zdCBhZnRlclZpc2libGVDaGFuZ2UgPSBib29sID0+IHsKICAgICAgY29uc29sZS5sb2coJ3Zpc2libGUnLCBib29sKTsKICAgIH07CiAgICBjb25zdCBzaG93RHJhd2VyID0gKCkgPT4gewogICAgICB2aXNpYmxlLnZhbHVlID0gdHJ1ZTsKICAgIH07CiAgICBjb25zdCBvbkNsb3NlID0gKCkgPT4gewogICAgICB2aXNpYmxlLnZhbHVlID0gZmFsc2U7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgdmlzaWJsZSwKICAgICAgYWZ0ZXJWaXNpYmxlQ2hhbmdlLAogICAgICBzaG93RHJhd2VyLAogICAgICBvbkNsb3NlLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:s(()=>[n("div",kn,[t[2]||(t[2]=a(" Render in this ")),n("div",rn,[o(c,{type:"primary",onClick:e.showDrawer},{default:s(()=>t[0]||(t[0]=[a("Open")])),_:1,__:[0]},8,["onClick"])]),o(g,{title:"Basic Drawer",placement:"right",closable:!1,visible:e.visible,"get-container":!1,style:{position:"absolute"},onClose:e.onClose},{default:s(()=>t[1]||(t[1]=[n("p",null,"Some contents...",-1)])),_:1,__:[1]},8,["visible","onClose"])])]),htmlCode:s(()=>t[3]||(t[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(`
    `),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a(`{
      height: '200px',
      overflow: 'hidden',
      position: 'relative',
      border: '1px solid #ebedf0',
      borderRadius: '2px',
      padding: '48px',
      textAlign: 'center',
      background: '#fafafa',
      width: '100%',
    }`),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    Render in this
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-top"),n("span",{class:"token punctuation"},":"),a(" 16px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Open"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(`
      `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Basic Drawer"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},"placement"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("right"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":closable"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("false"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":visible"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":get-container"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("false"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ position: 'absolute' }"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" visible "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"afterVisibleChange"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"bool"),n("span",{class:"token operator"},":"),a(" boolean")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'visible'"),n("span",{class:"token punctuation"},","),a(" bool"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showDrawer"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onClose"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},","),a(`
      afterVisibleChange`),n("span",{class:"token punctuation"},","),a(`
      showDrawer`),n("span",{class:"token punctuation"},","),a(`
      onClose`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:s(()=>t[4]||(t[4]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(`
    `),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a(`{
      height: '200px',
      overflow: 'hidden',
      position: 'relative',
      border: '1px solid #ebedf0',
      borderRadius: '2px',
      padding: '48px',
      textAlign: 'center',
      background: '#fafafa',
      width: '100%',
    }`),n("span",{class:"token punctuation"},'"')]),a(`
  `),n("span",{class:"token punctuation"},">")]),a(`
    Render in this
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-top"),n("span",{class:"token punctuation"},":"),a(" 16px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Open"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(`
      `),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Basic Drawer"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},"placement"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("right"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":closable"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("false"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":visible"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":get-container"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("false"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ position: 'absolute' }"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),a(`
    `),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" visible "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"afterVisibleChange"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token parameter"},"bool"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'visible'"),n("span",{class:"token punctuation"},","),a(" bool"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showDrawer"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onClose"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},","),a(`
      afterVisibleChange`),n("span",{class:"token punctuation"},","),a(`
      showDrawer`),n("span",{class:"token punctuation"},","),a(`
      onClose`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const dn=v(un,[["render",gn]]),In=y({setup(){const e=A(!1),t=A("default");return{visible:e,size:t,showDrawer:I=>{t.value=I,e.value=!0},onClose:()=>{e.value=!1}}}});function Cn(e,t,i,r,I,w){const c=p("a-button"),g=p("a-drawer"),d=p("demo-box");return b(),h(d,{jsfiddle:{us:"The default width (or height) of Drawer is `378px`, and there is a presetted large size `736px`.",cn:"\u62BD\u5C49\u7684\u9ED8\u8BA4\u5BBD\u5EA6\u4E3A `378px`\uFF0C\u53E6\u5916\u8FD8\u63D0\u4F9B\u4E00\u4E2A\u5927\u53F7\u62BD\u5C49 `736px`\uFF0C\u53EF\u4EE5\u7528 size \u5C5E\u6027\u6765\u8BBE\u7F6E\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u62BD\u5C49\u7684\u9ED8\u8BA4\u5BBD\u5EA6\u4E3A <code>378px</code>\uFF0C\u53E6\u5916\u8FD8\u63D0\u4F9B\u4E00\u4E2A\u5927\u53F7\u62BD\u5C49 <code>736px</code>\uFF0C\u53EF\u4EE5\u7528 size \u5C5E\u6027\u6765\u8BBE\u7F6E\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>The default width (or height) of Drawer is <code>378px</code>, and there is a presetted large size <code>736px</code>.</p>
`,order:7,title:{"zh-CN":"\u9884\u8BBE\u5BBD\u5EA6","en-US":"Presetted size"},relativePath:"components/drawer/demo/size.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBzdHlsZT0ibWFyZ2luLXJpZ2h0OiA4cHgiIEBjbGljaz0ic2hvd0RyYXdlcignZGVmYXVsdCcpIj4KICAgIE9wZW4gRGVmYXVsdCBTaXplICgzNzhweCkKICA8L2EtYnV0dG9uPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9InNob3dEcmF3ZXIoJ2xhcmdlJykiPk9wZW4gTGFyZ2UgU2l6ZSAoNzM2cHgpPC9hLWJ1dHRvbj4KICA8YS1kcmF3ZXIgdGl0bGU9IkJhc2ljIERyYXdlciIgOnNpemU9InNpemUiIDp2aXNpYmxlPSJ2aXNpYmxlIiBAY2xvc2U9Im9uQ2xvc2UiPgogICAgPHRlbXBsYXRlICNleHRyYT4KICAgICAgPGEtYnV0dG9uIHN0eWxlPSJtYXJnaW4tcmlnaHQ6IDhweCIgQGNsaWNrPSJvbkNsb3NlIj5DYW5jZWw8L2EtYnV0dG9uPgogICAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJvbkNsb3NlIj5TdWJtaXQ8L2EtYnV0dG9uPgogICAgPC90ZW1wbGF0ZT4KICAgIDxwPlNvbWUgY29udGVudHMuLi48L3A+CiAgICA8cD5Tb21lIGNvbnRlbnRzLi4uPC9wPgogICAgPHA+U29tZSBjb250ZW50cy4uLjwvcD4KICA8L2EtZHJhd2VyPgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYgfSBmcm9tICd2dWUnOwppbXBvcnQgdHlwZSB7IERyYXdlclByb3BzIH0gZnJvbSAnYW50LWRlc2lnbi12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgdmlzaWJsZSA9IHJlZjxib29sZWFuPihmYWxzZSk7CiAgICBjb25zdCBzaXplID0gcmVmPERyYXdlclByb3BzWydzaXplJ10+KCdkZWZhdWx0Jyk7CgogICAgY29uc3Qgc2hvd0RyYXdlciA9ICh2YWw6IERyYXdlclByb3BzWydzaXplJ10pID0+IHsKICAgICAgc2l6ZS52YWx1ZSA9IHZhbDsKICAgICAgdmlzaWJsZS52YWx1ZSA9IHRydWU7CiAgICB9OwoKICAgIGNvbnN0IG9uQ2xvc2UgPSAoKSA9PiB7CiAgICAgIHZpc2libGUudmFsdWUgPSBmYWxzZTsKICAgIH07CiAgICByZXR1cm4gewogICAgICB2aXNpYmxlLAogICAgICBzaXplLAogICAgICBzaG93RHJhd2VyLAogICAgICBvbkNsb3NlLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBzdHlsZT0ibWFyZ2luLXJpZ2h0OiA4cHgiIEBjbGljaz0ic2hvd0RyYXdlcignZGVmYXVsdCcpIj4KICAgIE9wZW4gRGVmYXVsdCBTaXplICgzNzhweCkKICA8L2EtYnV0dG9uPgogIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9InNob3dEcmF3ZXIoJ2xhcmdlJykiPk9wZW4gTGFyZ2UgU2l6ZSAoNzM2cHgpPC9hLWJ1dHRvbj4KICA8YS1kcmF3ZXIgdGl0bGU9IkJhc2ljIERyYXdlciIgOnNpemU9InNpemUiIDp2aXNpYmxlPSJ2aXNpYmxlIiBAY2xvc2U9Im9uQ2xvc2UiPgogICAgPHRlbXBsYXRlICNleHRyYT4KICAgICAgPGEtYnV0dG9uIHN0eWxlPSJtYXJnaW4tcmlnaHQ6IDhweCIgQGNsaWNrPSJvbkNsb3NlIj5DYW5jZWw8L2EtYnV0dG9uPgogICAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJvbkNsb3NlIj5TdWJtaXQ8L2EtYnV0dG9uPgogICAgPC90ZW1wbGF0ZT4KICAgIDxwPlNvbWUgY29udGVudHMuLi48L3A+CiAgICA8cD5Tb21lIGNvbnRlbnRzLi4uPC9wPgogICAgPHA+U29tZSBjb250ZW50cy4uLjwvcD4KICA8L2EtZHJhd2VyPgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCB2aXNpYmxlID0gcmVmKGZhbHNlKTsKICAgIGNvbnN0IHNpemUgPSByZWYoJ2RlZmF1bHQnKTsKICAgIGNvbnN0IHNob3dEcmF3ZXIgPSB2YWwgPT4gewogICAgICBzaXplLnZhbHVlID0gdmFsOwogICAgICB2aXNpYmxlLnZhbHVlID0gdHJ1ZTsKICAgIH07CiAgICBjb25zdCBvbkNsb3NlID0gKCkgPT4gewogICAgICB2aXNpYmxlLnZhbHVlID0gZmFsc2U7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgdmlzaWJsZSwKICAgICAgc2l6ZSwKICAgICAgc2hvd0RyYXdlciwKICAgICAgb25DbG9zZSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:s(()=>[o(c,{type:"primary",style:{"margin-right":"8px"},onClick:t[0]||(t[0]=k=>e.showDrawer("default"))},{default:s(()=>t[2]||(t[2]=[a(" Open Default Size (378px) ")])),_:1,__:[2]}),o(c,{type:"primary",onClick:t[1]||(t[1]=k=>e.showDrawer("large"))},{default:s(()=>t[3]||(t[3]=[a("Open Large Size (736px)")])),_:1,__:[3]}),o(g,{title:"Basic Drawer",size:e.size,visible:e.visible,onClose:e.onClose},{extra:s(()=>[o(c,{style:{"margin-right":"8px"},onClick:e.onClose},{default:s(()=>t[4]||(t[4]=[a("Cancel")])),_:1,__:[4]},8,["onClick"]),o(c,{type:"primary",onClick:e.onClose},{default:s(()=>t[5]||(t[5]=[a("Submit")])),_:1,__:[5]},8,["onClick"])]),default:s(()=>[t[6]||(t[6]=n("p",null,"Some contents...",-1)),t[7]||(t[7]=n("p",null,"Some contents...",-1)),t[8]||(t[8]=n("p",null,"Some contents...",-1))]),_:1,__:[6,7,8]},8,["size","visible","onClose"])]),htmlCode:s(()=>t[9]||(t[9]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 8px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer('default')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    Open Default Size (378px)
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer('large')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Open Large Size (736px)"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Basic Drawer"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("size"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":visible"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#extra"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 8px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Cancel"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Submit"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"import"),a(" type "),n("span",{class:"token punctuation"},"{"),a(" DrawerProps "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" visible "),n("span",{class:"token operator"},"="),a(" ref"),n("span",{class:"token operator"},"<"),a("boolean"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" size "),n("span",{class:"token operator"},"="),a(" ref"),n("span",{class:"token operator"},"<"),a("DrawerProps"),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'size'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'default'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(" showDrawer "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),a("val"),n("span",{class:"token operator"},":"),a(" DrawerProps"),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'size'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      size`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(" val"),n("span",{class:"token punctuation"},";"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`

    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onClose"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},","),a(`
      size`),n("span",{class:"token punctuation"},","),a(`
      showDrawer`),n("span",{class:"token punctuation"},","),a(`
      onClose`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:s(()=>t[10]||(t[10]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 8px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer('default')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    Open Default Size (378px)
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("showDrawer('large')"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Open Large Size (736px)"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-drawer")]),a(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Basic Drawer"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("size"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":visible"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("visible"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@close"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),a(),n("span",{class:"token attr-name"},"#extra"),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 8px")]),n("span",{class:"token punctuation"},'"')])]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Cancel"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-button")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("primary"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("onClose"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Submit"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-button")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Some contents..."),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-drawer")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" visible "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" size "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'default'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"showDrawer"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token parameter"},"val"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      size`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(" val"),n("span",{class:"token punctuation"},";"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(),n("span",{class:"token function-variable function"},"onClose"),a(),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},"."),a("value "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      visible`),n("span",{class:"token punctuation"},","),a(`
      size`),n("span",{class:"token punctuation"},","),a(`
      showDrawer`),n("span",{class:"token punctuation"},","),a(`
      onClose`),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const mn=v(In,[["render",Cn]]),bn={pageData:{title:"Drawer",description:"",frontmatter:{category:"Components",type:"\u53CD\u9988",title:"Drawer",subtitle:"\u62BD\u5C49",cover:"https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg"},headers:[{level:2,title:"\u4F55\u65F6\u4F7F\u7528",slug:"\u4F55\u65F6\u4F7F\u7528",content:"\u62BD\u5C49\u4ECE\u7236\u7A97\u4F53\u8FB9\u7F18\u6ED1\u5165\uFF0C\u8986\u76D6\u4F4F\u90E8\u5206\u7236\u7A97\u4F53\u5185\u5BB9\u3002\u7528\u6237\u5728\u62BD\u5C49\u5185\u64CD\u4F5C\u65F6\u4E0D\u5FC5\u79BB\u5F00\u5F53\u524D\u4EFB\u52A1\uFF0C\u64CD\u4F5C\u5B8C\u6210\u540E\uFF0C\u53EF\u4EE5\u5E73\u6ED1\u5730\u56DE\u5230\u539F\u4EFB\u52A1\u3002"},{level:2,title:"API",slug:"API",content:""},{level:2,title:"\u4E8B\u4EF6",slug:"\u4E8B\u4EF6",content:""}],relativePath:"components/drawer/index.zh-CN.md",content:`
\u5C4F\u5E55\u8FB9\u7F18\u6ED1\u51FA\u7684\u6D6E\u5C42\u9762\u677F\u3002

## \u4F55\u65F6\u4F7F\u7528

\u62BD\u5C49\u4ECE\u7236\u7A97\u4F53\u8FB9\u7F18\u6ED1\u5165\uFF0C\u8986\u76D6\u4F4F\u90E8\u5206\u7236\u7A97\u4F53\u5185\u5BB9\u3002\u7528\u6237\u5728\u62BD\u5C49\u5185\u64CD\u4F5C\u65F6\u4E0D\u5FC5\u79BB\u5F00\u5F53\u524D\u4EFB\u52A1\uFF0C\u64CD\u4F5C\u5B8C\u6210\u540E\uFF0C\u53EF\u4EE5\u5E73\u6ED1\u5730\u56DE\u5230\u539F\u4EFB\u52A1\u3002

- \u5F53\u9700\u8981\u4E00\u4E2A\u9644\u52A0\u7684\u9762\u677F\u6765\u63A7\u5236\u7236\u7A97\u4F53\u5185\u5BB9\uFF0C\u8FD9\u4E2A\u9762\u677F\u5728\u9700\u8981\u65F6\u547C\u51FA\u3002\u6BD4\u5982\uFF0C\u63A7\u5236\u754C\u9762\u5C55\u793A\u6837\u5F0F\uFF0C\u5F80\u754C\u9762\u4E2D\u6DFB\u52A0\u5185\u5BB9\u3002
- \u5F53\u9700\u8981\u5728\u5F53\u524D\u4EFB\u52A1\u6D41\u4E2D\u63D2\u5165\u4E34\u65F6\u4EFB\u52A1\uFF0C\u521B\u5EFA\u6216\u9884\u89C8\u9644\u52A0\u5185\u5BB9\u3002\u6BD4\u5982\u5C55\u793A\u534F\u8BAE\u6761\u6B3E\uFF0C\u521B\u5EFA\u5B50\u5BF9\u8C61\u3002

## API

| \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |
| --- | --- | --- | --- | --- |
| autofocus | \u62BD\u5C49\u5C55\u5F00\u540E\u662F\u5426\u5C06\u7126\u70B9\u5207\u6362\u81F3\u5176 Dom \u8282\u70B9 | boolean | true | 3.0.0 |
| bodyStyle | \u53EF\u7528\u4E8E\u8BBE\u7F6E Drawer \u5185\u5BB9\u90E8\u5206\u7684\u6837\u5F0F | CSSProperties | - |  |
| class | \u5BF9\u8BDD\u6846\u5916\u5C42\u5BB9\u5668\u7684\u7C7B\u540D | string | - |  |
| closable | \u662F\u5426\u663E\u793A\u5DE6\u4E0A\u89D2\u7684\u5173\u95ED\u6309\u94AE | boolean | true |  |
| closeIcon | \u81EA\u5B9A\u4E49\u5173\u95ED\u56FE\u6807 | VNode \\| slot | \`&lt;CloseOutlined /&gt;\` | 3.0.0 |
| contentWrapperStyle | \u53EF\u7528\u4E8E\u8BBE\u7F6E Drawer \u5305\u88F9\u5185\u5BB9\u90E8\u5206\u7684\u6837\u5F0F | CSSProperties | - | 3.0.0 |
| destroyOnClose | \u5173\u95ED\u65F6\u9500\u6BC1 Drawer \u91CC\u7684\u5B50\u5143\u7D20 | boolean | false |  |
| drawerStyle | \u7528\u4E8E\u8BBE\u7F6E Drawer \u5F39\u51FA\u5C42\u7684\u6837\u5F0F | object | - |  |
| extra | \u62BD\u5C49\u53F3\u4E0A\u89D2\u7684\u64CD\u4F5C\u533A\u57DF | VNode \\| slot | - | 3.0.0 |
| footer | \u62BD\u5C49\u7684\u9875\u811A | VNode \\| slot | - | 3.0.0 |
| footerStyle | \u62BD\u5C49\u9875\u811A\u90E8\u4EF6\u7684\u6837\u5F0F | CSSProperties | - | 3.0.0 |
| forceRender | \u9884\u6E32\u67D3 Drawer \u5185\u5143\u7D20 | boolean | false | 3.0.0 |
| getContainer | \u6307\u5B9A Drawer \u6302\u8F7D\u7684 HTML \u8282\u70B9 | HTMLElement \\| \`() =&gt; HTMLElement\` \\| Selectors | &#39;body&#39; |  |
| headerStyle | \u7528\u4E8E\u8BBE\u7F6E Drawer \u5934\u90E8\u7684\u6837\u5F0F | CSSProperties | - | 3.0.0 |
| height | \u9AD8\u5EA6, \u5728 \`placement\` \u4E3A \`top\` \u6216 \`bottom\` \u65F6\u4F7F\u7528 | string \\| number | 378 |  |
| keyboard | \u662F\u5426\u652F\u6301\u952E\u76D8 esc \u5173\u95ED | boolean | true |  |
| mask | \u662F\u5426\u5C55\u793A\u906E\u7F69 | Boolean | true |  |
| maskClosable | \u70B9\u51FB\u8499\u5C42\u662F\u5426\u5141\u8BB8\u5173\u95ED | boolean | true |  |
| maskStyle | \u906E\u7F69\u6837\u5F0F | CSSProperties | {} |  |
| placement | \u62BD\u5C49\u7684\u65B9\u5411 | &#39;top&#39; \\| &#39;right&#39; \\| &#39;bottom&#39; \\| &#39;left&#39; | &#39;right&#39; |  |
| push | \u7528\u4E8E\u8BBE\u7F6E\u591A\u5C42 Drawer \u7684\u63A8\u52A8\u884C\u4E3A | boolean \\| {distance: string \\| number} | { distance: 180 } | 3.0.0 |
| size | \u9884\u8BBE\u62BD\u5C49\u5BBD\u5EA6\uFF08\u6216\u9AD8\u5EA6\uFF09\uFF0Cdefault \`378px\` \u548C large \`736px\` | \`default\` \\| \`large\` | \`default\` | 3.0.0 |
| style | \u53EF\u7528\u4E8E\u8BBE\u7F6E Drawer \u6700\u5916\u5C42\u5BB9\u5668\u7684\u6837\u5F0F\uFF0C\u548C \`drawerStyle\` \u7684\u533A\u522B\u662F\u4F5C\u7528\u8282\u70B9\u5305\u62EC \`mask\` | CSSProperties | - |  |
| title | \u6807\u9898 | string \\| slot | - |  |
| visible(v-model) | Drawer \u662F\u5426\u53EF\u89C1 | boolean | - |  |
| width | \u5BBD\u5EA6 | string \\| number | 378 |  |
| zIndex | \u8BBE\u7F6E Drawer \u7684 \`z-index\` | Number | 1000 |  |

## \u4E8B\u4EF6

| \u540D\u79F0               | \u63CF\u8FF0                                 | \u7C7B\u578B              | \u9ED8\u8BA4\u503C | \u7248\u672C |
| ------------------ | ------------------------------------ | ----------------- | ------ | ---- |
| afterVisibleChange | \u5207\u6362\u62BD\u5C49\u65F6\u52A8\u753B\u7ED3\u675F\u540E\u7684\u56DE\u8C03           | function(visible) | \u65E0     |      |
| close              | \u70B9\u51FB\u906E\u7F69\u5C42\u6216\u5DE6\u4E0A\u89D2\u53C9\u6216\u53D6\u6D88\u6309\u94AE\u7684\u56DE\u8C03 | function(e)       | \u65E0     |      |
`,html:`<p>\u5C4F\u5E55\u8FB9\u7F18\u6ED1\u51FA\u7684\u6D6E\u5C42\u9762\u677F\u3002</p>
<h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528 <a class="header-anchor" href="#\u4F55\u65F6\u4F7F\u7528">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u62BD\u5C49\u4ECE\u7236\u7A97\u4F53\u8FB9\u7F18\u6ED1\u5165\uFF0C\u8986\u76D6\u4F4F\u90E8\u5206\u7236\u7A97\u4F53\u5185\u5BB9\u3002\u7528\u6237\u5728\u62BD\u5C49\u5185\u64CD\u4F5C\u65F6\u4E0D\u5FC5\u79BB\u5F00\u5F53\u524D\u4EFB\u52A1\uFF0C\u64CD\u4F5C\u5B8C\u6210\u540E\uFF0C\u53EF\u4EE5\u5E73\u6ED1\u5730\u56DE\u5230\u539F\u4EFB\u52A1\u3002</p>
<ul>
<li>\u5F53\u9700\u8981\u4E00\u4E2A\u9644\u52A0\u7684\u9762\u677F\u6765\u63A7\u5236\u7236\u7A97\u4F53\u5185\u5BB9\uFF0C\u8FD9\u4E2A\u9762\u677F\u5728\u9700\u8981\u65F6\u547C\u51FA\u3002\u6BD4\u5982\uFF0C\u63A7\u5236\u754C\u9762\u5C55\u793A\u6837\u5F0F\uFF0C\u5F80\u754C\u9762\u4E2D\u6DFB\u52A0\u5185\u5BB9\u3002</li>
<li>\u5F53\u9700\u8981\u5728\u5F53\u524D\u4EFB\u52A1\u6D41\u4E2D\u63D2\u5165\u4E34\u65F6\u4EFB\u52A1\uFF0C\u521B\u5EFA\u6216\u9884\u89C8\u9644\u52A0\u5185\u5BB9\u3002\u6BD4\u5982\u5C55\u793A\u534F\u8BAE\u6761\u6B3E\uFF0C\u521B\u5EFA\u5B50\u5BF9\u8C61\u3002</li>
</ul>
<h2 id="API">API <a class="header-anchor" href="#API">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
<th>\u7248\u672C</th>
</tr>
</thead>
<tbody>
<tr>
<td>autofocus</td>
<td>\u62BD\u5C49\u5C55\u5F00\u540E\u662F\u5426\u5C06\u7126\u70B9\u5207\u6362\u81F3\u5176 Dom \u8282\u70B9</td>
<td>boolean</td>
<td>true</td>
<td>3.0.0</td>
</tr>
<tr>
<td>bodyStyle</td>
<td>\u53EF\u7528\u4E8E\u8BBE\u7F6E Drawer \u5185\u5BB9\u90E8\u5206\u7684\u6837\u5F0F</td>
<td>CSSProperties</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>class</td>
<td>\u5BF9\u8BDD\u6846\u5916\u5C42\u5BB9\u5668\u7684\u7C7B\u540D</td>
<td>string</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>closable</td>
<td>\u662F\u5426\u663E\u793A\u5DE6\u4E0A\u89D2\u7684\u5173\u95ED\u6309\u94AE</td>
<td>boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>closeIcon</td>
<td>\u81EA\u5B9A\u4E49\u5173\u95ED\u56FE\u6807</td>
<td>VNode | slot</td>
<td><code>&lt;CloseOutlined /&gt;</code></td>
<td>3.0.0</td>
</tr>
<tr>
<td>contentWrapperStyle</td>
<td>\u53EF\u7528\u4E8E\u8BBE\u7F6E Drawer \u5305\u88F9\u5185\u5BB9\u90E8\u5206\u7684\u6837\u5F0F</td>
<td>CSSProperties</td>
<td>-</td>
<td>3.0.0</td>
</tr>
<tr>
<td>destroyOnClose</td>
<td>\u5173\u95ED\u65F6\u9500\u6BC1 Drawer \u91CC\u7684\u5B50\u5143\u7D20</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>drawerStyle</td>
<td>\u7528\u4E8E\u8BBE\u7F6E Drawer \u5F39\u51FA\u5C42\u7684\u6837\u5F0F</td>
<td>object</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>extra</td>
<td>\u62BD\u5C49\u53F3\u4E0A\u89D2\u7684\u64CD\u4F5C\u533A\u57DF</td>
<td>VNode | slot</td>
<td>-</td>
<td>3.0.0</td>
</tr>
<tr>
<td>footer</td>
<td>\u62BD\u5C49\u7684\u9875\u811A</td>
<td>VNode | slot</td>
<td>-</td>
<td>3.0.0</td>
</tr>
<tr>
<td>footerStyle</td>
<td>\u62BD\u5C49\u9875\u811A\u90E8\u4EF6\u7684\u6837\u5F0F</td>
<td>CSSProperties</td>
<td>-</td>
<td>3.0.0</td>
</tr>
<tr>
<td>forceRender</td>
<td>\u9884\u6E32\u67D3 Drawer \u5185\u5143\u7D20</td>
<td>boolean</td>
<td>false</td>
<td>3.0.0</td>
</tr>
<tr>
<td>getContainer</td>
<td>\u6307\u5B9A Drawer \u6302\u8F7D\u7684 HTML \u8282\u70B9</td>
<td>HTMLElement | <code>() =&gt; HTMLElement</code> | Selectors</td>
<td>'body'</td>
<td></td>
</tr>
<tr>
<td>headerStyle</td>
<td>\u7528\u4E8E\u8BBE\u7F6E Drawer \u5934\u90E8\u7684\u6837\u5F0F</td>
<td>CSSProperties</td>
<td>-</td>
<td>3.0.0</td>
</tr>
<tr>
<td>height</td>
<td>\u9AD8\u5EA6, \u5728 <code>placement</code> \u4E3A <code>top</code> \u6216 <code>bottom</code> \u65F6\u4F7F\u7528</td>
<td>string | number</td>
<td>378</td>
<td></td>
</tr>
<tr>
<td>keyboard</td>
<td>\u662F\u5426\u652F\u6301\u952E\u76D8 esc \u5173\u95ED</td>
<td>boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>mask</td>
<td>\u662F\u5426\u5C55\u793A\u906E\u7F69</td>
<td>Boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>maskClosable</td>
<td>\u70B9\u51FB\u8499\u5C42\u662F\u5426\u5141\u8BB8\u5173\u95ED</td>
<td>boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>maskStyle</td>
<td>\u906E\u7F69\u6837\u5F0F</td>
<td>CSSProperties</td>
<td>{}</td>
<td></td>
</tr>
<tr>
<td>placement</td>
<td>\u62BD\u5C49\u7684\u65B9\u5411</td>
<td>'top' | 'right' | 'bottom' | 'left'</td>
<td>'right'</td>
<td></td>
</tr>
<tr>
<td>push</td>
<td>\u7528\u4E8E\u8BBE\u7F6E\u591A\u5C42 Drawer \u7684\u63A8\u52A8\u884C\u4E3A</td>
<td>boolean | {distance: string | number}</td>
<td>{ distance: 180 }</td>
<td>3.0.0</td>
</tr>
<tr>
<td>size</td>
<td>\u9884\u8BBE\u62BD\u5C49\u5BBD\u5EA6\uFF08\u6216\u9AD8\u5EA6\uFF09\uFF0Cdefault <code>378px</code> \u548C large <code>736px</code></td>
<td><code>default</code> | <code>large</code></td>
<td><code>default</code></td>
<td>3.0.0</td>
</tr>
<tr>
<td>style</td>
<td>\u53EF\u7528\u4E8E\u8BBE\u7F6E Drawer \u6700\u5916\u5C42\u5BB9\u5668\u7684\u6837\u5F0F\uFF0C\u548C <code>drawerStyle</code> \u7684\u533A\u522B\u662F\u4F5C\u7528\u8282\u70B9\u5305\u62EC <code>mask</code></td>
<td>CSSProperties</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>title</td>
<td>\u6807\u9898</td>
<td>string | slot</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>visible(v-model)</td>
<td>Drawer \u662F\u5426\u53EF\u89C1</td>
<td>boolean</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>width</td>
<td>\u5BBD\u5EA6</td>
<td>string | number</td>
<td>378</td>
<td></td>
</tr>
<tr>
<td>zIndex</td>
<td>\u8BBE\u7F6E Drawer \u7684 <code>z-index</code></td>
<td>Number</td>
<td>1000</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="\u4E8B\u4EF6">\u4E8B\u4EF6 <a class="header-anchor" href="#\u4E8B\u4EF6">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<table>
<thead>
<tr>
<th>\u540D\u79F0</th>
<th>\u63CF\u8FF0</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
<th>\u7248\u672C</th>
</tr>
</thead>
<tbody>
<tr>
<td>afterVisibleChange</td>
<td>\u5207\u6362\u62BD\u5C49\u65F6\u52A8\u753B\u7ED3\u675F\u540E\u7684\u56DE\u8C03</td>
<td>function(visible)</td>
<td>\u65E0</td>
<td></td>
</tr>
<tr>
<td>close</td>
<td>\u70B9\u51FB\u906E\u7F69\u5C42\u6216\u5DE6\u4E0A\u89D2\u53C9\u6216\u53D6\u6D88\u6309\u94AE\u7684\u56DE\u8C03</td>
<td>function(e)</td>
<td>\u65E0</td>
<td></td>
</tr>
</tbody>
</table>
`,lastUpdated:1748060300717}},An={class:"markdown"};function vn(e,t,i,r,I,w){return b(),B("article",An,t[0]||(t[0]=[D('<p>\u5C4F\u5E55\u8FB9\u7F18\u6ED1\u51FA\u7684\u6D6E\u5C42\u9762\u677F\u3002</p><h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528 <a class="header-anchor" href="#\u4F55\u65F6\u4F7F\u7528"><span aria-hidden="true" class="anchor">#</span></a></h2><p>\u62BD\u5C49\u4ECE\u7236\u7A97\u4F53\u8FB9\u7F18\u6ED1\u5165\uFF0C\u8986\u76D6\u4F4F\u90E8\u5206\u7236\u7A97\u4F53\u5185\u5BB9\u3002\u7528\u6237\u5728\u62BD\u5C49\u5185\u64CD\u4F5C\u65F6\u4E0D\u5FC5\u79BB\u5F00\u5F53\u524D\u4EFB\u52A1\uFF0C\u64CD\u4F5C\u5B8C\u6210\u540E\uFF0C\u53EF\u4EE5\u5E73\u6ED1\u5730\u56DE\u5230\u539F\u4EFB\u52A1\u3002</p><ul><li>\u5F53\u9700\u8981\u4E00\u4E2A\u9644\u52A0\u7684\u9762\u677F\u6765\u63A7\u5236\u7236\u7A97\u4F53\u5185\u5BB9\uFF0C\u8FD9\u4E2A\u9762\u677F\u5728\u9700\u8981\u65F6\u547C\u51FA\u3002\u6BD4\u5982\uFF0C\u63A7\u5236\u754C\u9762\u5C55\u793A\u6837\u5F0F\uFF0C\u5F80\u754C\u9762\u4E2D\u6DFB\u52A0\u5185\u5BB9\u3002</li><li>\u5F53\u9700\u8981\u5728\u5F53\u524D\u4EFB\u52A1\u6D41\u4E2D\u63D2\u5165\u4E34\u65F6\u4EFB\u52A1\uFF0C\u521B\u5EFA\u6216\u9884\u89C8\u9644\u52A0\u5185\u5BB9\u3002\u6BD4\u5982\u5C55\u793A\u534F\u8BAE\u6761\u6B3E\uFF0C\u521B\u5EFA\u5B50\u5BF9\u8C61\u3002</li></ul><h2 id="API">API <a class="header-anchor" href="#API"><span aria-hidden="true" class="anchor">#</span></a></h2><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>autofocus</td><td>\u62BD\u5C49\u5C55\u5F00\u540E\u662F\u5426\u5C06\u7126\u70B9\u5207\u6362\u81F3\u5176 Dom \u8282\u70B9</td><td>boolean</td><td>true</td><td>3.0.0</td></tr><tr><td>bodyStyle</td><td>\u53EF\u7528\u4E8E\u8BBE\u7F6E Drawer \u5185\u5BB9\u90E8\u5206\u7684\u6837\u5F0F</td><td>CSSProperties</td><td>-</td><td></td></tr><tr><td>class</td><td>\u5BF9\u8BDD\u6846\u5916\u5C42\u5BB9\u5668\u7684\u7C7B\u540D</td><td>string</td><td>-</td><td></td></tr><tr><td>closable</td><td>\u662F\u5426\u663E\u793A\u5DE6\u4E0A\u89D2\u7684\u5173\u95ED\u6309\u94AE</td><td>boolean</td><td>true</td><td></td></tr><tr><td>closeIcon</td><td>\u81EA\u5B9A\u4E49\u5173\u95ED\u56FE\u6807</td><td>VNode | slot</td><td><code>&lt;CloseOutlined /&gt;</code></td><td>3.0.0</td></tr><tr><td>contentWrapperStyle</td><td>\u53EF\u7528\u4E8E\u8BBE\u7F6E Drawer \u5305\u88F9\u5185\u5BB9\u90E8\u5206\u7684\u6837\u5F0F</td><td>CSSProperties</td><td>-</td><td>3.0.0</td></tr><tr><td>destroyOnClose</td><td>\u5173\u95ED\u65F6\u9500\u6BC1 Drawer \u91CC\u7684\u5B50\u5143\u7D20</td><td>boolean</td><td>false</td><td></td></tr><tr><td>drawerStyle</td><td>\u7528\u4E8E\u8BBE\u7F6E Drawer \u5F39\u51FA\u5C42\u7684\u6837\u5F0F</td><td>object</td><td>-</td><td></td></tr><tr><td>extra</td><td>\u62BD\u5C49\u53F3\u4E0A\u89D2\u7684\u64CD\u4F5C\u533A\u57DF</td><td>VNode | slot</td><td>-</td><td>3.0.0</td></tr><tr><td>footer</td><td>\u62BD\u5C49\u7684\u9875\u811A</td><td>VNode | slot</td><td>-</td><td>3.0.0</td></tr><tr><td>footerStyle</td><td>\u62BD\u5C49\u9875\u811A\u90E8\u4EF6\u7684\u6837\u5F0F</td><td>CSSProperties</td><td>-</td><td>3.0.0</td></tr><tr><td>forceRender</td><td>\u9884\u6E32\u67D3 Drawer \u5185\u5143\u7D20</td><td>boolean</td><td>false</td><td>3.0.0</td></tr><tr><td>getContainer</td><td>\u6307\u5B9A Drawer \u6302\u8F7D\u7684 HTML \u8282\u70B9</td><td>HTMLElement | <code>() =&gt; HTMLElement</code> | Selectors</td><td>&#39;body&#39;</td><td></td></tr><tr><td>headerStyle</td><td>\u7528\u4E8E\u8BBE\u7F6E Drawer \u5934\u90E8\u7684\u6837\u5F0F</td><td>CSSProperties</td><td>-</td><td>3.0.0</td></tr><tr><td>height</td><td>\u9AD8\u5EA6, \u5728 <code>placement</code> \u4E3A <code>top</code> \u6216 <code>bottom</code> \u65F6\u4F7F\u7528</td><td>string | number</td><td>378</td><td></td></tr><tr><td>keyboard</td><td>\u662F\u5426\u652F\u6301\u952E\u76D8 esc \u5173\u95ED</td><td>boolean</td><td>true</td><td></td></tr><tr><td>mask</td><td>\u662F\u5426\u5C55\u793A\u906E\u7F69</td><td>Boolean</td><td>true</td><td></td></tr><tr><td>maskClosable</td><td>\u70B9\u51FB\u8499\u5C42\u662F\u5426\u5141\u8BB8\u5173\u95ED</td><td>boolean</td><td>true</td><td></td></tr><tr><td>maskStyle</td><td>\u906E\u7F69\u6837\u5F0F</td><td>CSSProperties</td><td>{}</td><td></td></tr><tr><td>placement</td><td>\u62BD\u5C49\u7684\u65B9\u5411</td><td>&#39;top&#39; | &#39;right&#39; | &#39;bottom&#39; | &#39;left&#39;</td><td>&#39;right&#39;</td><td></td></tr><tr><td>push</td><td>\u7528\u4E8E\u8BBE\u7F6E\u591A\u5C42 Drawer \u7684\u63A8\u52A8\u884C\u4E3A</td><td>boolean | {distance: string | number}</td><td>{ distance: 180 }</td><td>3.0.0</td></tr><tr><td>size</td><td>\u9884\u8BBE\u62BD\u5C49\u5BBD\u5EA6\uFF08\u6216\u9AD8\u5EA6\uFF09\uFF0Cdefault <code>378px</code> \u548C large <code>736px</code></td><td><code>default</code> | <code>large</code></td><td><code>default</code></td><td>3.0.0</td></tr><tr><td>style</td><td>\u53EF\u7528\u4E8E\u8BBE\u7F6E Drawer \u6700\u5916\u5C42\u5BB9\u5668\u7684\u6837\u5F0F\uFF0C\u548C <code>drawerStyle</code> \u7684\u533A\u522B\u662F\u4F5C\u7528\u8282\u70B9\u5305\u62EC <code>mask</code></td><td>CSSProperties</td><td>-</td><td></td></tr><tr><td>title</td><td>\u6807\u9898</td><td>string | slot</td><td>-</td><td></td></tr><tr><td>visible(v-model)</td><td>Drawer \u662F\u5426\u53EF\u89C1</td><td>boolean</td><td>-</td><td></td></tr><tr><td>width</td><td>\u5BBD\u5EA6</td><td>string | number</td><td>378</td><td></td></tr><tr><td>zIndex</td><td>\u8BBE\u7F6E Drawer \u7684 <code>z-index</code></td><td>Number</td><td>1000</td><td></td></tr></tbody></table><h2 id="\u4E8B\u4EF6">\u4E8B\u4EF6 <a class="header-anchor" href="#\u4E8B\u4EF6"><span aria-hidden="true" class="anchor">#</span></a></h2><table><thead><tr><th>\u540D\u79F0</th><th>\u63CF\u8FF0</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>afterVisibleChange</td><td>\u5207\u6362\u62BD\u5C49\u65F6\u52A8\u753B\u7ED3\u675F\u540E\u7684\u56DE\u8C03</td><td>function(visible)</td><td>\u65E0</td><td></td></tr><tr><td>close</td><td>\u70B9\u51FB\u906E\u7F69\u5C42\u6216\u5DE6\u4E0A\u89D2\u53C9\u6216\u53D6\u6D88\u6309\u94AE\u7684\u56DE\u8C03</td><td>function(e)</td><td>\u65E0</td><td></td></tr></tbody></table>',8)]))}const wn=v(bn,[["render",vn]]),hn={pageData:{title:"Drawer",description:"",frontmatter:{category:"Components",type:"Feedback",title:"Drawer",cover:"https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg"},headers:[{level:2,title:"When To Use",slug:"When-To-Use",content:"A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context."},{level:2,title:"API",slug:"API",content:""},{level:2,title:"Events",slug:"Events",content:""}],relativePath:"components/drawer/index.en-US.md",content:`
A panel which slides in from the edge of the screen.

## When To Use

A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.

- Use a Form to create or edit a set of information.
- Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
- When the same Form is needed in multiple places.

## API

| Props | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autofocus | Whether Drawer should get focused after open | boolean | true | 3.0.0 |
| bodyStyle | Style of the drawer content part | CSSProperties | - |  |
| class | The class name of the container of the Drawer dialog | string | - |  |
| closable | Whether a close (x) button is visible on top left of the Drawer dialog or not | boolean | true |  |
| closeIcon | Custom close icon | VNode \\| slot | \`&lt;CloseOutlined /&gt;\` | 3.0.0 |
| contentWrapperStyle | Style of the drawer wrapper of content part | CSSProperties | - | 3.0.0 |
| destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false |  |
| drawerStyle | Style of the popup layer element | object | - |  |
| extra | Extra actions area at corner | VNode \\| slot | - | 3.0.0 |
| footer | The footer for Drawer | VNode \\| slot | - | 3.0.0 |
| footerStyle | Style of the drawer footer part | CSSProperties | - | 3.0.0 |
| forceRender | Prerender Drawer component forcely | boolean | false | 3.0.0 |
| getContainer | Return the mounted node for Drawer | HTMLElement \\| \`() =&gt; HTMLElement\` \\| Selectors | &#39;body&#39; |  |
| headerStyle | Style of the drawer header part | CSSProperties | - | 3.0.0 |
| height | Placement is \`top\` or \`bottom\`, height of the Drawer dialog | string \\| number | 378 |  |
| keyboard | Whether support press esc to close | boolean | true |  |
| mask | Whether to show mask or not | Boolean | true |  |
| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not | boolean | true |  |
| maskStyle | Style for Drawer&#39;s mask element | CSSProperties | {} |  |
| placement | The placement of the Drawer | &#39;top&#39; \\| &#39;right&#39; \\| &#39;bottom&#39; \\| &#39;left&#39; | &#39;right&#39; |  |
| push | Nested drawers push behavior | boolean \\| {distance: string \\| number} | { distance: 180 } | 3.0.0 |
| size | presetted size of drawer, default \`378px\` and large \`736px\` | \`default\` \\| \`large\` | \`default\` | 3.0.0 |
| style | Style of wrapper element which contains mask compare to drawerStyle | CSSProperties | - |  |
| title | The title for Drawer | string \\| slot | - |  |
| visible(v-model) | Whether the Drawer dialog is visible or not | boolean | - |  |
| width | Width of the Drawer dialog | string \\| number | 378 |  |
| zIndex | The \`z-index\` of the Drawer | Number | 1000 |  |

## Events

| Name | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| afterVisibleChange | Callback after the animation ends when switching drawers. | function(visible) | - |  |
| close | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e) | - |  |
`,html:`<p>A panel which slides in from the edge of the screen.</p>
<h2 id="When-To-Use">When To Use <a class="header-anchor" href="#When-To-Use">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.</p>
<ul>
<li>Use a Form to create or edit a set of information.</li>
<li>Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.</li>
<li>When the same Form is needed in multiple places.</li>
</ul>
<h2 id="API">API <a class="header-anchor" href="#API">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<table>
<thead>
<tr>
<th>Props</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>autofocus</td>
<td>Whether Drawer should get focused after open</td>
<td>boolean</td>
<td>true</td>
<td>3.0.0</td>
</tr>
<tr>
<td>bodyStyle</td>
<td>Style of the drawer content part</td>
<td>CSSProperties</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>class</td>
<td>The class name of the container of the Drawer dialog</td>
<td>string</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>closable</td>
<td>Whether a close (x) button is visible on top left of the Drawer dialog or not</td>
<td>boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>closeIcon</td>
<td>Custom close icon</td>
<td>VNode | slot</td>
<td><code>&lt;CloseOutlined /&gt;</code></td>
<td>3.0.0</td>
</tr>
<tr>
<td>contentWrapperStyle</td>
<td>Style of the drawer wrapper of content part</td>
<td>CSSProperties</td>
<td>-</td>
<td>3.0.0</td>
</tr>
<tr>
<td>destroyOnClose</td>
<td>Whether to unmount child components on closing drawer or not</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>drawerStyle</td>
<td>Style of the popup layer element</td>
<td>object</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>extra</td>
<td>Extra actions area at corner</td>
<td>VNode | slot</td>
<td>-</td>
<td>3.0.0</td>
</tr>
<tr>
<td>footer</td>
<td>The footer for Drawer</td>
<td>VNode | slot</td>
<td>-</td>
<td>3.0.0</td>
</tr>
<tr>
<td>footerStyle</td>
<td>Style of the drawer footer part</td>
<td>CSSProperties</td>
<td>-</td>
<td>3.0.0</td>
</tr>
<tr>
<td>forceRender</td>
<td>Prerender Drawer component forcely</td>
<td>boolean</td>
<td>false</td>
<td>3.0.0</td>
</tr>
<tr>
<td>getContainer</td>
<td>Return the mounted node for Drawer</td>
<td>HTMLElement | <code>() =&gt; HTMLElement</code> | Selectors</td>
<td>'body'</td>
<td></td>
</tr>
<tr>
<td>headerStyle</td>
<td>Style of the drawer header part</td>
<td>CSSProperties</td>
<td>-</td>
<td>3.0.0</td>
</tr>
<tr>
<td>height</td>
<td>Placement is <code>top</code> or <code>bottom</code>, height of the Drawer dialog</td>
<td>string | number</td>
<td>378</td>
<td></td>
</tr>
<tr>
<td>keyboard</td>
<td>Whether support press esc to close</td>
<td>boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>mask</td>
<td>Whether to show mask or not</td>
<td>Boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>maskClosable</td>
<td>Clicking on the mask (area outside the Drawer) to close the Drawer or not</td>
<td>boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>maskStyle</td>
<td>Style for Drawer's mask element</td>
<td>CSSProperties</td>
<td>{}</td>
<td></td>
</tr>
<tr>
<td>placement</td>
<td>The placement of the Drawer</td>
<td>'top' | 'right' | 'bottom' | 'left'</td>
<td>'right'</td>
<td></td>
</tr>
<tr>
<td>push</td>
<td>Nested drawers push behavior</td>
<td>boolean | {distance: string | number}</td>
<td>{ distance: 180 }</td>
<td>3.0.0</td>
</tr>
<tr>
<td>size</td>
<td>presetted size of drawer, default <code>378px</code> and large <code>736px</code></td>
<td><code>default</code> | <code>large</code></td>
<td><code>default</code></td>
<td>3.0.0</td>
</tr>
<tr>
<td>style</td>
<td>Style of wrapper element which contains mask compare to drawerStyle</td>
<td>CSSProperties</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>title</td>
<td>The title for Drawer</td>
<td>string | slot</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>visible(v-model)</td>
<td>Whether the Drawer dialog is visible or not</td>
<td>boolean</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>width</td>
<td>Width of the Drawer dialog</td>
<td>string | number</td>
<td>378</td>
<td></td>
</tr>
<tr>
<td>zIndex</td>
<td>The <code>z-index</code> of the Drawer</td>
<td>Number</td>
<td>1000</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Events">Events <a class="header-anchor" href="#Events">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>afterVisibleChange</td>
<td>Callback after the animation ends when switching drawers.</td>
<td>function(visible)</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>close</td>
<td>Specify a callback that will be called when a user clicks mask, close button or Cancel button.</td>
<td>function(e)</td>
<td>-</td>
<td></td>
</tr>
</tbody>
</table>
`,lastUpdated:1748060300716}},yn={class:"markdown"};function Zn(e,t,i,r,I,w){return b(),B("article",yn,t[0]||(t[0]=[D('<p>A panel which slides in from the edge of the screen.</p><h2 id="When-To-Use">When To Use <a class="header-anchor" href="#When-To-Use"><span aria-hidden="true" class="anchor">#</span></a></h2><p>A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.</p><ul><li>Use a Form to create or edit a set of information.</li><li>Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.</li><li>When the same Form is needed in multiple places.</li></ul><h2 id="API">API <a class="header-anchor" href="#API"><span aria-hidden="true" class="anchor">#</span></a></h2><table><thead><tr><th>Props</th><th>Description</th><th>Type</th><th>Default</th><th>Version</th></tr></thead><tbody><tr><td>autofocus</td><td>Whether Drawer should get focused after open</td><td>boolean</td><td>true</td><td>3.0.0</td></tr><tr><td>bodyStyle</td><td>Style of the drawer content part</td><td>CSSProperties</td><td>-</td><td></td></tr><tr><td>class</td><td>The class name of the container of the Drawer dialog</td><td>string</td><td>-</td><td></td></tr><tr><td>closable</td><td>Whether a close (x) button is visible on top left of the Drawer dialog or not</td><td>boolean</td><td>true</td><td></td></tr><tr><td>closeIcon</td><td>Custom close icon</td><td>VNode | slot</td><td><code>&lt;CloseOutlined /&gt;</code></td><td>3.0.0</td></tr><tr><td>contentWrapperStyle</td><td>Style of the drawer wrapper of content part</td><td>CSSProperties</td><td>-</td><td>3.0.0</td></tr><tr><td>destroyOnClose</td><td>Whether to unmount child components on closing drawer or not</td><td>boolean</td><td>false</td><td></td></tr><tr><td>drawerStyle</td><td>Style of the popup layer element</td><td>object</td><td>-</td><td></td></tr><tr><td>extra</td><td>Extra actions area at corner</td><td>VNode | slot</td><td>-</td><td>3.0.0</td></tr><tr><td>footer</td><td>The footer for Drawer</td><td>VNode | slot</td><td>-</td><td>3.0.0</td></tr><tr><td>footerStyle</td><td>Style of the drawer footer part</td><td>CSSProperties</td><td>-</td><td>3.0.0</td></tr><tr><td>forceRender</td><td>Prerender Drawer component forcely</td><td>boolean</td><td>false</td><td>3.0.0</td></tr><tr><td>getContainer</td><td>Return the mounted node for Drawer</td><td>HTMLElement | <code>() =&gt; HTMLElement</code> | Selectors</td><td>&#39;body&#39;</td><td></td></tr><tr><td>headerStyle</td><td>Style of the drawer header part</td><td>CSSProperties</td><td>-</td><td>3.0.0</td></tr><tr><td>height</td><td>Placement is <code>top</code> or <code>bottom</code>, height of the Drawer dialog</td><td>string | number</td><td>378</td><td></td></tr><tr><td>keyboard</td><td>Whether support press esc to close</td><td>boolean</td><td>true</td><td></td></tr><tr><td>mask</td><td>Whether to show mask or not</td><td>Boolean</td><td>true</td><td></td></tr><tr><td>maskClosable</td><td>Clicking on the mask (area outside the Drawer) to close the Drawer or not</td><td>boolean</td><td>true</td><td></td></tr><tr><td>maskStyle</td><td>Style for Drawer&#39;s mask element</td><td>CSSProperties</td><td>{}</td><td></td></tr><tr><td>placement</td><td>The placement of the Drawer</td><td>&#39;top&#39; | &#39;right&#39; | &#39;bottom&#39; | &#39;left&#39;</td><td>&#39;right&#39;</td><td></td></tr><tr><td>push</td><td>Nested drawers push behavior</td><td>boolean | {distance: string | number}</td><td>{ distance: 180 }</td><td>3.0.0</td></tr><tr><td>size</td><td>presetted size of drawer, default <code>378px</code> and large <code>736px</code></td><td><code>default</code> | <code>large</code></td><td><code>default</code></td><td>3.0.0</td></tr><tr><td>style</td><td>Style of wrapper element which contains mask compare to drawerStyle</td><td>CSSProperties</td><td>-</td><td></td></tr><tr><td>title</td><td>The title for Drawer</td><td>string | slot</td><td>-</td><td></td></tr><tr><td>visible(v-model)</td><td>Whether the Drawer dialog is visible or not</td><td>boolean</td><td>-</td><td></td></tr><tr><td>width</td><td>Width of the Drawer dialog</td><td>string | number</td><td>378</td><td></td></tr><tr><td>zIndex</td><td>The <code>z-index</code> of the Drawer</td><td>Number</td><td>1000</td><td></td></tr></tbody></table><h2 id="Events">Events <a class="header-anchor" href="#Events"><span aria-hidden="true" class="anchor">#</span></a></h2><table><thead><tr><th>Name</th><th>Description</th><th>Type</th><th>Default</th><th>Version</th></tr></thead><tbody><tr><td>afterVisibleChange</td><td>Callback after the animation ends when switching drawers.</td><td>function(visible)</td><td>-</td><td></td></tr><tr><td>close</td><td>Specify a callback that will be called when a user clicks mask, close button or Cancel button.</td><td>function(e)</td><td>-</td><td></td></tr></tbody></table>',8)]))}const Wn=v(hn,[["render",Zn]]),Gn=y({CN:wn,US:Wn,components:{Basic:F,Extra:K,Placement:E,UserProfile:tn,MultiLevelDrawer:en,FormInDrawer:ln,RenderInCurrent:dn,Size:mn},setup(){return{}}});function fn(e,t,i,r,I,w){const c=p("basic"),g=p("extra"),d=p("placement"),k=p("render-in-current"),l=p("form-in-drawer"),u=p("multi-level-drawer"),C=p("user-profile"),Z=p("size"),W=p("demo-sort");return b(),h(W,null,{default:s(()=>[o(c),o(g),o(d),o(k),o(l),o(u),o(C),o(Z)]),_:1})}const Sn=v(Gn,[["render",fn]]);export{Sn as default};