• Drawer 抽屉
    • 何时使用
    • 代码演示
      • 基础抽屉
      • 自定义位置
      • 抽屉表单
      • 信息预览抽屉
      • 多层抽屉
  • API
  • 方法

    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)无