在后台管理系统中抽屉Drawer通常从屏幕边缘滑出覆盖部分页面。但在某些布局中我们希望抽屉仅在某个特定区域如卡片、面板、表格容器内打开避免遮挡导航、侧边栏或其他关键信息。vxe-drawer 组件提供了 transfer、append-to 和 is-within-append-to 三个配置项组合使用即可将抽屉精准挂载到任意指定的 DOM 元素内。同时配合 vxe-grid 的 height: ‘100%’可实现表格自适应抽屉的宽高达到内容与容器完美融合的效果。属性说明属性类型默认值说明transferbooleanfalse是否将抽屉渲染到 body 下脱离父级样式影响。若需挂载到指定元素必须设置为 true。append-tostring / HTMLElement—指定挂载的目标容器CSS 选择器或 DOM 元素。抽屉将被渲染到该容器内部。is-within-append-tobooleanfalse是否将抽屉的定位限制在 append-to 指定的容器内部即抽屉的 position: absolute 相对于该容器。transfer: true 是开启挂载的基础。append-to 指向目标容器。is-within-append-to 控制定位坐标系若为 true抽屉的偏移量相对于容器若为 false则相对于视口。使用前提append-to 指定的目标容器必须在组件渲染之前已存在于 DOM 中。因此容器不能使用 v-if建议用 v-show 或始终存在并且通常需要设置 position: relative或 absolute/fixed作为定位参考。代码templatedivvxe-radio-groupv-modelpositionvxe-radio-buttonchecked-valuetopcontent上/vxe-radio-buttonvxe-radio-buttonchecked-valuebottomcontent下/vxe-radio-buttonvxe-radio-buttonchecked-valueleftcontent左/vxe-radio-buttonvxe-radio-buttonchecked-valuerightcontent右/vxe-radio-button/vxe-radio-groupdivvxe-buttonstatusprimarycontent点击弹出clickshowPopup true/vxe-button/divvxe-drawerv-modelshowPopuptransferis-within-append-tomask-closableresizewidth400height300append-to.my-drawer-within-demo2-wrapper:positionpositiontemplate#defaultvxe-gridv-bindgridOptions/vxe-grid/template/vxe-drawer/div/templatescriptsetupimport{ref,reactive}fromvueconstshowPopupref(false)constpositionref(right)constgridOptionsreactive({showFooter:true,border:true,height:100%,columns:[{field:seq,type:seq,width:70},{field:name,title:Name},{field:sex,title:Sex},{field:address,title:Address}],data:[{id:10001,name:Test1,role:Develop,sex:Man,age:28,address:test abc},{id:10002,name:Test2,role:Test,sex:Women,age:22,address:shenzhen},{id:10003,name:Test3,role:PM,sex:Man,age:32,address:Shanghai},{id:10004,name:Test4,role:Develop,sex:Women,age:24,address:Shanghai},{id:10005,name:Test5,role:Develop,sex:Man,age:39,address:shenzhen},{id:10006,name:Test6,role:Designer,sex:Man,age:42,address:shenzhen},{id:10007,name:Test7,role:PM,sex:Man,age:48,address:Shanghai},{id:10008,name:Test8,role:Test,sex:Women,age:38,address:test abc},{id:10009,name:Test9,role:Develop,sex:Man,age:52,address:test abc},{id:100010,name:Test10,role:Develop,sex:Women,age:47,address:shenzhen},{id:100011,name:Test11,role:PM,sex:Man,age:33,address:Shanghai},{id:100012,name:Test12,role:Test,sex:Women,age:35,address:shenzhen}],footerData:[{seq:合计,name:777,sex:333,age:111}]})/script打开抽屉后抽屉从指定方向滑出但被限制在虚线框容器内不会覆盖页面其他区域。内部表格自动填满抽屉内容区宽高随抽屉尺寸变化。关键配置表格自适应在抽屉中嵌入 vxe-grid 时设置 height: ‘100%’ 可以让表格自动填满父容器高度前提是抽屉的 height 已指定。 宽度默认即填满抽屉宽度无需额外设置。方向与尺寸当 position 为 left 或 right 时抽屉宽度由 width 控制高度自动填满容器受 is-within-append-to 限制。当 position 为 top 或 bottom 时抽屉高度由 height 控制宽度自动填满容器。vxe-drawer 通过 transfer append-to is-within-append-to 的组合提供了灵活的区域挂载能力使抽屉可以精准地出现在指定容器内。配合 vxe-grid 的 height: ‘100%’可以轻松实现表格自适应容器大小。https://vxeui.com