快捷導(dǎo)航

vue實(shí)現(xiàn)彈出框內(nèi)嵌頁面展示并添加tab切換展示實(shí)時(shí)加載

更新時(shí)間：2024年01月03日 11:42:46 作者：菜菜菜菜菜菜菜籽

彈窗效果是在Web開發(fā)中經(jīng)常用到的一種交互效果,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)彈出框內(nèi)嵌頁面展示并添加tab切換展示實(shí)時(shí)加載的相關(guān)資料,需要的朋友可以參考下

最近做業(yè)務(wù)的時(shí)候，發(fā)現(xiàn)產(chǎn)品的原型圖上有一個(gè)彈出框，上面包含了兩個(gè)窗口要進(jìn)行切換。

每個(gè)窗口都有分頁列表展示、搜索、添加和刪除，感覺就是兩個(gè)完整的頁面，如果全寫在一個(gè)頁面會(huì)很麻煩，還可能會(huì)出現(xiàn)一系列的問題，后期改起來比較麻煩，所以我就準(zhǔn)備分開來寫這個(gè)窗口，先寫兩個(gè)頁面，最后看能不能嵌入到彈出框里。
這里插入一下vue的頁面跳轉(zhuǎn)方法，點(diǎn)擊按鈕直接跳轉(zhuǎn)到另一個(gè)頁面，這樣可以先調(diào)整單個(gè)頁面的樣式和功能。

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

參數(shù)獲取：

created() {
    const dictId = this.$route.params && this.$route.params.dictId;
    this.getType(dictId);
    this.getTypeList();
  },

而且這塊跳轉(zhuǎn)的頁面也是需要配置路由的，要不然頁面就會(huì)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: '字典數(shù)據(jù)', activeMenu: '/system/dict' }
      }
    ]
  },

當(dāng)兩個(gè)頁面的功能都實(shí)現(xiàn)好了之后，開始在主頁面添加彈出框，實(shí)現(xiàn)內(nèi)嵌頁面。

屬性變量props: [‘agentId’]，該參數(shù)用于父子組件傳值
組件創(chuàng)建即created的時(shí)候，賦值請求后臺(tái)加載數(shù)據(jù)

在父頁面中引入子頁面：

添加彈出框，內(nèi)嵌子頁面

<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="內(nèi)容1" name="hotel">
      <!--  酒店過濾頁面    -->
      <HotelFilter :agentId="agentId" v-if="isHotel"></HotelFilter>
    </el-tab-pane>
    <el-tab-pane label="內(nèi)容2" name="keyword">
      <Keyword :agentId="agentId" v-if="isKeyword"></Keyword>
    </el-tab-pane>
  </el-tabs>
</el-dialog>

父頁面通過彈框并將子頁面通過引入組件的方式包裹在彈框內(nèi)，通過:visible.sync=“filterDialogVisible” v-if="filterDialogVisible"進(jìn)行彈框的展示以及組件的創(chuàng)建和銷毀，并且通過父子組件傳參的方式切換數(shù)據(jù)。注意這里需要使用v-if以便子組件可以在create()中動(dòng)態(tài)展示數(shù)據(jù)。
同理，tabs切換也是通過v-if來控制動(dòng)態(tài)渲染頁面。

//設(shè)置頁面
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;
  }
},

參考文檔：http://www.dbjr.com.cn/article/267510.htm

總結(jié)

到此這篇關(guān)于vue實(shí)現(xiàn)彈出框內(nèi)嵌頁面展示并添加tab切換展示實(shí)時(shí)加載的文章就介紹到這了,更多相關(guān)vue彈出框添加tab切換實(shí)時(shí)加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: