1. Original code:
<template>
<div>
<div class="myDraw" style="height: 80vh;">
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">点我打开</el-button>
<el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" :with-header="false" :modal="false">
<span>我来啦!</span>
</el-drawer>
</div>
</div>
</template>
Effect: The drawer appears from the far left of the screen, covering the directory, and should appear from the right of the directory
. 2. Solution: Add css style
.myDraw {
position: relative;
::v-deep .el-drawer__wrapper {
position: absolute;
}
}
The drawer can pop up from the right side of the directory.
3. The principle
The default position of el-drawer__wrapper is fixed positioning, that is, relative to the browser window. At this time, its positioning should be modified to make it relative to the parent element. So first position the parent element, and then use absolute, the drawer positioning is relative to the parent element.