el-drawer抽屉打开遮住目录

1、原代码：

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

效果：抽屉从屏幕最左侧出现，遮住了目录，应该从目录右边出现

2、解决办法：添加css样式

.myDraw {position: relative;::v-deep .el-drawer__wrapper {position: absolute;}}

抽屉就可以从目录右边弹出了

3、原理
el-drawer__wrapper默认的position是fixed定位，即相对于浏览器窗口，此时要修改它的定位，让其相对于该父元素。所以先对父元素定位，然后再用absolute，抽屉定位就相对于父元素了。

el-drawer抽屉打开遮住目录相关推荐

elementUI Drawer 抽屉打开时表单自动聚焦问题解决
问题:打开drawer弹窗后时间选择器自动聚焦. 解决:在时间选择器上添加disabled属性,打开drawer抽屉时先让选择器禁用disabled = true, 在页面渲染完成后再打开选择器的禁止 ...
vue抽屉_VUE组件中的 Drawer 抽屉实现代码
因为项目中用的是 element-ui 框架,而这个框架并没有抽屉组件,所以自己实现一个,具体代码如下: drawer.vue {{ title }} x export default { props ...
引用element-ui的Drawer抽屉组件报错问题
引用element-ui的Drawer抽屉组件报错问题 **前提:**vue项目采取按需引入的方式引入element,并且使用其他组件都正常,没有发生异常问题表现: 在vue项目中引用了Drawer ...
Python调Windows的资源管理器打开指定目录
2019独角兽企业重金招聘Python工程师标准>>> 使用Python在Windows自定义命令时候遇到一个问题,调用Windows文件选择器打开指定文件目录. 这里介绍两种方式: ...
网页打开共享目录_“馆员说事儿”之三大中文数据库期刊封面、目录、封底下载方法步骤（三）中国知网...
三大中文数据库期刊封面.目录.封底下载方法步骤 -中国知网三.中国知网中国知网提供了各期刊封面.目录.封底的浏览及打印. 中国知网(CNKI)提供的封面.目录和封底信息,最早可到2008年,同样也 ...
python报表自动化系列 - 在Windows中打开指定目录
python在Windows系统中打开指定目录(文件夹) 李俊才邮箱:291148484@163.com [函数说明] 该函数可以在windows系统中打开指定的文件夹,参数path应为字符串形式表 ...
SpringBoot打开resources目录下的文件操作
SpringBoot打开resources目录下的文件操作背景我想在SpringBoot项目中放入一个静态文件.json文件.然后在SpringBoot项目内可以打开并读取此json文件. [外链 ...
红米手机root之后 eclipse无法打开data目录
提前声明,日志是直接复制别人的, 方便日后查看, 如果原创看到请见谅 , 谢谢之前将手机root了 , 直到今天需要用eclipse打开data目录查看东西, 发现一直打不开 , 网上查阅资料发现需 ...
Mac用命令行在访达中打开指定目录
1. 在命令中打开指定目录 open /Users/用户名/git 2. 在命令中打开当前目录 open `pwd`

el-drawer抽屉打开遮住目录

el-drawer抽屉打开遮住目录相关推荐

最新文章

热门文章