vue實作div多選全選功能_在vue中實作tab标簽切換頁面功能

頁面效果

需求分析

在導覽列上，預設打開一個頁面(清單頁面)，當點選清單項，打開一個詳情頁面，需添加到标簽導航中，同時顯示目前标簽的頁面内容，繼續點選清單項，添加标簽到導航中，依次類推，效果如上圖。

具體功能：

• 标簽可關閉；
• 标簽可切換，同時内容切換；
• 标簽大于可視範圍，需添加到頁籤清單中，可點選切換；
• 當點選頁籤清單中的标簽，需要在可視區中與最後一個标簽進行切換；
• 标簽的顯示個數自适應；

思考

在一些背景系統中，見過類似的功能，是利用 iframe标簽添加連結的方式，實作這個功能。那麼在vue中怎麼去實作？

首先，這是一個單頁面網站應用，使用了vue-router進行前端路由，那麼我們可以使用 vue-router 的命名視圖，這種方式去代替iframe。

vue-router命名視圖官方代碼：

複制代碼const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ]})複制代碼
           

項目目錄大同小異，就不過多解釋了~~

路由檔案-命名視圖

router代碼：

import Vue from "vue";import Router from "vue-router";import store from '../store';Vue.use(Router);// layout頁面const Layout = () => import(/* webpackChunkName: "layout" */ "@/views/layout/Layout.vue");// 産品相關頁面const Product = () => import(/* webpackChunkName: "product" */ "@/views/product/Index.vue");const ProductDetail = () => import(/* webpackChunkName: "productDetail" */ "@/views/product/Detail.vue");// 新聞相關頁面const News = () => import(/* webpackChunkName: "news" */ "@/views/news/Index.vue");const NewsDetail = () => import(/* webpackChunkName: "newsDetail" */ "@/views/news/Detail.vue");const rotuer = new Router({ mode: "history