vue使用elementui的drawer组件作为子组件，出现的闪现问题

BensonLam

已于 2023-03-03 08:30:29 修改

阅读量1.7k

点赞数 2

分类专栏： vue 文章标签： vue.js elementui Powered by 金山文档

于 2023-03-01 17:28:05 首次发布

本文链接：https://blog.csdn.net/mr_2612757/article/details/129286028

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在父组件中点击，打开子组件的drawer,使用v-if打开会出现闪现，子组件初始化时候打开drawer需要加上$nextTick可以解决

父组件

 <WarnFormDrawer v-if="drawerVisible"></WarnFormDrawer>

子组件

<el-drawer :visible.sync="visible"></<el-drawer>

created() {
    this.$nextTick(() => {
        this.visible = true
    })
},

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

BensonLam

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue使用elementui的drawer组件作为子组件，出现的闪现问题

在父组件中点击，打开子组件的drawer,使用v-if打开会出现闪现，子组件初始化时候打开drawer需要加上。$nextTick可以解决。
复制链接

扫一扫

专栏目录

VUE组件中的 Drawer 抽屉实现代码

10-16

主要介绍了VUE组件之 Drawer 抽屉，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

VUE组件之 Drawer 抽屉

YUSIR 完美CODING世界

11-08

6604

一、源码地址 https://github.com/imxiaoer/DrawerForVue 二、效果图三、具体代码 drawer.vue <template> <div class="drawer"> <div :class="maskClass" @click="closeByMask"></div&gt...

1 条评论您还未登录，请先登录后发表或查看评论

Vue3抽屉（Drawer）

热门推荐

浩星

10-07

1万+

前言： iview+抽屉效果，通过class来控制内容需要展示的内容效果展示图：第一：封装的组件cdrawer.vue <template> <Drawer v-model="drawerVal" :class-name='className' :mask='mask' :...

elment ui drawer 页面抖动问题

m0_74829310的博客

11-16

507

drawer打开之前页面会抖动一下甚至右边会有留白是因为滚动条所致我们只需要添加一行代码即可。如上所示在属性里多加一个 :lockScroll="false"即可。

vue中使用elementUI组件手动上传图片功能

10-15

Vue是一套构建用户界面的框架，开发只需要关注视图层，它不仅易于上手，还便于与第三方库或既有项目的整合。这篇文章主要介绍了vue中使用elementUI组件手动上传图片,需要的朋友可以参考下

SortSelect vue + elementui自定义按首字母排序下拉列表组件

10-27

在Vue.js框架中，开发一个自定义的按首字母排序的下拉列表组件...对于初学者来说，理解这个组件的工作原理有助于深入学习Vue和ElementUI的使用，而对于有经验的开发者，它可以作为一个基础模板，用于构建更高级的组件。

基于Vue+ElementUI的省市区地址选择通用组件

10-15

【Vue+ElementUI省市区地址选择通用组件详解】在Web应用开发中，省市区地址选择是一个常见的功能，尤其是在电子商务、物流配送等领域。本篇将深入探讨如何利用Vue.js框架结合ElementUI组件库，构建一个可复用的...

利用vue+elementUI实现部分引入组件的方法详解

08-28

以下是如何利用vue+elementUI实现部分引入组件的详细步骤。首先，确保你已经安装了vue-cli，这是一个用于快速搭建Vue项目的命令行工具。如果没有，可以通过`npm install -g vue-cli`全局安装。接着，创建一个新的...

VUE3（三十）自定义抽屉组件Drawer

camellia的博客

04-26

3901

我这里计划做一个即时聊天的小功能，计划是在一个抽屉组件中实现这个功能。但是最后能不能成功我也不知道，毕竟我没做过，但是抽屉组件可以提前做一个嘛，这个不是很难。代码： Drawer.vue： <template> <div class="drawer">  <div class="mask-show" v-if="drawerShow" @click="close()" ></div> <

vue中子组件加载完成闪烁问题

weixin_55666792的博客

05-06

686

vue子组件闪烁

vue element-ui 封装drawer 抽屉组件

pengboran的博客

10-23

5248

子组件 <template> <div class="com"> <el-drawer title="我是标题" :visible.sync="drawer_" :direction="direction"> <span>我来啦! {{task.name}}</span> </el-drawer> </div> </template> &l

element Drawer 中嵌套路由，页面刷新导致路由跳转错乱问题

samll_redhat的博客

11-09

846

问题背景：我的项目是类似后台管理项目，本身已经有二级路由了，但是产品提出需求，要在某个菜单页中增加一个弹框，以侧滑屏形式出现，并且弹框中也要有路由的切换，于是我选择了用element来实现这个需求问题：我在父组件的drawer中又增加了一层路由在父组件中有个按钮，点击按钮，显示drawer并且跳到指定的路由问题出现，本应该跳转到‘editCourse’组件，但是页面却没有跳转！而是去了我默认打开drawer的路由地址查出问题：是因为drawer这个组件本身带有一个动画，在打开...

vue el-drawer 想要在指定div打开，并且设置自定义的蒙层效果。而且支持嵌套drawer进行设置。

qq_36571836的博客

05-18

3967

2. 然后还要给 el-drawer设置样式 position:absolute;首先设置两个属性也就是隐藏el-drawer自带的蒙层。:modal-append-to-body=“false” // 遮罩层不能插入至 body。:wrapperClosable= “false”, // 点击遮罩层不可关闭drawer。需要 append-to-body： false, 因为设置为true会插入body。:modal=“false” // 不需要遮罩层。在el-drawer出现的实现出现该蒙层。

使用Vue3写一个抽屉Drawer组件

留白声的博客

03-12

946

使用vue3编写抽屉组件，抽屉动画流畅

VUE中碰到的一些问题

m0_67873602的博客

07-14

425

let { href} = this.$router.resolve({ name:'largeScreenMap', query:{ id:row.id } }) window.open(href,'_blank')使用v-if控制首先，把关闭抽屉销毁元素打开：然后，控制开关不能用父组件传过来的值，在created或者mounted中，使用$nextTick给data中的isshow赋值，页面就不会发生抖动了：

Element组件的坑: 抽屉drawer和弹窗dialog

一只卑微的菜狗的博客

10-23

5562

针对Element框架的el-drawer添加了子组件不能渲染子组件问题（el-dialog同样适用），包括el-drawer抽屉组件显示隐藏问题以及在指定容器打开抽屉组件

element表单组件使用v-if控制item显隐时，表单校验不生效的问题

weixin_51409195的博客

11-08

1276

range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"/>此处修改了v-if的条件之后，由显示变隐藏再使其显示，就出现了错误。输入了值以后还是一直提示未输入，尝试修改代码将v-if改成v-show之后突然发现可以了。aaa: [{ required: true, message: "请输入名称", trigger: "blur", }, ],

vue使用elementui树形组件

06-28

Vue可以使用ElementUI的树形组件来展示树形结构的数据。使用步骤如下： 1. 安装ElementUI组件库可以通过npm或yarn安装ElementUI组件库，具体命令如下： ``` npm install element-ui --save ``` 或 ``` yarn ...