Drawer抽屉 - 图1

Drawer 抽屉

屏幕边缘滑出的浮层面板。

何时使用

抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。

  • 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
  • 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。

代码演示

Drawer抽屉 - 图2

基础抽屉

基础抽屉，点击触发按钮抽屉从右滑出，点击遮罩区关闭

  1. <template>
  2.   <div>
  3.     <a-button type="primary" @click="showDrawer">
  4.       Open
  5.     </a-button>
  6.     <a-drawer
  7.       title="Basic Drawer"
  8.       placement="right"
  9.       :closable="false"
  10.       :visible="visible"
  11.       :after-visible-change="afterVisibleChange"
  12.       @close="onClose"
  13.     >
  14.       <p>Some contents...</p>
  15.       <p>Some contents...</p>
  16.       <p>Some contents...</p>
  17.     </a-drawer>
  18.   </div>
  19. </template>
  20. <script>
  21. export default {
  22.   data() {
  23.     return {
  24.       visible: false,
  25.     };
  26.   },
  27.   methods: {
  28.     afterVisibleChange(val) {
  29.       console.log('visible', val);
  30.     },
  31.     showDrawer() {
  32.       this.visible = true;
  33.     },
  34.     onClose() {
  35.       this.visible = false;
  36.     },
  37.   },
  38. };
  39. </script>

Drawer抽屉 - 图3

抽屉表单

在抽屉中使用表单。

  1. <template>
  2.   <div>
  3.     <a-button type="primary" @click="showDrawer"> <a-icon type="plus" /> New account </a-button>
  4.     <a-drawer
  5.       title="Create a new account"
  6.       :width="720"
  7.       :visible="visible"
  8.       :body-style="{ paddingBottom: '80px' }"
  9.       @close="onClose"
  10.     >
  11.       <a-form :form="form" layout="vertical" hide-required-mark>
  12.         <a-row :gutter="16">
  13.           <a-col :span="12">
  14.             <a-form-item label="Name">
  15.               <a-input
  16.                 v-decorator="[
  17.                   'name',
  18.                   {
  19.                     rules: [{ required: true, message: 'Please enter user name' }],
  20.                   },
  21.                 ]"
  22.                 placeholder="Please enter user name"
  23.               />
  24.             </a-form-item>
  25.           </a-col>
  26.           <a-col :span="12">
  27.             <a-form-item label="Url">
  28.               <a-input
  29.                 v-decorator="[
  30.                   'url',
  31.                   {
  32.                     rules: [{ required: true, message: 'please enter url' }],
  33.                   },
  34.                 ]"
  35.                 style="width: 100%"
  36.                 addon-before="http://"
  37.                 addon-after=".com"
  38.                 placeholder="please enter url"
  39.               />
  40.             </a-form-item>
  41.           </a-col>
  42.         </a-row>
  43.         <a-row :gutter="16">
  44.           <a-col :span="12">
  45.             <a-form-item label="Owner">
  46.               <a-select
  47.                 v-decorator="[
  48.                   'owner',
  49.                   {
  50.                     rules: [{ required: true, message: 'Please select an owner' }],
  51.                   },
  52.                 ]"
  53.                 placeholder="Please a-s an owner"
  54.               >
  55.                 <a-select-option value="xiao">
  56.                   Xiaoxiao Fu
  57.                 </a-select-option>
  58.                 <a-select-option value="mao">
  59.                   Maomao Zhou
  60.                 </a-select-option>
  61.               </a-select>
  62.             </a-form-item>
  63.           </a-col>
  64.           <a-col :span="12">
  65.             <a-form-item label="Type">
  66.               <a-select
  67.                 v-decorator="[
  68.                   'type',
  69.                   {
  70.                     rules: [{ required: true, message: 'Please choose the type' }],
  71.                   },
  72.                 ]"
  73.                 placeholder="Please choose the type"
  74.               >
  75.                 <a-select-option value="private">
  76.                   Private
  77.                 </a-select-option>
  78.                 <a-select-option value="public">
  79.                   Public
  80.                 </a-select-option>
  81.               </a-select>
  82.             </a-form-item>
  83.           </a-col>
  84.         </a-row>
  85.         <a-row :gutter="16">
  86.           <a-col :span="12">
  87.             <a-form-item label="Approver">
  88.               <a-select
  89.                 v-decorator="[
  90.                   'approver',
  91.                   {
  92.                     rules: [{ required: true, message: 'Please choose the approver' }],
  93.                   },
  94.                 ]"
  95.                 placeholder="Please choose the approver"
  96.               >
  97.                 <a-select-option value="jack">
  98.                   Jack Ma
  99.                 </a-select-option>
  100.                 <a-select-option value="tom">
  101.                   Tom Liu
  102.                 </a-select-option>
  103.               </a-select>
  104.             </a-form-item>
  105.           </a-col>
  106.           <a-col :span="12">
  107.             <a-form-item label="DateTime">
  108.               <a-date-picker
  109.                 v-decorator="[
  110.                   'dateTime',
  111.                   {
  112.                     rules: [{ required: true, message: 'Please choose the dateTime' }],
  113.                   },
  114.                 ]"
  115.                 style="width: 100%"
  116.                 :get-popup-container="trigger => trigger.parentNode"
  117.               />
  118.             </a-form-item>
  119.           </a-col>
  120.         </a-row>
  121.         <a-row :gutter="16">
  122.           <a-col :span="24">
  123.             <a-form-item label="Description">
  124.               <a-textarea
  125.                 v-decorator="[
  126.                   'description',
  127.                   {
  128.                     rules: [{ required: true, message: 'Please enter url description' }],
  129.                   },
  130.                 ]"
  131.                 :rows="4"
  132.                 placeholder="please enter url description"
  133.               />
  134.             </a-form-item>
  135.           </a-col>
  136.         </a-row>
  137.       </a-form>
  138.       <div
  139.         :style="{
  140.           position: 'absolute',
  141.           right: 0,
  142.           bottom: 0,
  143.           width: '100%',
  144.           borderTop: '1px solid #e9e9e9',
  145.           padding: '10px 16px',
  146.           background: '#fff',
  147.           textAlign: 'right',
  148.           zIndex: 1,
  149.         }"
  150.       >
  151.         <a-button :style="{ marginRight: '8px' }" @click="onClose">
  152.           Cancel
  153.         </a-button>
  154.         <a-button type="primary" @click="onClose">
  155.           Submit
  156.         </a-button>
  157.       </div>
  158.     </a-drawer>
  159.   </div>
  160. </template>
  161. <script>
  162. export default {
  163.   data() {
  164.     return {
  165.       form: this.$form.createForm(this),
  166.       visible: false,
  167.     };
  168.   },
  169.   methods: {
  170.     showDrawer() {
  171.       this.visible = true;
  172.     },
  173.     onClose() {
  174.       this.visible = false;
  175.     },
  176.   },
  177. };
  178. </script>

Drawer抽屉 - 图4

多层抽屉

在抽屉内打开新的抽屉，用以解决多分支任务的复杂状况。

  1. <template>
  2.   <div>
  3.     <a-button type="primary" @click="showDrawer">
  4.       Open
  5.     </a-button>
  6.     <a-drawer
  7.       title="Multi-level drawer"
  8.       width="520"
  9.       :closable="false"
  10.       :visible="visible"
  11.       @close="onClose"
  12.     >
  13.       <a-button type="primary" @click="showChildrenDrawer">
  14.         Two-level drawer
  15.       </a-button>
  16.       <a-drawer
  17.         title="Two-level Drawer"
  18.         width="320"
  19.         :closable="false"
  20.         :visible="childrenDrawer"
  21.         @close="onChildrenDrawerClose"
  22.       >
  23.         <a-button type="primary" @click="showChildrenDrawer">
  24.           This is two-level drawer
  25.         </a-button>
  26.       </a-drawer>
  27.       <div
  28.         :style="{
  29.           position: 'absolute',
  30.           bottom: 0,
  31.           width: '100%',
  32.           borderTop: '1px solid #e8e8e8',
  33.           padding: '10px 16px',
  34.           textAlign: 'right',
  35.           left: 0,
  36.           background: '#fff',
  37.           borderRadius: '0 0 4px 4px',
  38.         }"
  39.       >
  40.         <a-button style="marginRight: 8px" @click="onClose">
  41.           Cancel
  42.         </a-button>
  43.         <a-button type="primary" @click="onClose">
  44.           Submit
  45.         </a-button>
  46.       </div>
  47.     </a-drawer>
  48.   </div>
  49. </template>
  50. <script>
  51. export default {
  52.   data() {
  53.     return {
  54.       visible: false,
  55.       childrenDrawer: false,
  56.     };
  57.   },
  58.   methods: {
  59.     showDrawer() {
  60.       this.visible = true;
  61.     },
  62.     onClose() {
  63.       this.visible = false;
  64.     },
  65.     showChildrenDrawer() {
  66.       this.childrenDrawer = true;
  67.     },
  68.     onChildrenDrawerClose() {
  69.       this.childrenDrawer = false;
  70.     },
  71.   },
  72. };
  73. </script>

Drawer抽屉 - 图5

自定义位置

自定义位置，点击触发按钮抽屉从相应的位置滑出，点击遮罩区关闭

  1. <template>
  2.   <div>
  3.     <a-radio-group style="margin-right: 8px" :default-value="placement" @change="onChange">
  4.       <a-radio value="top">
  5.         top
  6.       </a-radio>
  7.       <a-radio value="right">
  8.         right
  9.       </a-radio>
  10.       <a-radio value="bottom">
  11.         bottom
  12.       </a-radio>
  13.       <a-radio value="left">
  14.         left
  15.       </a-radio>
  16.     </a-radio-group>
  17.     <a-button type="primary" @click="showDrawer">
  18.       Open
  19.     </a-button>
  20.     <a-drawer
  21.       title="Basic Drawer"
  22.       :placement="placement"
  23.       :closable="false"
  24.       :visible="visible"
  25.       @close="onClose"
  26.     >
  27.       <p>Some contents...</p>
  28.       <p>Some contents...</p>
  29.       <p>Some contents...</p>
  30.     </a-drawer>
  31.   </div>
  32. </template>
  33. <script>
  34. export default {
  35.   data() {
  36.     return {
  37.       visible: false,
  38.       placement: 'left',
  39.     };
  40.   },
  41.   methods: {
  42.     showDrawer() {
  43.       this.visible = true;
  44.     },
  45.     onClose() {
  46.       this.visible = false;
  47.     },
  48.     onChange(e) {
  49.       this.placement = e.target.value;
  50.     },
  51.   },
  52. };
  53. </script>

Drawer抽屉 - 图6

信息预览抽屉

需要快速预览对象概要时使用，点击遮罩区关闭。

  1. <template>
  2.   <div>
  3.     <a-list
  4.       :data-source="[
  5.         {
  6.           name: 'Lily',
  7.         },
  8.         {
  9.           name: 'Lily',
  10.         },
  11.       ]"
  12.       bordered
  13.     >
  14.       <a-list-item slot="renderItem" :key="`a-${item.id}`" slot-scope="item, index">
  15.         <a slot="actions" @click="showDrawer">View Profile</a>
  16.         <a-list-item-meta description="Progresser XTech">
  17.           <a slot="title" href="https://www.antdv.com/">{{ item.name }}</a>
  18.           <a-avatar
  19.             slot="avatar"
  20.             src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
  21.           />
  22.         </a-list-item-meta>
  23.       </a-list-item>
  24.     </a-list>
  25.     <a-drawer width="640" placement="right" :closable="false" :visible="visible" @close="onClose">
  26.       <p :style="[pStyle, pStyle2]">
  27.         User Profile
  28.       </p>
  29.       <p :style="pStyle">
  30.         Personal
  31.       </p>
  32.       <a-row>
  33.         <a-col :span="12">
  34.           <description-item title="Full Name" content="Lily" />
  35.         </a-col>
  36.         <a-col :span="12">
  37.           <description-item title="Account" content="AntDesign@example.com" />
  38.         </a-col>
  39.       </a-row>
  40.       <a-row>
  41.         <a-col :span="12">
  42.           <description-item title="City" content="HangZhou" />
  43.         </a-col>
  44.         <a-col :span="12">
  45.           <description-item title="Country" content="China🇨🇳" />
  46.         </a-col>
  47.       </a-row>
  48.       <a-row>
  49.         <a-col :span="12">
  50.           <description-item title="Birthday" content="February 2,1900" />
  51.         </a-col>
  52.         <a-col :span="12">
  53.           <description-item title="Website" content="-" />
  54.         </a-col>
  55.       </a-row>
  56.       <a-row>
  57.         <a-col :span="12">
  58.           <description-item
  59.             title="Message"
  60.             content="Make things as simple as possible but no simpler."
  61.           />
  62.         </a-col>
  63.       </a-row>
  64.       <a-divider />
  65.       <p :style="pStyle">
  66.         Company
  67.       </p>
  68.       <a-row>
  69.         <a-col :span="12">
  70.           <description-item title="Position" content="Programmer" />
  71.         </a-col>
  72.         <a-col :span="12">
  73.           <description-item title="Responsibilities" content="Coding" />
  74.         </a-col>
  75.       </a-row>
  76.       <a-row>
  77.         <a-col :span="12">
  78.           <description-item title="Department" content="XTech" />
  79.         </a-col>
  80.         <a-col :span="12">
  81.           <description-item title="Supervisor">
  82.             <a slot="content">Lin</a>
  83.           </description-item>
  84.         </a-col>
  85.       </a-row>
  86.       <a-row>
  87.         <a-col :span="24">
  88.           <description-item
  89.             title="Skills"
  90.             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."
  91.           />
  92.         </a-col>
  93.       </a-row>
  94.       <a-divider />
  95.       <p :style="pStyle">
  96.         Contacts
  97.       </p>
  98.       <a-row>
  99.         <a-col :span="12">
  100.           <description-item title="Email" content="ant-design-vue@example.com" />
  101.         </a-col>
  102.         <a-col :span="12">
  103.           <description-item title="Phone Number" content="+86 181 0000 0000" />
  104.         </a-col>
  105.       </a-row>
  106.       <a-row>
  107.         <a-col :span="24">
  108.           <description-item title="Github">
  109.             <a slot="content" href="https://github.com/vueComponent/ant-design-vue">
  110.               github.com/vueComponent/ant-design-vue
  111.             </a>
  112.           </description-item>
  113.         </a-col>
  114.       </a-row>
  115.     </a-drawer>
  116.   </div>
  117. </template>
  118. <script>
  119. import descriptionItem from './descriptionItem';
  121. export default {
  122.   components: {
  123.     descriptionItem,
  124.   },
  125.   data() {
  126.     return {
  127.       visible: false,
  128.       pStyle: {
  129.         fontSize: '16px',
  130.         color: 'rgba(0,0,0,0.85)',
  131.         lineHeight: '24px',
  132.         display: 'block',
  133.         marginBottom: '16px',
  134.       },
  135.       pStyle2: {
  136.         marginBottom: '24px',
  137.       },
  138.     };
  139.   },
  140.   methods: {
  141.     showDrawer() {
  142.       this.visible = true;
  143.     },
  144.     onClose() {
  145.       this.visible = false;
  146.     },
  147.   },
  148. };
  149. </script>

Drawer抽屉 - 图7

渲染在当前 DOM

渲染在当前 dom 里。自定义容器，查看 getContainer。

  1. <template>
  2.   <div
  3.     :style="{
  4.       height: '200px',
  5.       overflow: 'hidden',
  6.       position: 'relative',
  7.       border: '1px solid #ebedf0',
  8.       borderRadius: '2px',
  9.       padding: '48px',
  10.       textAlign: 'center',
  11.       background: '#fafafa',
  12.     }"
  13.   >
  14.     Render in this
  15.     <div style="margin-top: 16px">
  16.       <a-button type="primary" @click="showDrawer">
  17.         Open
  18.       </a-button>
  19.     </div>
  20.     <a-drawer
  21.       title="Basic Drawer"
  22.       placement="right"
  23.       :closable="false"
  24.       :visible="visible"
  25.       :get-container="false"
  26.       :wrap-style="{ position: 'absolute' }"
  27.       @close="onClose"
  28.     >
  29.       <p>Some contents...</p>
  30.     </a-drawer>
  31.   </div>
  32. </template>
  33. <script>
  34. export default {
  35.   data() {
  36.     return {
  37.       visible: false,
  38.     };
  39.   },
  40.   methods: {
  41.     afterVisibleChange(val) {
  42.       console.log('visible', val);
  43.     },
  44.     showDrawer() {
  45.       this.visible = true;
  46.     },
  47.     onClose() {
  48.       this.visible = false;
  49.     },
  50.   },
  51. };
  52. </script>

API

参数说明类型默认值版本
closable是否显示右上角的关闭按钮booleantrue
destroyOnClose关闭时销毁 Drawer 里的子元素booleanfalse
getContainer指定 Drawer 挂载的 HTML 节点HTMLElement | () => HTMLElement | Selectors‘body’
maskClosable点击蒙层是否允许关闭booleantrue
mask是否展示遮罩Booleantrue
maskStyle遮罩样式object{}
title标题string | slot-
visibleDrawer 是否可见boolean-
wrapClassName对话框外层容器的类名string-
wrapStyle可用于设置 Drawer 最外层容器的样式，和 drawerStyle 的区别是作用节点包括 maskobject-
drawerStyle用于设置 Drawer 弹出层的样式object-1.4.11
headerStyle用于设置 Drawer 头部的样式object-1.5.0
bodyStyle可用于设置 Drawer 内容部分的样式object-
width宽度string | number256
height高度, 在 placement 为 top 或 bottom 时使用string | number256
zIndex设置 Drawer 的 z-indexNumber1000
placement抽屉的方向‘top’ | ‘right’ | ‘bottom’ | ‘left’‘right’
handle设置后抽屉直接挂载到 DOM 上，你可以通过该 handle 控制抽屉打开关闭VNode | slot-
afterVisibleChange切换抽屉时动画结束后的回调function(visible)无1.5.0
keyboard是否支持键盘 esc 关闭booleantrue1.5.0

方法

名称描述类型默认值版本
close点击遮罩层或右上角叉或取消按钮的回调function(e)无