Drawer 抽屉

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

何时使用

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

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

代码演示

Drawer 抽屉 - 图1

基础抽屉

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

  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.       @close="onClose"
  11.       :visible="visible"
  12.     >
  13.       <p>Some contents...</p>
  14.       <p>Some contents...</p>
  15.       <p>Some contents...</p>
  16.     </a-drawer>
  17.   </div>
  18. </template>
  19. <script>
  20.   export default {
  21.     data() {
  22.       return {
  23.         visible: false,
  24.       };
  25.     },
  26.     methods: {
  27.       showDrawer() {
  28.         this.visible = true;
  29.       },
  30.       onClose() {
  31.         this.visible = false;
  32.       },
  33.     },
  34.   };
  35. </script>

Drawer 抽屉 - 图2

自定义位置

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

  1. <template>
  2.   <div>
  3.     <a-radio-group style="margin-right: 8px" :defaultValue="placement" @change="onChange">
  4.       <a-radio value="top">top</a-radio>
  5.       <a-radio value="right">right</a-radio>
  6.       <a-radio value="bottom">bottom</a-radio>
  7.       <a-radio value="left">left</a-radio>
  8.     </a-radio-group>
  9.     <a-button type="primary" @click="showDrawer">
  10.       Open
  11.     </a-button>
  12.     <a-drawer
  13.       title="Basic Drawer"
  14.       :placement="placement"
  15.       :closable="false"
  16.       @close="onClose"
  17.       :visible="visible"
  18.     >
  19.       <p>Some contents...</p>
  20.       <p>Some contents...</p>
  21.       <p>Some contents...</p>
  22.     </a-drawer>
  23.   </div>
  24. </template>
  25. <script>
  26.   export default {
  27.     data() {
  28.       return {
  29.         visible: false,
  30.         placement: 'left',
  31.       };
  32.     },
  33.     methods: {
  34.       showDrawer() {
  35.         this.visible = true;
  36.       },
  37.       onClose() {
  38.         this.visible = false;
  39.       },
  40.       onChange(e) {
  41.         this.placement = e.target.value;
  42.       },
  43.     },
  44.   };
  45. </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.       @close="onClose"
  8.       :visible="visible"
  9.       :wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}"
  10.     >
  11.       <a-form :form="form" layout="vertical" hideRequiredMark>
  12.         <a-row :gutter="16">
  13.           <a-col :span="12">
  14.             <a-form-item label="Name">
  15.               <a-input
  16.                 v-decorator="['name', {
  17.                   rules: [{ required: true, message: 'Please enter user name' }]
  18.                 }]"
  19.                 placeholder="Please enter user name"
  20.               />
  21.             </a-form-item>
  22.           </a-col>
  23.           <a-col :span="12">
  24.             <a-form-item label="Url">
  25.               <a-input
  26.                 v-decorator="['url', {
  27.                   rules: [{ required: true, message: 'please enter url' }]
  28.                 }]"
  29.                 style="width: 100%"
  30.                 addonBefore="http://"
  31.                 addonAfter=".com"
  32.                 placeholder="please enter url"
  33.               />
  34.             </a-form-item>
  35.           </a-col>
  36.         </a-row>
  37.         <a-row :gutter="16">
  38.           <a-col :span="12">
  39.             <a-form-item label="Owner">
  40.               <a-select
  41.                 v-decorator="['owner', {
  42.                   rules: [{ required: true, message: 'Please select an owner' }]
  43.                 }]"
  44.                 placeholder="Please a-s an owner"
  45.               >
  46.                 <a-select-option value="xiao">Xiaoxiao Fu</a-select-option>
  47.                 <a-select-option value="mao">Maomao Zhou</a-select-option>
  48.               </a-select>
  49.             </a-form-item>
  50.           </a-col>
  51.           <a-col :span="12">
  52.             <a-form-item label="Type">
  53.               <a-select
  54.                 v-decorator="['type', {
  55.                   rules: [{ required: true, message: 'Please choose the type' }]
  56.                 }]"
  57.                 placeholder="Please choose the type"
  58.               >
  59.                 <a-select-option value="private">Private</a-select-option>
  60.                 <a-select-option value="public">Public</a-select-option>
  61.               </a-select>
  62.             </a-form-item>
  63.           </a-col>
  64.         </a-row>
  65.         <a-row :gutter="16">
  66.           <a-col :span="12">
  67.             <a-form-item label="Approver">
  68.               <a-select
  69.                 v-decorator="['approver', {
  70.                   rules: [{ required: true, message: 'Please choose the approver' }]
  71.                 }]"
  72.                 placeholder="Please choose the approver"
  73.               >
  74.                 <a-select-option value="jack">Jack Ma</a-select-option>
  75.                 <a-select-option value="tom">Tom Liu</a-select-option>
  76.               </a-select>
  77.             </a-form-item>
  78.           </a-col>
  79.           <a-col :span="12">
  80.             <a-form-item label="DateTime">
  81.               <a-date-picker
  82.                 v-decorator="['dateTime', {
  83.                   rules: [{ required: true, message: 'Please choose the dateTime' }]
  84.                 }]"
  85.                 style="width: 100%"
  86.                 :getPopupContainer="trigger => trigger.parentNode"
  87.               />
  88.             </a-form-item>
  89.           </a-col>
  90.         </a-row>
  91.         <a-row :gutter="16">
  92.           <a-col :span="24">
  93.             <a-form-item label="Description">
  94.               <a-textarea
  95.                 v-decorator="['description', {
  96.                   rules: [{ required: true, message: 'Please enter url description' }]
  97.                 }]"
  98.                 :rows="4"
  99.                 placeholder="please enter url description"
  100.               />
  101.             </a-form-item>
  102.           </a-col>
  103.         </a-row>
  104.       </a-form>
  105.       <div
  106.         :style="{
  107.           position: 'absolute',
  108.           left: 0,
  109.           bottom: 0,
  110.           width: '100%',
  111.           borderTop: '1px solid #e9e9e9',
  112.           padding: '10px 16px',
  113.           background: '#fff',
  114.           textAlign: 'right',
  115.         }"
  116.       >
  117.         <a-button :style="{marginRight: '8px'}" @click="onClose">
  118.           Cancel
  119.         </a-button>
  120.         <a-button @click="onClose" type="primary">Submit</a-button>
  121.       </div>
  122.     </a-drawer>
  123.   </div>
  124. </template>
  125. <script>
  126.   export default {
  127.     data() {
  128.       return {
  129.         form: this.$form.createForm(this),
  130.         visible: false,
  131.       };
  132.     },
  133.     methods: {
  134.       showDrawer() {
  135.         this.visible = true;
  136.       },
  137.       onClose() {
  138.         this.visible = false;
  139.       },
  140.     },
  141.   };
  142. </script>

Drawer 抽屉 - 图4

信息预览抽屉

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

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

Drawer 抽屉 - 图5

多层抽屉

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

<template>
  <div>
    <a-button type="primary" @click="showDrawer">
      Open
    </a-button>
    <a-drawer
      title="Multi-level drawer"
      width="520"
      :closable="false"
      @close="onClose"
      :visible="visible"
    >
      <a-button type="primary" @click="showChildrenDrawer">
        Two-level drawer
      </a-button>
      <a-drawer
        title="Two-level Drawer"
        width="320"
        :closable="false"
        @close="onChildrenDrawerClose"
        :visible="childrenDrawer"
      >
        <a-button type="primary" @click="showChildrenDrawer">
          This is two-level drawer
        </a-button>
      </a-drawer>
      <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',
        }"
      >
        <a-button style="marginRight: 8px" @click="onClose">
          Cancel
        </a-button>
        <a-button @click="onClose" type="primary">
          Submit
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
        childrenDrawer: false,
      };
    },
    methods: {
      showDrawer() {
        this.visible = true;
      },
      onClose() {
        this.visible = false;
      },
      showChildrenDrawer() {
        this.childrenDrawer = true;
      },
      onChildrenDrawerClose() {
        this.childrenDrawer = false;
      },
    },
  };
</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对话框外层容器的styleobject-
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-

方法

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