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可以解决。
复制链接

扫一扫

专栏目录

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

10-27

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

一个简单的基于Vuejs的DrawerLayout布局组件

08-08

一个简单的基于 Vue.js 的 DrawerLayout（类似 Android 的 DrawerLayout）布局组件

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

如何解决el-drawer抽屉组件打开时的抖动现象

XiongFine的博客

04-03

3078

el-drawer 打开时有抖动现象解决办法

vue element-ui 封装drawer 抽屉组件

pengboran的博客

10-23

5235

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

vue+el-drawer 常见问题

最新发布

weina1996的博客

05-18

366

1.问题背景在drawer里套了一个表格，表格绑定了dataList，当修改dataList的值时，表格数据不会刷新，只有关闭drawer且重新打开才能刷新。解决在修改dataList值时，先让其赋空表，再赋值原来代码 this.questionFullList=resp.data.data 修改后` this.questionFullList=[] this.questionFullList=resp.data.data 原文链接：https://blog.csdn.net/weixin_

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

qq_36571836的博客

05-18

3822

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出现的实现出现该蒙层。

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

weixin_55666792的博客

05-06

677

vue子组件闪烁

VUE中碰到的一些问题

m0_67873602的博客

07-14

413

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

5496

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

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

10-15

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

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

10-15

主要介绍了基于Vue+ElementUI的省市区地址选择通用组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue elementui 实现搜索栏公共组件封装的实例代码

10-15

主要介绍了vue elementui 搜索栏公共组件封装,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

vue-drawer_drawer_vue展示_vue_

09-30

vue抽屉组件，支持多方向展示，只需引入即可

vue-drawer-layout：Vue.js的简单DrawerLayout组件

02-06

Vue抽屉布局对于一个简单的DrawerLayout部件演示版单击左上角的头像或触摸（单击）并拖动到右（左）。如果图像没有动画，也许您的浏览器不支持APNG ，则可以转到。依存关系（2.x）浏览器支持支持现代（移动）浏览器和Internet Explorer 10+（由于CSS过渡支持）和X5核心。安装 npm install vue-drawer-layout --save 用法以下示例也可以与CommonJS一起使用，方法是将ES6特定的语法替换为CommonJS等效项。 import Vue from 'vue' import DrawerLayout fr

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

08-28

主要给大家介绍了关于利用vue+elementUI实现部分引入组件的相关资料，以及介绍了vue引入elementUI报错的解决方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。

vue中使用el-upload组件修改上传的图片时，每次都会自动闪过上一次的图片

爱学习的大雄的博客

02-16

2660

在解决问题后要及时记录，才能让自己在以后遇到同样问题的时候更快解决。

Vue3中Element-plus不生效问题解决

kk爱闹

02-15

4114

解决Vue3中element-plus不生效问题

关于Vue3中，element-plus的el-dialog对话框无法显示的可能原因。

ky51336的博客

05-07

7150

关于Vue3中，element-plus的el-dialog对话框无法显示的可能原因。

Vue总结第二天~自定义子组件、父子组件通信、插槽

伟庭的博客

12-31

1131

Vue总结第二天~组件之间的通信与data数据的访问

vue使用elementui树形组件

06-28

### 回答1： Vue可以使用ElementUI的树形组件来展示树形结构的数据。使用步骤如下： 1. 安装ElementUI组件库可以通过npm或yarn安装ElementUI组件库，具体命令如下： ``` npm install element-ui --save ``` 或 ``` yarn add element-ui ``` 2. 引入ElementUI组件在Vue项目的入口文件中，引入ElementUI组件库和样式文件，具体代码如下： ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 使用树形组件在Vue组件中，使用ElementUI的el-tree组件来展示树形结构的数据，具体代码如下： ```html <template> <el-tree :data="treeData" :props="treeProps"></el-tree> </template> <script> export default { data() { return { treeData: [ { label: '一级 1', children: [ { label: '二级 1-1', children: [ { label: '三级 1-1-1' }, { label: '三级 1-1-2' } ] }, { label: '二级 1-2', children: [ { label: '三级 1-2-1' }, { label: '三级 1-2-2' } ] } ] }, { label: '一级 2', children: [ { label: '二级 2-1', children: [ { label: '三级 2-1-1' }, { label: '三级 2-1-2' } ] }, { label: '二级 2-2', children: [ { label: '三级 2-2-1' }, { label: '三级 2-2-2' } ] } ] } ], treeProps: { label: 'label', children: 'children' } } } } </script> ``` 其中，treeData是树形数据，treeProps是树形组件的配置项，用于指定树形数据中的label和children字段。以上就是使用ElementUI树形组件的基本步骤。 ### 回答2： Vue是一种流行的JavaScript框架，用于构建用户界面。ElementUI是一个基于Vue的UI组件库，其中包含许多常见的UI组件，包括树形组件。ElementUI的树形组件使开发人员能够轻松创建树形结构的界面元素，并可以满足各种需求。要使用ElementUI的树形组件，首先需要在Vue应用程序中安装ElementUI。有多种方法可以安装ElementUI，其中包括使用npm、CDN或下载源代码。在安装完成后，开发人员可以在需要使用树形组件的地方包含ElementUI中的<el-tree>标记。使用ElementUI的树形组件非常灵活。开发人员可以通过简单的属性更改来自定义树形组件的行为和外观。例如，可以使用“expand-on-click-node”属性来控制树形节点是否可以通过单击展开/关闭。开发人员还可以使用“:data”属性来传递树形节点的数据。此外，ElementUI还提供了许多事件和插槽，以便更好地控制树形组件的行为。在许多应用程序中，树形结构是重要的用户界面元素。使用ElementUI的树形组件可以使开发人员更轻松地创建和管理树形结构，并可以提高应用程序的可维护性和性能。无论是开发单页面应用程序还是多页面应用程序，使用ElementUI的树形组件都是一个不错的选择。 ### 回答3： Vue 使用 ElementUI 树形组件非常方便。ElementUI 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件，其中包括了树形组件。以下是关于 Vue 使用 ElementUI 树形组件的一些注意事项和步骤：安装 ElementUI：在使用 ElementUI 之前，需要先安装它。在命令行中执行以下命令即可： ``` npm install element-ui --save ``` 使用 ElementUI 树形组件：在 Vue 项目中使用 ElementUI 树形组件，需要先引入 ElementUI 和相应的组件。在 main.js 中添加如下内容： ``` import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 接下来就可以在需要使用树形组件的地方添加以下代码： ``` <template> <el-tree :data="data" :props="defaultProps"> </el-tree> </template> <script> export default { data() { return { data: [{ label: '一级 1', children: [{ label: '二级 1-1', children: [{ label: '三级 1-1-1' }] }] }, { label: '一级 2', children: [{ label: '二级 2-1', children: [{ label: '三级 2-1-1' }] }, { label: '二级 2-2', children: [{ label: '三级 2-2-1' }] }] }, { label: '一级 3', children: [{ label: '二级 3-1', children: [{ label: '三级 3-1-1' }] }, { label: '二级 3-2', children: [{ label: '三级 3-2-1' }] }] }], defaultProps: { children: 'children', label: 'label' } } } } </script> ``` 在这个例子中，我们使用了一个简单的树形结构。需要注意的是，在 data 中定义了树的结构，而在 defaultProps 中，则定义了树的属性。以上就是 Vue 使用 ElementUI 树形组件的简单介绍。使用 ElementUI 提供的树形组件，可以更加轻松地实现树形结构的展示，并且具有良好的用户交互体验。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交