vue实现弹出框内嵌页面展示并添加tab切换展示实时加载
作者：菜菜菜菜菜菜菜籽
弹窗效果是在Web开发中经常用到的一种交互效果,这篇文章主要给大家介绍了关于vue实现弹出框内嵌页面展示并添加tab切换展示实时加载的相关资料,需要的朋友可以参考下
最近做业务的时候，发现产品的原型图上有一个弹出框，上面包含了两个窗口要进行切换。
每个窗口都有分页列表展示、搜索、添加和删除，感觉就是两个完整的页面，如果全写在一个页面会很麻烦，还可能会出现一系列的问题，后期改起来比较麻烦，所以我就准备分开来写这个窗口，先写两个页面，最后看能不能嵌入到弹出框里。
这里插入一下vue的页面跳转方法，点击按钮直接跳转到另一个页面，这样可以先调整单个页面的样式和功能。
<el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
<span>{{ scope.row.dictType }}</span>
</router-link>
</template>
</el-table-column>
参数获取：
created() {
const dictId = this.$route.params && this.$route.params.dictId;
this.getType(dictId);
this.getTypeList();
},
而且这块跳转的页面也是需要配置路由的，要不然页面就会404：
{
path: '/system/dict-data',
component: Layout,
hidden: true,
permissions: ['system:dict:list'],
children: [
{
path: 'index/:dictId(\\d+)',
component: () => import('@/views/system/dict/data'),
name: 'Data',
meta: { title: '字典数据', activeMenu: '/system/dict' }
}
]
},
当两个页面的功能都实现好了之后，开始在主页面添加弹出框，实现内嵌页面。
- 属性变量props: [‘agentId’]，该参数用于父子组件传值
- 组件创建即created的时候，赋值请求后台加载数据
在父页面中引入子页面：
添加弹出框，内嵌子页面
<el-dialog :title="filterTitle" :visible.sync="filterDialogVisible" v-if="filterDialogVisible" width="1100px"
append-to-body>
<el-tabs v-model="filterTabValue" type="border-card" :lazy="true" @tab-click="filterTabClick">
<el-tab-pane label="内容1" name="hotel">
<!-- 酒店过滤页面 -->
<HotelFilter :agentId="agentId" v-if="isHotel"></HotelFilter>
</el-tab-pane>
<el-tab-pane label="内容2" name="keyword">
<Keyword :agentId="agentId" v-if="isKeyword"></Keyword>
</el-tab-pane>
</el-tabs>
</el-dialog>
父页面通过弹框并将子页面通过引入组件的方式包裹在弹框内，通过:visible.sync=“filterDialogVisible” v-if="filterDialogVisible"进行弹框的展示以及组件的创建和销毁，并且通过父子组件传参的方式切换数据。注意这里需要使用v-if以便子组件可以在create()中动态展示数据。
同理，tabs切换也是通过v-if来控制动态渲染页面。
//设置页面
filterRuleAdd(row) {
this.agentId = row.agentId;
this.filterDialogVisible = true;
this.filterTitle = "渠道名称：" + row.agentName;
this.filterTabValue = "hotel";
this.isHotel = true;
},
//禁用配置切换
filterTabClick() {
if (this.filterTabValue == "hotel") {
this.isHotel = true;
this.isKeyword = false;
} else if (this.filterTabValue == "keyword") {
this.isKeyword = true;
this.isHotel = false;
}
},
参考文档：https://www.jb51.net/article/267510.htm
总结
到此这篇关于vue实现弹出框内嵌页面展示并添加tab切换展示实时加载的文章就介绍到这了,更多相关vue弹出框添加tab切换实时加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！