当前位置：首页 > news >正文

【无标题】Drawer 抽屉

news 2026/5/12 18:55:20

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

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

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

<template><div><a-buttontype="primary"@click="showDrawer"><a-icontype="plus"/>New account</a-button><a-drawertitle="Create a new account":width="720":visible="visible":body-style="{ paddingBottom: '80px' }"@close="onClose"><a-form :form="form"layout="vertical"hide-required-mark><a-row :gutter="16"><a-col :span="12"><a-form-itemlabel="Name"><a-input v-decorator="[ 'name', { rules: [{ required: true, message: 'Please enter user name' }], }, ]"placeholder="Please enter user name"/></a-form-item></a-col><a-col :span="12"><a-form-itemlabel="Url"><a-input v-decorator="[ 'url', { rules: [{ required: true, message: 'please enter url' }], }, ]"style="width: 100%"addon-before="http://"addon-after=".com"placeholder="please enter url"/></a-form-item></a-col></a-row><a-row :gutter="16"><a-col :span="12"><a-form-itemlabel="Owner"><a-select v-decorator="[ 'owner', { rules: [{ required: true, message: 'Please select an owner' }], }, ]"placeholder="Please a-s an owner"><a-select-optionvalue="xiao">Xiaoxiao Fu</a-select-option><a-select-optionvalue="mao">Maomao Zhou</a-select-option></a-select></a-form-item></a-col><a-col :span="12"><a-form-itemlabel="Type"><a-select v-decorator="[ 'type', { rules: [{ required: true, message: 'Please choose the type' }], }, ]"placeholder="Please choose the type"><a-select-optionvalue="private">Private</a-select-option><a-select-optionvalue="public">Public</a-select-option></a-select></a-form-item></a-col></a-row><a-row :gutter="16"><a-col :span="12"><a-form-itemlabel="Approver"><a-select v-decorator="[ 'approver', { rules: [{ required: true, message: 'Please choose the approver' }], }, ]"placeholder="Please choose the approver"><a-select-optionvalue="jack">Jack Ma</a-select-option><a-select-optionvalue="tom">Tom Liu</a-select-option></a-select></a-form-item></a-col><a-col :span="12"><a-form-itemlabel="DateTime"><a-date-picker v-decorator="[ 'dateTime', { rules: [{ required: true, message: 'Please choose the dateTime' }], }, ]"style="width: 100%":get-popup-container="trigger => trigger.parentNode"/></a-form-item></a-col></a-row><a-row :gutter="16"><a-col :span="24"><a-form-itemlabel="Description"><a-textarea v-decorator="[ 'description', { rules: [{ required: true, message: 'Please enter url description' }], }, ]":rows="4"placeholder="please enter url description"/></a-form-item></a-col></a-row></a-form><div :style="{ position: 'absolute', right: 0, bottom: 0, width: '100%', borderTop: '1px solid #e9e9e9', padding: '10px 16px', background: '#fff', textAlign: 'right', zIndex: 1, }"><a-button :style="{ marginRight: '8px' }"@click="onClose">Cancel</a-button><a-buttontype="primary"@click="onClose">Submit</a-button></div></a-drawer></div></template><script>exportdefault{data(){return{form: this.$form.createForm(this), visible: false,};}, methods:{showDrawer(){this.visible=true;},onClose(){this.visible=false;},},};</script>