1 line
112 KiB
JavaScript
1 line
112 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{1445:function(s,a,t){"use strict";t.r(a);var n=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-button type="primary" @click="showDrawer">\n Open\n </a-button>\n <a-drawer title="Basic Drawer" placement="right" :closable="false" @close="onClose" :visible="visible">\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </a-drawer>\n </div>\n',script:"\n export default {\n data() {\n return {\n visible: false,\n };\n },\n methods: {\n showDrawer() {\n this.visible = true;\n },\n onClose() {\n this.visible = false;\n },\n },\n };\n",style:null,us:"\n#### Basic\nBasic drawer.\n",cn:"\n#### 基础抽屉\n基础抽屉，点击触发按钮抽屉从右滑出，点击遮罩区关闭\n",sourceCode:'<template>\n <div>\n <a-button type="primary" @click="showDrawer">\n Open\n </a-button>\n <a-drawer\n title="Basic Drawer"\n placement="right"\n :closable="false"\n @close="onClose"\n :visible="visible"\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </a-drawer>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n visible: false,\n };\n },\n methods: {\n showDrawer() {\n this.visible = true;\n },\n onClose() {\n this.visible = false;\n },\n },\n };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-button",{attrs:{type:"primary"},on:{click:s.showDrawer}},[s._v("\n Open\n ")]),s._v(" "),t("a-drawer",{attrs:{title:"Basic Drawer",placement:"right",closable:!1,visible:s.visible},on:{close:s.onClose}},[t("p",[s._v("Some contents...")]),s._v(" "),t("p",[s._v("Some contents...")]),s._v(" "),t("p",[s._v("Some contents...")])])],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"基础抽屉"}},[s._v("基础抽屉 "),t("a",{staticClass:"anchor",attrs:{href:"#基础抽屉"}},[s._v("#")])]),s._v(" "),t("p",[s._v("基础抽屉，点击触发按钮抽屉从右滑出，点击遮罩区关闭")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Basic"}},[s._v("Basic "),t("a",{staticClass:"anchor",attrs:{href:"#Basic"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Basic drawer.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"showDrawer"')]),s._v(">")]),s._v("\n Open\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-drawer")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Basic Drawer"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onClose"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":visible")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v("\n >")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Some contents..."),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Some contents..."),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Some contents..."),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-drawer")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("visible")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n };\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n showDrawer() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n },\n onClose() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n },\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};n._withStripped=!0;var e={data:function(){return{visible:!1}},methods:{showDrawer:function(){this.visible=!0},onClose:function(){this.visible=!1}}},l=t(31),i=Object(l.a)(e,n,[],!1,null,null,null);i.options.__file="components/drawer/demo/basic-right.md";var v=i.exports,r=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-radio-group style="margin-right: 8px" :defaultValue="placement" @change="onChange">\n <a-radio value="top">top</a-radio>\n <a-radio value="right">right</a-radio>\n <a-radio value="bottom">bottom</a-radio>\n <a-radio value="left">left</a-radio>\n </a-radio-group>\n <a-button type="primary" @click="showDrawer">\n Open\n </a-button>\n <a-drawer title="Basic Drawer" :placement="placement" :closable="false" @close="onClose" :visible="visible">\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </a-drawer>\n </div>\n',script:"\n export default {\n data() {\n return {\n visible: false,\n placement: 'left',\n };\n },\n methods: {\n showDrawer() {\n this.visible = true;\n },\n onClose() {\n this.visible = false;\n },\n onChange(e) {\n this.placement = e.target.value;\n },\n },\n };\n",style:null,us:"\n#### Custom Placement\nBasic drawer.\n",cn:"\n#### 自定义位置\n自定义位置，点击触发按钮抽屉从相应的位置滑出，点击遮罩区关闭\n",sourceCode:'<template>\n <div>\n <a-radio-group style="margin-right: 8px" :defaultValue="placement" @change="onChange">\n <a-radio value="top">top</a-radio>\n <a-radio value="right">right</a-radio>\n <a-radio value="bottom">bottom</a-radio>\n <a-radio value="left">left</a-radio>\n </a-radio-group>\n <a-button type="primary" @click="showDrawer">\n Open\n </a-button>\n <a-drawer\n title="Basic Drawer"\n :placement="placement"\n :closable="false"\n @close="onClose"\n :visible="visible"\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </a-drawer>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n visible: false,\n placement: \'left\',\n };\n },\n methods: {\n showDrawer() {\n this.visible = true;\n },\n onClose() {\n this.visible = false;\n },\n onChange(e) {\n this.placement = e.target.value;\n },\n },\n };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-radio-group",{staticStyle:{"margin-right":"8px"},attrs:{defaultValue:s.placement},on:{change:s.onChange}},[t("a-radio",{attrs:{value:"top"}},[s._v("top")]),s._v(" "),t("a-radio",{attrs:{value:"right"}},[s._v("right")]),s._v(" "),t("a-radio",{attrs:{value:"bottom"}},[s._v("bottom")]),s._v(" "),t("a-radio",{attrs:{value:"left"}},[s._v("left")])],1),s._v(" "),t("a-button",{attrs:{type:"primary"},on:{click:s.showDrawer}},[s._v("\n Open\n ")]),s._v(" "),t("a-drawer",{attrs:{title:"Basic Drawer",placement:s.placement,closable:!1,visible:s.visible},on:{close:s.onClose}},[t("p",[s._v("Some contents...")]),s._v(" "),t("p",[s._v("Some contents...")]),s._v(" "),t("p",[s._v("Some contents...")])])],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"自定义位置"}},[s._v("自定义位置 "),t("a",{staticClass:"anchor",attrs:{href:"#自定义位置"}},[s._v("#")])]),s._v(" "),t("p",[s._v("自定义位置，点击触发按钮抽屉从相应的位置滑出，点击遮罩区关闭")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Custom-Placement"}},[s._v("Custom Placement "),t("a",{staticClass:"anchor",attrs:{href:"#Custom-Placement"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Basic drawer.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-radio-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"margin-right: 8px"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultValue")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"placement"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onChange"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-radio")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("top"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-radio")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-radio")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("right"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-radio")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-radio")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("bottom"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-radio")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-radio")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("left"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-radio")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-radio-group")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"showDrawer"')]),s._v(">")]),s._v("\n Open\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-drawer")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Basic Drawer"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":placement")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"placement"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onClose"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":visible")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v("\n >")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Some contents..."),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Some contents..."),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Some contents..."),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-drawer")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("visible")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'left'")]),s._v(",\n };\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n showDrawer() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n },\n onClose() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n },\n onChange(e) {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".placement = e.target.value;\n },\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};r._withStripped=!0;var _={data:function(){return{visible:!1,placement:"left"}},methods:{showDrawer:function(){this.visible=!0},onClose:function(){this.visible=!1},onChange:function(s){this.placement=s.target.value}}},o=Object(l.a)(_,r,[],!1,null,null,null);o.options.__file="components/drawer/demo/placement.md";var c=o.exports,p=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-list :dataSource="[\n {\n name: \'Lily\',\n },\n {\n name: \'Lily\',\n },\n ]" bordered="">\n <a-list-item slot="renderItem" slot-scope="item, index">\n <a slot="actions" @click="showDrawer">View Profile</a>\n <a-list-item-meta description="Progresser AFX">\n <a slot="title" href="https://www.antdv.com/">{{item.name}}</a>\n <a-avatar slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"/>\n </a-list-item-meta>\n </a-list-item>\n </a-list>\n <a-drawer width="640" placement="right" :closable="false" @close="onClose" :visible="visible">\n <p :style="[pStyle, pStyle2]">User Profile</p>\n <p :style="pStyle">Personal</p>\n <a-row>\n <a-col :span="12">\n <description-item title="Full Name" content="Lily"/>\n </a-col>\n <a-col :span="12">\n <description-item title="Account" content="AntDesign@example.com"/>\n </a-col>\n </a-row>\n <a-row>\n <a-col :span="12">\n <description-item title="City" content="HangZhou"/>\n </a-col>\n <a-col :span="12">\n <description-item title="Country" content="China🇨🇳"/>\n </a-col>\n </a-row>\n <a-row>\n <a-col :span="12">\n <description-item title="Birthday" content="February 2,1900"/>\n </a-col>\n <a-col :span="12">\n <description-item title="Website" content="-"/>\n </a-col>\n </a-row>\n <a-row>\n <a-col :span="12">\n <description-item title="Message" content="Make things as simple as possible but no simpler."/>\n </a-col>\n </a-row>\n <a-divider/>\n <p :style="pStyle">Company</p>\n <a-row>\n <a-col :span="12">\n <description-item title="Position" content="Programmer"/>\n </a-col>\n <a-col :span="12">\n <description-item title="Responsibilities" content="Coding"/>\n </a-col>\n </a-row>\n <a-row>\n <a-col :span="12">\n <description-item title="Department" content="AFX"/>\n </a-col>\n <a-col :span="12">\n <description-item title="Supervisor">\n <a slot="content">Lin</a>\n </description-item>\n </a-col>\n </a-row>\n <a-row>\n <a-col :span="24">\n <description-item 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."/>\n </a-col>\n </a-row>\n <a-divider/>\n <p :style="pStyle">Contacts</p>\n <a-row>\n <a-col :span="12">\n <description-item title="Email" content="ant-design-vue@example.com"/>\n </a-col>\n <a-col :span="12">\n <description-item title="Phone Number" content="+86 181 0000 0000"/>\n </a-col>\n </a-row>\n <a-row>\n <a-col :span="24">\n <description-item title="Github">\n <a slot="content" href="https://github.com/vueComponent/ant-design-vue">\n github.com/vueComponent/ant-design-vue\n </a>\n </description-item>\n </a-col>\n </a-row>\n </a-drawer>\n </div>\n',script:"\n import descriptionItem from './descriptionItem';\n\n export default {\n data() {\n return {\n visible: false,\n pStyle: {\n fontSize: '16px',\n color: 'rgba(0,0,0,0.85)',\n lineHeight: '24px',\n display: 'block',\n marginBottom: '16px',\n },\n pStyle2: {\n marginBottom: '24px',\n },\n };\n },\n components: {\n descriptionItem,\n },\n methods: {\n showDrawer() {\n this.visible = true;\n },\n onClose() {\n this.visible = false;\n },\n },\n };\n",style:null,us:"\n#### Preview drawer\nUse when you need to quickly preview the outline of the object. Such as list item preview.\n",cn:"\n#### 信息预览抽屉\n需要快速预览对象概要时使用，点击遮罩区关闭。\n",sourceCode:'<template>\n <div>\n <a-list\n :dataSource="[\n {\n name: \'Lily\',\n },\n {\n name: \'Lily\',\n },\n ]"\n bordered\n >\n <a-list-item slot="renderItem" slot-scope="item, index">\n <a slot="actions" @click="showDrawer">View Profile</a>\n <a-list-item-meta description="Progresser AFX">\n <a slot="title" href="https://www.antdv.com/">{{item.name}}</a>\n <a-avatar\n slot="avatar"\n src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"\n />\n </a-list-item-meta>\n </a-list-item>\n </a-list>\n <a-drawer width="640" placement="right" :closable="false" @close="onClose" :visible="visible">\n <p :style="[pStyle, pStyle2]">User Profile</p>\n <p :style="pStyle">Personal</p>\n <a-row>\n <a-col :span="12">\n <description-item title="Full Name" content="Lily" />\n </a-col>\n <a-col :span="12">\n <description-item title="Account" content="AntDesign@example.com" />\n </a-col>\n </a-row>\n <a-row>\n <a-col :span="12">\n <description-item title="City" content="HangZhou" />\n </a-col>\n <a-col :span="12">\n <description-item title="Country" content="China🇨🇳" />\n </a-col>\n </a-row>\n <a-row>\n <a-col :span="12">\n <description-item title="Birthday" content="February 2,1900" />\n </a-col>\n <a-col :span="12">\n <description-item title="Website" content="-" />\n </a-col>\n </a-row>\n <a-row>\n <a-col :span="12">\n <description-item\n title="Message"\n content="Make things as simple as possible but no simpler."\n />\n </a-col>\n </a-row>\n <a-divider />\n <p :style="pStyle">Company</p>\n <a-row>\n <a-col :span="12">\n <description-item title="Position" content="Programmer" />\n </a-col>\n <a-col :span="12">\n <description-item title="Responsibilities" content="Coding" />\n </a-col>\n </a-row>\n <a-row>\n <a-col :span="12">\n <description-item title="Department" content="AFX" />\n </a-col>\n <a-col :span="12">\n <description-item title="Supervisor">\n <a slot="content">Lin</a>\n </description-item>\n </a-col>\n </a-row>\n <a-row>\n <a-col :span="24">\n <description-item\n title="Skills"\n 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."\n />\n </a-col>\n </a-row>\n <a-divider />\n <p :style="pStyle">Contacts</p>\n <a-row>\n <a-col :span="12">\n <description-item title="Email" content="ant-design-vue@example.com" />\n </a-col>\n <a-col :span="12">\n <description-item title="Phone Number" content="+86 181 0000 0000" />\n </a-col>\n </a-row>\n <a-row>\n <a-col :span="24">\n <description-item title="Github">\n <a slot="content" href="https://github.com/vueComponent/ant-design-vue">\n github.com/vueComponent/ant-design-vue\n </a>\n </description-item>\n </a-col>\n </a-row>\n </a-drawer>\n </div>\n</template>\n<script>\n import descriptionItem from \'./descriptionItem\';\n\n export default {\n data() {\n return {\n visible: false,\n pStyle: {\n fontSize: \'16px\',\n color: \'rgba(0,0,0,0.85)\',\n lineHeight: \'24px\',\n display: \'block\',\n marginBottom: \'16px\',\n },\n pStyle2: {\n marginBottom: \'24px\',\n },\n };\n },\n components: {\n descriptionItem,\n },\n methods: {\n showDrawer() {\n this.visible = true;\n },\n onClose() {\n this.visible = false;\n },\n },\n };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-list",{attrs:{dataSource:[{name:"Lily"},{name:"Lily"}],bordered:""},scopedSlots:s._u([{key:"renderItem",fn:function(a,n){return t("a-list-item",{},[t("a",{attrs:{slot:"actions"},on:{click:s.showDrawer},slot:"actions"},[s._v("View Profile")]),s._v(" "),t("a-list-item-meta",{attrs:{description:"Progresser AFX"}},[t("a",{attrs:{slot:"title",href:"https://www.antdv.com/"},slot:"title"},[s._v(s._s(a.name))]),s._v(" "),t("a-avatar",{attrs:{slot:"avatar",src:"https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"},slot:"avatar"})],1)],1)}}])}),s._v(" "),t("a-drawer",{attrs:{width:"640",placement:"right",closable:!1,visible:s.visible},on:{close:s.onClose}},[t("p",{style:[s.pStyle,s.pStyle2]},[s._v("User Profile")]),s._v(" "),t("p",{style:s.pStyle},[s._v("Personal")]),s._v(" "),t("a-row",[t("a-col",{attrs:{span:12}},[t("description-item",{attrs:{title:"Full Name",content:"Lily"}})],1),s._v(" "),t("a-col",{attrs:{span:12}},[t("description-item",{attrs:{title:"Account",content:"AntDesign@example.com"}})],1)],1),s._v(" "),t("a-row",[t("a-col",{attrs:{span:12}},[t("description-item",{attrs:{title:"City",content:"HangZhou"}})],1),s._v(" "),t("a-col",{attrs:{span:12}},[t("description-item",{attrs:{title:"Country",content:"China🇨🇳"}})],1)],1),s._v(" "),t("a-row",[t("a-col",{attrs:{span:12}},[t("description-item",{attrs:{title:"Birthday",content:"February 2,1900"}})],1),s._v(" "),t("a-col",{attrs:{span:12}},[t("description-item",{attrs:{title:"Website",content:"-"}})],1)],1),s._v(" "),t("a-row",[t("a-col",{attrs:{span:12}},[t("description-item",{attrs:{title:"Message",content:"Make things as simple as possible but no simpler."}})],1)],1),s._v(" "),t("a-divider"),s._v(" "),t("p",{style:s.pStyle},[s._v("Company")]),s._v(" "),t("a-row",[t("a-col",{attrs:{span:12}},[t("description-item",{attrs:{title:"Position",content:"Programmer"}})],1),s._v(" "),t("a-col",{attrs:{span:12}},[t("description-item",{attrs:{title:"Responsibilities",content:"Coding"}})],1)],1),s._v(" "),t("a-row",[t("a-col",{attrs:{span:12}},[t("description-item",{attrs:{title:"Department",content:"AFX"}})],1),s._v(" "),t("a-col",{attrs:{span:12}},[t("description-item",{attrs:{title:"Supervisor"}},[t("a",{attrs:{slot:"content"},slot:"content"},[s._v("Lin")])])],1)],1),s._v(" "),t("a-row",[t("a-col",{attrs:{span:24}},[t("description-item",{attrs:{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),s._v(" "),t("a-divider"),s._v(" "),t("p",{style:s.pStyle},[s._v("Contacts")]),s._v(" "),t("a-row",[t("a-col",{attrs:{span:12}},[t("description-item",{attrs:{title:"Email",content:"ant-design-vue@example.com"}})],1),s._v(" "),t("a-col",{attrs:{span:12}},[t("description-item",{attrs:{title:"Phone Number",content:"+86 181 0000 0000"}})],1)],1),s._v(" "),t("a-row",[t("a-col",{attrs:{span:24}},[t("description-item",{attrs:{title:"Github"}},[t("a",{attrs:{slot:"content",href:"https://github.com/vueComponent/ant-design-vue"},slot:"content"},[s._v("\n github.com/vueComponent/ant-design-vue\n ")])])],1)],1)],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"信息预览抽屉"}},[s._v("信息预览抽屉 "),t("a",{staticClass:"anchor",attrs:{href:"#信息预览抽屉"}},[s._v("#")])]),s._v(" "),t("p",[s._v("需要快速预览对象概要时使用，点击遮罩区关闭。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Preview-drawer"}},[s._v("Preview drawer "),t("a",{staticClass:"anchor",attrs:{href:"#Preview-drawer"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Use when you need to quickly preview the outline of the object. Such as list item preview.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-list")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":dataSource")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"[\n {\n name: 'Lily',\n },\n {\n name: 'Lily',\n },\n ]\"")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("bordered")]),s._v("\n >")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-list-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"renderItem"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot-scope")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"item, index"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"actions"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"showDrawer"')]),s._v(">")]),s._v("View Profile"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-list-item-meta")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Progresser AFX"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"https://www.antdv.com/"')]),s._v(">")]),t("span",[s._v("{{")]),s._v("item.name"),t("span",[s._v("}}")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-avatar")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"avatar"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"')]),s._v("\n />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-list-item-meta")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-list-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-list")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-drawer")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"640"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onClose"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":visible")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"[pStyle, pStyle2]"')]),s._v(">")]),s._v("User Profile"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"pStyle"')]),s._v(">")]),s._v("Personal"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("description-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Full Name"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Lily"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("description-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Account"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"AntDesign@example.com"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("description-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"HangZhou"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("description-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Country"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"China🇨🇳"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("description-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Birthday"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"February 2,1900"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("description-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Website"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"-"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("description-item")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Message"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Make things as simple as possible but no simpler."')]),s._v("\n />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-divider")]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"pStyle"')]),s._v(">")]),s._v("Company"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("description-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Position"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Programmer"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("description-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Responsibilities"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Coding"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("description-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Department"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"AFX"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("description-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Supervisor"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"content"')]),s._v(">")]),s._v("Lin"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("description-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"24"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("description-item")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Skills"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"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."')]),s._v("\n />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-divider")]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"pStyle"')]),s._v(">")]),s._v("Contacts"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("description-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Email"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"ant-design-vue@example.com"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("description-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Phone Number"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"+86 181 0000 0000"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"24"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("description-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Github"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"content"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vueComponent/ant-design-vue"')]),s._v(">")]),s._v("\n github.com/vueComponent/ant-design-vue\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("description-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-drawer")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" descriptionItem "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'./descriptionItem'")]),s._v(";\n\n "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("visible")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("pStyle")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("fontSize")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'16px'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgba(0,0,0,0.85)'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("lineHeight")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'24px'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("display")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'block'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("marginBottom")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'16px'")]),s._v(",\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("pStyle2")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("marginBottom")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'24px'")]),s._v(",\n },\n };\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("components")]),s._v(": {\n descriptionItem,\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n showDrawer() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n },\n onClose() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n },\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};p._withStripped=!0;var h=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",{staticStyle:{fontSize:"14px",lineHeight:"22px",marginBottom:"7px",color:"rgba(0,0,0,0.65)"}},[t("p",{staticStyle:{marginRight:"8px",display:"inline-block",color:"rgba(0,0,0,0.85)"}},[s._v("\n "+s._s(s.title)+"\n ")]),s._v(" "),s.content?[s._v("\n "+s._s(s.content)+"\n ")]:s._t("content")],2)};h._withStripped=!0;var C={props:{title:String,content:String}},d=Object(l.a)(C,h,[],!1,null,null,null);d.options.__file="components/drawer/demo/descriptionItem.vue";var m={data:function(){return{visible:!1,pStyle:{fontSize:"16px",color:"rgba(0,0,0,0.85)",lineHeight:"24px",display:"block",marginBottom:"16px"},pStyle2:{marginBottom:"24px"}}},components:{descriptionItem:d.exports},methods:{showDrawer:function(){this.visible=!0},onClose:function(){this.visible=!1}}},j=Object(l.a)(m,p,[],!1,null,null,null);j.options.__file="components/drawer/demo/user-profile.md";var g=j.exports,u=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-button type="primary" @click="showDrawer">\n Open\n </a-button>\n <a-drawer title="Multi-level drawer" width="520" :closable="false" @close="onClose" :visible="visible">\n <a-button type="primary" @click="showChildrenDrawer">\n Two-level drawer\n </a-button>\n <a-drawer title="Two-level Drawer" width="320" :closable="false" @close="onChildrenDrawerClose" :visible="childrenDrawer">\n <a-button type="primary" @click="showChildrenDrawer">\n This is two-level drawer\n </a-button>\n </a-drawer>\n <div :style="{\n position: \'absolute\',\n bottom: 0,\n width: \'100%\',\n borderTop: \'1px solid #e8e8e8\',\n padding: \'10px 16px\',\n textAlign: \'right\',\n left: 0,\n background: \'#fff\',\n borderRadius: \'0 0 4px 4px\',\n }">\n <a-button style="marginRight: 8px" @click="onClose">\n Cancel\n </a-button>\n <a-button @click="onClose" type="primary">\n Submit\n </a-button>\n </div>\n </a-drawer>\n </div>\n',script:"\n export default {\n data() {\n return {\n visible: false,\n childrenDrawer: false,\n };\n },\n methods: {\n showDrawer() {\n this.visible = true;\n },\n onClose() {\n this.visible = false;\n },\n showChildrenDrawer() {\n this.childrenDrawer = true;\n },\n onChildrenDrawerClose() {\n this.childrenDrawer = false;\n },\n },\n };\n",style:null,us:"\n#### Multi-level drawer\nOpen a new drawer on top of an existing drawer to handle multi branch tasks\n",cn:"\n#### 多层抽屉\n在抽屉内打开新的抽屉，用以解决多分支任务的复杂状况。\n",sourceCode:'<template>\n <div>\n <a-button type="primary" @click="showDrawer">\n Open\n </a-button>\n <a-drawer\n title="Multi-level drawer"\n width="520"\n :closable="false"\n @close="onClose"\n :visible="visible"\n >\n <a-button type="primary" @click="showChildrenDrawer">\n Two-level drawer\n </a-button>\n <a-drawer\n title="Two-level Drawer"\n width="320"\n :closable="false"\n @close="onChildrenDrawerClose"\n :visible="childrenDrawer"\n >\n <a-button type="primary" @click="showChildrenDrawer">\n This is two-level drawer\n </a-button>\n </a-drawer>\n <div\n :style="{\n position: \'absolute\',\n bottom: 0,\n width: \'100%\',\n borderTop: \'1px solid #e8e8e8\',\n padding: \'10px 16px\',\n textAlign: \'right\',\n left: 0,\n background: \'#fff\',\n borderRadius: \'0 0 4px 4px\',\n }"\n >\n <a-button style="marginRight: 8px" @click="onClose">\n Cancel\n </a-button>\n <a-button @click="onClose" type="primary">\n Submit\n </a-button>\n </div>\n </a-drawer>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n visible: false,\n childrenDrawer: false,\n };\n },\n methods: {\n showDrawer() {\n this.visible = true;\n },\n onClose() {\n this.visible = false;\n },\n showChildrenDrawer() {\n this.childrenDrawer = true;\n },\n onChildrenDrawerClose() {\n this.childrenDrawer = false;\n },\n },\n };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-button",{attrs:{type:"primary"},on:{click:s.showDrawer}},[s._v("\n Open\n ")]),s._v(" "),t("a-drawer",{attrs:{title:"Multi-level drawer",width:"520",closable:!1,visible:s.visible},on:{close:s.onClose}},[t("a-button",{attrs:{type:"primary"},on:{click:s.showChildrenDrawer}},[s._v("\n Two-level drawer\n ")]),s._v(" "),t("a-drawer",{attrs:{title:"Two-level Drawer",width:"320",closable:!1,visible:s.childrenDrawer},on:{close:s.onChildrenDrawerClose}},[t("a-button",{attrs:{type:"primary"},on:{click:s.showChildrenDrawer}},[s._v("\n This is two-level drawer\n ")])],1),s._v(" "),t("div",{style:{position:"absolute",bottom:0,width:"100%",borderTop:"1px solid #e8e8e8",padding:"10px 16px",textAlign:"right",left:0,background:"#fff",borderRadius:"0 0 4px 4px"}},[t("a-button",{staticStyle:{marginRight:"8px"},on:{click:s.onClose}},[s._v("\n Cancel\n ")]),s._v(" "),t("a-button",{attrs:{type:"primary"},on:{click:s.onClose}},[s._v("\n Submit\n ")])],1)],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"多层抽屉"}},[s._v("多层抽屉 "),t("a",{staticClass:"anchor",attrs:{href:"#多层抽屉"}},[s._v("#")])]),s._v(" "),t("p",[s._v("在抽屉内打开新的抽屉，用以解决多分支任务的复杂状况。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Multi-level-drawer"}},[s._v("Multi-level drawer "),t("a",{staticClass:"anchor",attrs:{href:"#Multi-level-drawer"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Open a new drawer on top of an existing drawer to handle multi branch tasks")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"showDrawer"')]),s._v(">")]),s._v("\n Open\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-drawer")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Multi-level drawer"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"520"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onClose"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":visible")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v("\n >")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"showChildrenDrawer"')]),s._v(">")]),s._v("\n Two-level drawer\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-drawer")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Two-level Drawer"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"320"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onChildrenDrawerClose"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":visible")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"childrenDrawer"')]),s._v("\n >")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"showChildrenDrawer"')]),s._v(">")]),s._v("\n This is two-level drawer\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-drawer")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{\n position: 'absolute',\n bottom: 0,\n width: '100%',\n borderTop: '1px solid #e8e8e8',\n padding: '10px 16px',\n textAlign: 'right',\n left: 0,\n background: '#fff',\n borderRadius: '0 0 4px 4px',\n }\"")]),s._v("\n >")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"marginRight: 8px"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onClose"')]),s._v(">")]),s._v("\n Cancel\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onClose"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("\n Submit\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-drawer")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("visible")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("childrenDrawer")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n };\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n showDrawer() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n },\n onClose() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n },\n showChildrenDrawer() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".childrenDrawer = "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n },\n onChildrenDrawerClose() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".childrenDrawer = "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n },\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};u._withStripped=!0;var w={data:function(){return{visible:!1,childrenDrawer:!1}},methods:{showDrawer:function(){this.visible=!0},onClose:function(){this.visible=!1},showChildrenDrawer:function(){this.childrenDrawer=!0},onChildrenDrawerClose:function(){this.childrenDrawer=!1}}},b=Object(l.a)(w,u,[],!1,null,null,null);b.options.__file="components/drawer/demo/multi-level-drawer.md";var f=b.exports,y=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-button type="primary" @click="showDrawer"> <a-icon type="plus"/> New account </a-button>\n <a-drawer title="Create a new account" :width="720" @close="onClose" :visible="visible" :wrapStyle="{height: \'calc(100% - 108px)\',overflow: \'auto\',paddingBottom: \'108px\'}">\n <a-form :form="form" layout="vertical" hideRequiredMark="">\n <a-row :gutter="16">\n <a-col :span="12">\n <a-form-item label="Name">\n <a-input v-decorator="[\'name\', {\n rules: [{ required: true, message: \'Please enter user name\' }]\n }]" placeholder="Please enter user name"/>\n </a-form-item>\n </a-col>\n <a-col :span="12">\n <a-form-item label="Url">\n <a-input v-decorator="[\'url\', {\n rules: [{ required: true, message: \'please enter url\' }]\n }]" style="width: 100%" addonBefore="http://" addonAfter=".com" placeholder="please enter url"/>\n </a-form-item>\n </a-col>\n </a-row>\n <a-row :gutter="16">\n <a-col :span="12">\n <a-form-item label="Owner">\n <a-select v-decorator="[\'owner\', {\n rules: [{ required: true, message: \'Please select an owner\' }]\n }]" placeholder="Please a-s an owner">\n <a-select-option value="xiao">Xiaoxiao Fu</a-select-option>\n <a-select-option value="mao">Maomao Zhou</a-select-option>\n </a-select>\n </a-form-item>\n </a-col>\n <a-col :span="12">\n <a-form-item label="Type">\n <a-select v-decorator="[\'type\', {\n rules: [{ required: true, message: \'Please choose the type\' }]\n }]" placeholder="Please choose the type">\n <a-select-option value="private">Private</a-select-option>\n <a-select-option value="public">Public</a-select-option>\n </a-select>\n </a-form-item>\n </a-col>\n </a-row>\n <a-row :gutter="16">\n <a-col :span="12">\n <a-form-item label="Approver">\n <a-select v-decorator="[\'approver\', {\n rules: [{ required: true, message: \'Please choose the approver\' }]\n }]" placeholder="Please choose the approver">\n <a-select-option value="jack">Jack Ma</a-select-option>\n <a-select-option value="tom">Tom Liu</a-select-option>\n </a-select>\n </a-form-item>\n </a-col>\n <a-col :span="12">\n <a-form-item label="DateTime">\n <a-date-picker v-decorator="[\'dateTime\', {\n rules: [{ required: true, message: \'Please choose the dateTime\' }]\n }]" style="width: 100%" :getPopupContainer="trigger => trigger.parentNode"/>\n </a-form-item>\n </a-col>\n </a-row>\n <a-row :gutter="16">\n <a-col :span="24">\n <a-form-item label="Description">\n <a-textarea v-decorator="[\'description\', {\n rules: [{ required: true, message: \'Please enter url description\' }]\n }]" :rows="4" placeholder="please enter url description"/>\n </a-form-item>\n </a-col>\n </a-row>\n </a-form>\n <div :style="{\n position: \'absolute\',\n left: 0,\n bottom: 0,\n width: \'100%\',\n borderTop: \'1px solid #e9e9e9\',\n padding: \'10px 16px\',\n background: \'#fff\',\n textAlign: \'right\',\n }">\n <a-button :style="{marginRight: \'8px\'}" @click="onClose">\n Cancel\n </a-button>\n <a-button @click="onClose" type="primary">Submit</a-button>\n </div>\n </a-drawer>\n </div>\n',script:"\n export default {\n data() {\n return {\n form: this.$form.createForm(this),\n visible: false,\n };\n },\n methods: {\n showDrawer() {\n this.visible = true;\n },\n onClose() {\n this.visible = false;\n },\n },\n };\n",style:null,us:"\n#### Submit form in drawer\nUse form in drawer with submit button.\n",cn:"\n#### 抽屉表单\n在抽屉中使用表单。\n",sourceCode:'<template>\n <div>\n <a-button type="primary" @click="showDrawer"> <a-icon type="plus" /> New account </a-button>\n <a-drawer\n title="Create a new account"\n :width="720"\n @close="onClose"\n :visible="visible"\n :wrapStyle="{height: \'calc(100% - 108px)\',overflow: \'auto\',paddingBottom: \'108px\'}"\n >\n <a-form :form="form" layout="vertical" hideRequiredMark>\n <a-row :gutter="16">\n <a-col :span="12">\n <a-form-item label="Name">\n <a-input\n v-decorator="[\'name\', {\n rules: [{ required: true, message: \'Please enter user name\' }]\n }]"\n placeholder="Please enter user name"\n />\n </a-form-item>\n </a-col>\n <a-col :span="12">\n <a-form-item label="Url">\n <a-input\n v-decorator="[\'url\', {\n rules: [{ required: true, message: \'please enter url\' }]\n }]"\n style="width: 100%"\n addonBefore="http://"\n addonAfter=".com"\n placeholder="please enter url"\n />\n </a-form-item>\n </a-col>\n </a-row>\n <a-row :gutter="16">\n <a-col :span="12">\n <a-form-item label="Owner">\n <a-select\n v-decorator="[\'owner\', {\n rules: [{ required: true, message: \'Please select an owner\' }]\n }]"\n placeholder="Please a-s an owner"\n >\n <a-select-option value="xiao">Xiaoxiao Fu</a-select-option>\n <a-select-option value="mao">Maomao Zhou</a-select-option>\n </a-select>\n </a-form-item>\n </a-col>\n <a-col :span="12">\n <a-form-item label="Type">\n <a-select\n v-decorator="[\'type\', {\n rules: [{ required: true, message: \'Please choose the type\' }]\n }]"\n placeholder="Please choose the type"\n >\n <a-select-option value="private">Private</a-select-option>\n <a-select-option value="public">Public</a-select-option>\n </a-select>\n </a-form-item>\n </a-col>\n </a-row>\n <a-row :gutter="16">\n <a-col :span="12">\n <a-form-item label="Approver">\n <a-select\n v-decorator="[\'approver\', {\n rules: [{ required: true, message: \'Please choose the approver\' }]\n }]"\n placeholder="Please choose the approver"\n >\n <a-select-option value="jack">Jack Ma</a-select-option>\n <a-select-option value="tom">Tom Liu</a-select-option>\n </a-select>\n </a-form-item>\n </a-col>\n <a-col :span="12">\n <a-form-item label="DateTime">\n <a-date-picker\n v-decorator="[\'dateTime\', {\n rules: [{ required: true, message: \'Please choose the dateTime\' }]\n }]"\n style="width: 100%"\n :getPopupContainer="trigger => trigger.parentNode"\n />\n </a-form-item>\n </a-col>\n </a-row>\n <a-row :gutter="16">\n <a-col :span="24">\n <a-form-item label="Description">\n <a-textarea\n v-decorator="[\'description\', {\n rules: [{ required: true, message: \'Please enter url description\' }]\n }]"\n :rows="4"\n placeholder="please enter url description"\n />\n </a-form-item>\n </a-col>\n </a-row>\n </a-form>\n <div\n :style="{\n position: \'absolute\',\n left: 0,\n bottom: 0,\n width: \'100%\',\n borderTop: \'1px solid #e9e9e9\',\n padding: \'10px 16px\',\n background: \'#fff\',\n textAlign: \'right\',\n }"\n >\n <a-button :style="{marginRight: \'8px\'}" @click="onClose">\n Cancel\n </a-button>\n <a-button @click="onClose" type="primary">Submit</a-button>\n </div>\n </a-drawer>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n form: this.$form.createForm(this),\n visible: false,\n };\n },\n methods: {\n showDrawer() {\n this.visible = true;\n },\n onClose() {\n this.visible = false;\n },\n },\n };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-button",{attrs:{type:"primary"},on:{click:s.showDrawer}},[t("a-icon",{attrs:{type:"plus"}}),s._v(" New account ")],1),s._v(" "),t("a-drawer",{attrs:{title:"Create a new account",width:720,visible:s.visible,wrapStyle:{height:"calc(100% - 108px)",overflow:"auto",paddingBottom:"108px"}},on:{close:s.onClose}},[t("a-form",{attrs:{form:s.form,layout:"vertical",hideRequiredMark:""}},[t("a-row",{attrs:{gutter:16}},[t("a-col",{attrs:{span:12}},[t("a-form-item",{attrs:{label:"Name"}},[t("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["name",{rules:[{required:!0,message:"Please enter user name"}]}],expression:"['name', {\n rules: [{ required: true, message: 'Please enter user name' }]\n }]"}],attrs:{placeholder:"Please enter user name"}})],1)],1),s._v(" "),t("a-col",{attrs:{span:12}},[t("a-form-item",{attrs:{label:"Url"}},[t("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["url",{rules:[{required:!0,message:"please enter url"}]}],expression:"['url', {\n rules: [{ required: true, message: 'please enter url' }]\n }]"}],staticStyle:{width:"100%"},attrs:{addonBefore:"http://",addonAfter:".com",placeholder:"please enter url"}})],1)],1)],1),s._v(" "),t("a-row",{attrs:{gutter:16}},[t("a-col",{attrs:{span:12}},[t("a-form-item",{attrs:{label:"Owner"}},[t("a-select",{directives:[{name:"decorator",rawName:"v-decorator",value:["owner",{rules:[{required:!0,message:"Please select an owner"}]}],expression:"['owner', {\n rules: [{ required: true, message: 'Please select an owner' }]\n }]"}],attrs:{placeholder:"Please a-s an owner"}},[t("a-select-option",{attrs:{value:"xiao"}},[s._v("Xiaoxiao Fu")]),s._v(" "),t("a-select-option",{attrs:{value:"mao"}},[s._v("Maomao Zhou")])],1)],1)],1),s._v(" "),t("a-col",{attrs:{span:12}},[t("a-form-item",{attrs:{label:"Type"}},[t("a-select",{directives:[{name:"decorator",rawName:"v-decorator",value:["type",{rules:[{required:!0,message:"Please choose the type"}]}],expression:"['type', {\n rules: [{ required: true, message: 'Please choose the type' }]\n }]"}],attrs:{placeholder:"Please choose the type"}},[t("a-select-option",{attrs:{value:"private"}},[s._v("Private")]),s._v(" "),t("a-select-option",{attrs:{value:"public"}},[s._v("Public")])],1)],1)],1)],1),s._v(" "),t("a-row",{attrs:{gutter:16}},[t("a-col",{attrs:{span:12}},[t("a-form-item",{attrs:{label:"Approver"}},[t("a-select",{directives:[{name:"decorator",rawName:"v-decorator",value:["approver",{rules:[{required:!0,message:"Please choose the approver"}]}],expression:"['approver', {\n rules: [{ required: true, message: 'Please choose the approver' }]\n }]"}],attrs:{placeholder:"Please choose the approver"}},[t("a-select-option",{attrs:{value:"jack"}},[s._v("Jack Ma")]),s._v(" "),t("a-select-option",{attrs:{value:"tom"}},[s._v("Tom Liu")])],1)],1)],1),s._v(" "),t("a-col",{attrs:{span:12}},[t("a-form-item",{attrs:{label:"DateTime"}},[t("a-date-picker",{directives:[{name:"decorator",rawName:"v-decorator",value:["dateTime",{rules:[{required:!0,message:"Please choose the dateTime"}]}],expression:"['dateTime', {\n rules: [{ required: true, message: 'Please choose the dateTime' }]\n }]"}],staticStyle:{width:"100%"},attrs:{getPopupContainer:function(s){return s.parentNode}}})],1)],1)],1),s._v(" "),t("a-row",{attrs:{gutter:16}},[t("a-col",{attrs:{span:24}},[t("a-form-item",{attrs:{label:"Description"}},[t("a-textarea",{directives:[{name:"decorator",rawName:"v-decorator",value:["description",{rules:[{required:!0,message:"Please enter url description"}]}],expression:"['description', {\n rules: [{ required: true, message: 'Please enter url description' }]\n }]"}],attrs:{rows:4,placeholder:"please enter url description"}})],1)],1)],1)],1),s._v(" "),t("div",{style:{position:"absolute",left:0,bottom:0,width:"100%",borderTop:"1px solid #e9e9e9",padding:"10px 16px",background:"#fff",textAlign:"right"}},[t("a-button",{style:{marginRight:"8px"},on:{click:s.onClose}},[s._v("\n Cancel\n ")]),s._v(" "),t("a-button",{attrs:{type:"primary"},on:{click:s.onClose}},[s._v("Submit")])],1)],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"抽屉表单"}},[s._v("抽屉表单 "),t("a",{staticClass:"anchor",attrs:{href:"#抽屉表单"}},[s._v("#")])]),s._v(" "),t("p",[s._v("在抽屉中使用表单。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Submit-form-in-drawer"}},[s._v("Submit form in drawer "),t("a",{staticClass:"anchor",attrs:{href:"#Submit-form-in-drawer"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Use form in drawer with submit button.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"showDrawer"')]),s._v(">")]),s._v(" "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"plus"')]),s._v(" />")]),s._v(" New account "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-drawer")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Create a new account"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"720"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onClose"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":visible")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":wrapStyle")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}\"")]),s._v("\n >")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-form")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":form")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("hideRequiredMark")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-form-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-input")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-decorator")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['name', {\n rules: [{ required: true, message: 'Please enter user name' }]\n }]\"")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Please enter user name"')]),s._v("\n />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-form-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-form-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Url"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-input")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-decorator")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['url', {\n rules: [{ required: true, message: 'please enter url' }]\n }]\"")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("addonBefore")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"http://"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("addonAfter")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('".com"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"please enter url"')]),s._v("\n />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-form-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-form-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Owner"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-select")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-decorator")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['owner', {\n rules: [{ required: true, message: 'Please select an owner' }]\n }]\"")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Please a-s an owner"')]),s._v("\n >")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-select-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"xiao"')]),s._v(">")]),s._v("Xiaoxiao Fu"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-select-option")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-select-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"mao"')]),s._v(">")]),s._v("Maomao Zhou"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-select-option")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-select")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-form-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-form-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Type"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-select")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-decorator")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['type', {\n rules: [{ required: true, message: 'Please choose the type' }]\n }]\"")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Please choose the type"')]),s._v("\n >")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-select-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"private"')]),s._v(">")]),s._v("Private"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-select-option")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-select-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"public"')]),s._v(">")]),s._v("Public"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-select-option")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-select")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-form-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-form-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Approver"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-select")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-decorator")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['approver', {\n rules: [{ required: true, message: 'Please choose the approver' }]\n }]\"")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Please choose the approver"')]),s._v("\n >")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-select-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"jack"')]),s._v(">")]),s._v("Jack Ma"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-select-option")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-select-option")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"tom"')]),s._v(">")]),s._v("Tom Liu"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-select-option")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-select")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-form-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-form-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"DateTime"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-date-picker")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-decorator")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['dateTime', {\n rules: [{ required: true, message: 'Please choose the dateTime' }]\n }]\"")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":getPopupContainer")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"trigger => trigger.parentNode"')]),s._v("\n />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-form-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"24"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-form-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Description"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-textarea")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-decorator")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['description', {\n rules: [{ required: true, message: 'Please enter url description' }]\n }]\"")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":rows")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"please enter url description"')]),s._v("\n />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-form-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-form")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{\n position: 'absolute',\n left: 0,\n bottom: 0,\n width: '100%',\n borderTop: '1px solid #e9e9e9',\n padding: '10px 16px',\n background: '#fff',\n textAlign: 'right',\n }\"")]),s._v("\n >")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{marginRight: '8px'}\"")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onClose"')]),s._v(">")]),s._v("\n Cancel\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onClose"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Submit"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-drawer")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$form.createForm("),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v("),\n "),t("span",{staticClass:"hljs-attr"},[s._v("visible")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n };\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n showDrawer() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n },\n onClose() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".visible = "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n },\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};y._withStripped=!0;var x={data:function(){return{form:this.$form.createForm(this),visible:!1}},methods:{showDrawer:function(){this.visible=!0},onClose:function(){this.visible=!1}}},k=Object(l.a)(x,y,[],!1,null,null,null);k.options.__file="components/drawer/demo/form-in-drawer.md";var D=k.exports,S=function(){var s=this.$createElement;this._self._c;return this._m(0)};S._withStripped=!0;var P=Object(l.a)({},S,[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[t("h2",{attrs:{id:"API"}},[s._v("API "),t("a",{staticClass:"anchor",attrs:{href:"#API"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("默认值")]),s._v(" "),t("th",[s._v("版本")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("closable")]),s._v(" "),t("td",[s._v("是否显示右上角的关闭按钮")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("true")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("destroyOnClose")]),s._v(" "),t("td",[s._v("关闭时销毁 Drawer 里的子元素")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("getContainer")]),s._v(" "),t("td",[s._v("指定 Drawer 挂载的 HTML 节点")]),s._v(" "),t("td",[s._v("HTMLElement | "),t("code",{pre:!0},[s._v("() => HTMLElement")]),s._v(" | Selectors")]),s._v(" "),t("td",[s._v("'body'")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("maskClosable")]),s._v(" "),t("td",[s._v("点击蒙层是否允许关闭")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("true")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("mask")]),s._v(" "),t("td",[s._v("是否展示遮罩")]),s._v(" "),t("td",[s._v("Boolean")]),s._v(" "),t("td",[s._v("true")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("maskStyle")]),s._v(" "),t("td",[s._v("遮罩样式")]),s._v(" "),t("td",[s._v("object")]),s._v(" "),t("td",[s._v("{}")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("title")]),s._v(" "),t("td",[s._v("标题")]),s._v(" "),t("td",[s._v("string | slot")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("visible")]),s._v(" "),t("td",[s._v("Drawer 是否可见")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("wrapClassName")]),s._v(" "),t("td",[s._v("对话框外层容器的类名")]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("wrapStyle")]),s._v(" "),t("td",[s._v("可用于设置 Drawer 最外层容器的样式，和 "),t("code",{pre:!0},[s._v("drawerStyle")]),s._v(" 的区别是作用节点包括 "),t("code",{pre:!0},[s._v("mask")])]),s._v(" "),t("td",[s._v("object")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("drawerStyle")]),s._v(" "),t("td",[s._v("用于设置 Drawer 弹出层的样式")]),s._v(" "),t("td",[s._v("object")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td",[s._v("1.4.11")])]),s._v(" "),t("tr",[t("td",[s._v("bodyStyle")]),s._v(" "),t("td",[s._v("可用于设置 Drawer 内容部分的样式")]),s._v(" "),t("td",[s._v("object")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("width")]),s._v(" "),t("td",[s._v("宽度")]),s._v(" "),t("td",[s._v("string | number")]),s._v(" "),t("td",[s._v("256")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("height")]),s._v(" "),t("td",[s._v("高度, 在 "),t("code",{pre:!0},[s._v("placement")]),s._v(" 为 "),t("code",{pre:!0},[s._v("top")]),s._v(" 或 "),t("code",{pre:!0},[s._v("bottom")]),s._v(" 时使用")]),s._v(" "),t("td",[s._v("string | number")]),s._v(" "),t("td",[s._v("256")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("zIndex")]),s._v(" "),t("td",[s._v("设置 Drawer 的 "),t("code",{pre:!0},[s._v("z-index")])]),s._v(" "),t("td",[s._v("Number")]),s._v(" "),t("td",[s._v("1000")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("placement")]),s._v(" "),t("td",[s._v("抽屉的方向")]),s._v(" "),t("td",[s._v("'top' | 'right' | 'bottom' | 'left'")]),s._v(" "),t("td",[s._v("'right'")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("handle")]),s._v(" "),t("td",[s._v("设置后抽屉直接挂载到 DOM 上，你可以通过该 handle 控制抽屉打开关闭")]),s._v(" "),t("td",[s._v("VNode | slot")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td")])])]),s._v(" "),t("h2",{attrs:{id:"方法"}},[s._v("方法 "),t("a",{staticClass:"anchor",attrs:{href:"#方法"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("名称")]),s._v(" "),t("th",[s._v("描述")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("默认值")]),s._v(" "),t("th",[s._v("版本")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("close")]),s._v(" "),t("td",[s._v("点击遮罩层或右上角叉或取消按钮的回调")]),s._v(" "),t("td",[s._v("function(e)")]),s._v(" "),t("td",[s._v("无")]),s._v(" "),t("td")])])])])}],!1,null,null,null);P.options.__file="components/drawer/index.zh-CN.md";var T=P.exports,A=function(){var s=this.$createElement;this._self._c;return this._m(0)};A._withStripped=!0;var B=Object(l.a)({},A,[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[t("h2",{attrs:{id:"API"}},[s._v("API "),t("a",{staticClass:"anchor",attrs:{href:"#API"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Property")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Type")]),s._v(" "),t("th",[s._v("Default")]),s._v(" "),t("th",[s._v("Version")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("closable")]),s._v(" "),t("td",[s._v("Whether a close (x) button is visible on top right of the Drawer dialog or not.")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("true")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("destroyOnClose")]),s._v(" "),t("td",[s._v("Whether to unmount child components on closing drawer or not.")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("getContainer")]),s._v(" "),t("td",[s._v("Return the mounted node for Drawer.")]),s._v(" "),t("td",[s._v("HTMLElement | "),t("code",{pre:!0},[s._v("() => HTMLElement")]),s._v(" | Selectors")]),s._v(" "),t("td",[s._v("'body'")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("mask")]),s._v(" "),t("td",[s._v("Whether to show mask or not.")]),s._v(" "),t("td",[s._v("Boolean")]),s._v(" "),t("td",[s._v("true")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("maskClosable")]),s._v(" "),t("td",[s._v("Clicking on the mask (area outside the Drawer) to close the Drawer or not.")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("true")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("maskStyle")]),s._v(" "),t("td",[s._v("Style for Drawer's mask element.")]),s._v(" "),t("td",[s._v("object")]),s._v(" "),t("td",[s._v("{}")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("title")]),s._v(" "),t("td",[s._v("The title for Drawer.")]),s._v(" "),t("td",[s._v("string|slot")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("visible")]),s._v(" "),t("td",[s._v("Whether the Drawer dialog is visible or not.")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("wrapClassName")]),s._v(" "),t("td",[s._v("The class name of the container of the Drawer dialog.")]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("wrapStyle")]),s._v(" "),t("td",[s._v("Style of wrapper element which "),t("strong",[s._v("contains mask")]),s._v(" compare to "),t("code",{pre:!0},[s._v("drawerStyle")])]),s._v(" "),t("td",[s._v("object")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("drawerStyle")]),s._v(" "),t("td",[s._v("Style of the popup layer element")]),s._v(" "),t("td",[s._v("object")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td",[s._v("1.4.11")])]),s._v(" "),t("tr",[t("td",[s._v("bodyStyle")]),s._v(" "),t("td",[s._v("Style of the drawer content part")]),s._v(" "),t("td",[s._v("object")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("width")]),s._v(" "),t("td",[s._v("Width of the Drawer dialog.")]),s._v(" "),t("td",[s._v("string|number")]),s._v(" "),t("td",[s._v("256")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("height")]),s._v(" "),t("td",[s._v("placement is "),t("code",{pre:!0},[s._v("top")]),s._v(" or "),t("code",{pre:!0},[s._v("bottom")]),s._v(", height of the Drawer dialog.")]),s._v(" "),t("td",[s._v("string|number")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("zIndex")]),s._v(" "),t("td",[s._v("The "),t("code",{pre:!0},[s._v("z-index")]),s._v(" of the Drawer.")]),s._v(" "),t("td",[s._v("Number")]),s._v(" "),t("td",[s._v("1000")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("placement")]),s._v(" "),t("td",[s._v("The placement of the Drawer.")]),s._v(" "),t("td",[s._v("'top' | 'right' | 'bottom' | 'left'")]),s._v(" "),t("td",[s._v("'right'")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("handle")]),s._v(" "),t("td",[s._v("After setting, the drawer is directly mounted on the DOM, and you can control the drawer to open or close through this "),t("code",{pre:!0},[s._v("handle")]),s._v(".")]),s._v(" "),t("td",[s._v("VNode | slot")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td")])])]),s._v(" "),t("h2",{attrs:{id:"Methods"}},[s._v("Methods "),t("a",{staticClass:"anchor",attrs:{href:"#Methods"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Name")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Type")]),s._v(" "),t("th",[s._v("Default")]),s._v(" "),t("th",[s._v("Version")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("close")]),s._v(" "),t("td",[s._v("Specify a callback that will be called when a user clicks mask, close button or Cancel button.")]),s._v(" "),t("td",[s._v("function(e)")]),s._v(" "),t("td",[s._v("-")]),s._v(" "),t("td")])])])])}],!1,null,null,null);B.options.__file="components/drawer/index.en-US.md";var M=B.exports,q=(t(531),"# Drawer 抽屉\n 屏幕边缘滑出的浮层面板。\n\n## 何时使用\n\n抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。\n\n* 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。\n* 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。\n\n ## 代码演示\n "),N="# Drawer\n Panel slides from screen edge.\n\n## When To Use\n\nA 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 that user can interact with the Drawer without leaving the current page, tasks can be achieved more efficient within the same context.\n\n* Use a Form to create or edit a set of information.\n* Processing subtasks. When subtasks are too heavy for Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.\n* When a same Form is needed in multiple places.\n ## Examples\n ",O={category:"Components",type:"Feedback",zhType:"反馈",title:"Drawer",subtitle:"抽屉",render:function(){var s=arguments[0];return s("div",[s("md",{attrs:{cn:q,us:N}}),s(v),s(c),s(D),s(g),s(f),s("api",[s(T,{slot:"cn"}),s(M)])])}},I=Object(l.a)(O,void 0,void 0,!1,null,null,null);I.options.__file="components/drawer/demo/index.vue";a.default=I.exports}}]); |