Bagaimana untuk melaksanakan komponen tab dan halaman berbilang tab dalam Vue?

Dengan pengemaskinian berterusan teknologi bahagian hadapan, Vue, sebagai rangka kerja bahagian hadapan yang popular, telah menjadi pilihan pertama banyak pembangun. Dalam projek sebenar, selalunya perlu menggunakan komponen tab dan halaman berbilang tab untuk menukar dan mengurus modul berfungsi yang berbeza. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue untuk melaksanakan komponen tab mudah dan halaman berbilang tab.

1. Laksanakan komponen tab mudah

1. Buat komponen Tab.vue

Buat komponen Tab.vue dalam projek untuk memaparkan senarai tab dan kandungan halaman tab yang dipilih pada masa ini.

<template>
  <div>
    <div class="tab-header">
      <div class="tab-item" 
           v-for="(tab, index) in tabs" 
           :key="index"
           :class="{ active: index === currentIndex }" 
           @click="handleTab(index)">
        {{ tab.title }}
      </div>
    </div>
    <div class="tab-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tab',
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    currentIndex: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    handleTab(index) {
      this.$emit('tabchange', index);
    },
  },
};
</script>

Dalam komponen ini, kami menjadikan tajuk setiap tab menjadi item tab dengan menggunakan arahan v-for untuk beralih melalui tatasusunan tab masuk. Indeks semasa halaman tab yang dipilih akan menambah kelas aktif pada item tab untuk menyerlahkan halaman tab yang dipilih pada masa ini. Komponen tab mempunyai slot slotnya sendiri, yang digunakan untuk memaparkan kandungan halaman tab.

2. Gunakan komponen Tab dalam komponen induk

Pada halaman yang perlu menggunakan komponen tab, import komponen Tab dan gunakannya dalam templat dan lulus halaman tab yang perlu dipaparkan ke dalam komponen Tab sebagai ahli tatasusunan tab , dan tentukan indeks halaman tab yang sedang dipilih melalui atribut currentIndex. Selain itu, dengar peristiwa pertukaran tab dalam komponen Tab untuk menukar nilai currentIndex dalam komponen induk untuk mengawal halaman tab yang dipilih pada masa ini.

<template>
  <div>
    <Tab :tabs="tabs" :currentIndex="currentIndex" @tabchange="handleChange">
      <div v-for="(tab, index) in tabs" :key="index">
        {{ tab.content }}
      </div>
    </Tab>
  </div>
</template>

<script>
import Tab from './Tab.vue';

export default {
  name: 'App',
  components: {
    Tab,
  },
  data() {
    return {
      currentIndex: 0,
      tabs: [
        {
          title: 'tab1',
          content: '这是第一个 tab 页的内容',
        },
        {
          title: 'tab2',
          content: '这是第二个 tab 页的内容',
        },
      ],
    };
  },
  methods: {
    handleChange(index) {
      this.currentIndex = index;
    },
  },
};
</script>

Dalam komponen induk ini, kita perlu mengimport komponen Tab dahulu, dan kemudian mencipta tatasusunan tab untuk menyimpan tajuk dan kandungan setiap halaman tab. Dua sifat, tab dan currentIndex, perlu dihantar dalam templat untuk memulakan komponen Tab masing-masing. Dalam kaedah handleChange, kami mendengar peristiwa pertukaran tab, supaya nilai currentIndex boleh dikemas kini dalam komponen induk untuk memilih halaman tab yang berbeza.

2. Laksanakan komponen berbilang tab

1. Buat susun atur halaman dan konfigurasi penghalaan

Untuk mencipta halaman dengan fungsi berbilang tab dalam projek, anda perlu mempertimbangkan reka letak halaman terlebih dahulu. Dalam artikel ini, kami menggunakan komponen Reka Letak UI Elemen untuk membina infrastruktur halaman, dan kemudian melengkapkan konfigurasi penghalaan melalui Penghala Vue. Dalam senario berbilang tab, setiap halaman tab boleh dianggap sebagai halaman penghalaan, jadi maklumat penghalaan yang sepadan perlu ditambahkan pada jadual penghalaan.

<template>
  <div class="page-container">
    <el-container>
      <el-header>
        <h1>{{ pageTitle }}</h1>
      </el-header>
      <el-container>
        <el-aside style="width: 200px; height: 100%">
          <el-menu
            :default-active="activeMenu"
            @select="handleSelect"
            unique-opened
            :collapse="isCollapse">
            <el-submenu v-for="menuGroup in menuList" :key="menuGroup.name" :index="menuGroup.name">
              <template slot="title">
                <i :class="menuGroup.icon"></i>
                <span>{{ menuGroup.title }}</span>
              </template>
              <el-menu-item v-for="menuItem in menuGroup.children" :key="menuItem.path" :index="menuItem.path">
                <i :class="menuItem.icon"></i>
                <span slot="title">{{ menuItem.title }}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'PageLayout',
  data() {
    return {
      pageTitle: '多标签页示例',
      menuList: [
        {
          name: 'group1',
          title: '分组 1',
          icon: 'el-icon-s-home',
          children: [
            {
              title: '页面 1',
              path: '/page1',
              icon: 'el-icon-s-order',
            },
            {
              title: '页面 2',
              path: '/page2',
              icon: 'el-icon-s-data',
            },
          ],
        },
        {
          name: 'group2',
          title: '分组 2',
          icon: 'el-icon-s-management',
          children: [
            {
              title: '页面 3',
              path: '/page3',
              icon: 'el-icon-s-flag',
            },
            {
              title: '页面 4',
              path: '/page4',
              icon: 'el-icon-menu',
            },
          ],
        },
      ],
      activeMenu: '',
      isCollapse: false,
    };
  },
  methods: {
    handleSelect(index) {
      this.activeMenu = index;
      this.$router.push(index);
    },
  },
};
</script>

Dalam PageLayout.vue komponen induk, kami mula-mula menetapkan tajuk halaman pageTitle, senarai menu Senarai menu dan dua nilai status ActiveMenu dan isCollapse untuk pengembangan dan penutupan menu. Kemudian komponen Reka Letak UI Elemen digunakan untuk membina struktur asas halaman, dengan bar menu di sebelah kiri dan kandungan tab di sebelah kanan. Dalam komponen menu el-menu, kami memaparkan kumpulan menu dan item menu melalui gelung v-for Item menu terikat pada laluan penghalaan yang sepadan Apabila item menu diklik, kaedah handleSelect dicetuskan dan laluan penghalaan dihantar ke $router Lompat ke halaman yang sepadan dalam kaedah tolak. Dalam komponen ini kita perlu menggunakan router-view untuk memaparkan komponen penghalaan yang sepadan.

2. Laksanakan komponen Tab dan fungsi berbilang tab

Selepas melengkapkan susun atur halaman dan konfigurasi penghalaan, kita perlu melaksanakan komponen tab dan fungsi berbilang tab dalam halaman, dan menulis kod js yang sepadan. Dalam fungsi berbilang tab, anda perlu terlebih dahulu melaksanakan komponen bar tab TabBar.vue, yang digunakan untuk memaparkan tajuk setiap tab dan mengawal penambahan dan pemadaman tab.

<template>
  <div class="tab-bar" :class="{ fixed: isFixed }">
    <div class="tab-bar-content">
      <div v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentIndex === index }" @click="handleChange(index)">
        {{ tab.title }}
        <i class="el-icon-close" @click.stop="handleRemoveTab(index)"></i>
      </div>
      <i class="el-icon-circle-plus add-tab-btn" @click.stop="handleAddTab"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabBar',
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    currentIndex: {
      type: Number,
      default: 0,
    },
    isFixed: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleChange(index) {
      this.$emit('tabchange', index);
    },
    handleAddTab() {
      this.$emit('addtab');
    },
    handleRemoveTab(index) {
      this.$emit('removetab', index);
    },
  },
};
</script>

Dalam komponen ini, kami menjadikan tajuk setiap tab sebagai item tab dengan menggunakan gelung v-untuk untuk memaparkan tatasusunan tab masuk. Halaman tab yang dipilih akan menambah kelas aktif pada item tab untuk menyerlahkan halaman tab yang sedang dipilih. Komponen bar tab disertakan dengan tiga peristiwa: pertukaran tab digunakan untuk mendengar peristiwa penukaran tab dan tab tambah dan tab keluar digunakan untuk mendengar acara penambahan dan pengalihan tab untuk mengemas kini nilai tatasusunan tab dalam komponen induk.

Dalam PageLayout.vue komponen induk, kita perlu menambah komponen TabBar di bawah struktur halaman, masukkan tab dan sifat CurrentIndex, kemudian kemas kini tatasusunan tab dalam kaedah acara yang sepadan untuk mengendalikan halaman tab yang sepadan.

<template>
  <div class="page-container">
    ...
    <el-main>
      <tab-bar :tabs="tabs" :currentIndex="currentIndex" :isFixed="isFixed" @tabchange="handleChange" @addtab="handleAddTab" @removetab="handleRemoveTab"/>
      <router-view v-if="$route.meta.keepAlive"/>
      <keep-alive>
        <router-view v-if="!$route.meta.keepAlive"/>
      </keep-alive>
    </el-main>
  </div>
</template>

<script>
import TabBar from '../components/TabBar.vue';

export default {
  name: 'PageLayout',
  components: {
    TabBar,
  },
  data() {
    return {
      tabs: [
        {
          title: '首页',
          path: '/',
        },
      ],
      currentIndex: 0,
      isFixed: false,
    };
  },
  created() {
    this.$router.afterEach((to, from) => {
      const index = this.tabs.findIndex(tab => tab.path === to.path);
      if (index !== -1) {
        this.currentIndex = index;
        this.isFixed = false;
      } else {
        this.addTab(to);
      }
    });
  },
  methods: {
    handleChange(index) {
      this.$router.push(this.tabs[index].path);
    },
    handleAddTab() {
      const isExist = this.tabs.find(tab => tab.path === this.$route.path);
      if (!isExist) {
        this.tabs.push({
          title: this.$route.meta.title || '',
          path: this.$route.path,
        });
        this.currentIndex = this.tabs.length - 1;
        this.isFixed = false;
      } else {
        this.currentIndex = this.tabs.indexOf(isExist);
        this.isFixed = false;
      }
      this.$router.push(this.$route.path);
    },
    handleRemoveTab(index) {
      const targetTab = this.tabs[index];
      const targetPath = targetTab.path;
      this.tabs.splice(index, 1);
      if (targetPath === this.$route.path) {
        const lastIndex = this.tabs.length - 1;
        const lastTab = this.tabs[lastIndex];
        this.currentIndex = lastIndex;
        this.$router.push(lastTab.path);
      } else {
        this.currentIndex = this.tabs.findIndex(tab => tab.path === this.$route.path);
      }
    },
  },
};
</script>

Dalam PageLayout.vue, kami mula-mula mencipta tatasusunan tab untuk menyimpan maklumat penghalaan setiap halaman tab. Dalam fungsi cangkuk yang dicipta, kami mendengar perubahan dalam laluan semasa dan mencari laluan tab yang sepadan dalam tatasusunan tab. Jika ia wujud, navigasi terus ke tab yang sepadan, jika tidak tambahkan laluan semasa sebagai tab baharu. Dalam kaedah handleAddTab, jika tab yang sepadan dengan laluan semasa sudah wujud, pilih terus tab sedia ada, jika tidak tambahkan tab baharu pada tatasusunan tab. Dalam kaedah handleRemoveTab, kami menggunakan kaedah splice tatasusunan untuk memadam tab sedia ada, mencari tab yang dipilih pada masa ini dalam tatasusunan tab dan mengemas kini maklumat lompat currentIndex dan $router.

3

Dalam artikel ini, kami memperkenalkan cara menggunakan rangka kerja Vue dan pemalam yang berkaitan untuk melaksanakan komponen tab dan fungsi berbilang tab. Semasa proses pelaksanaan sebenar, komponen atau kod perlu diselaraskan secara fleksibel mengikut senario tertentu untuk lebih menyesuaikan diri dengan keperluan projek sebenar. Secara umum, komponen tab dan fungsi berbilang tab boleh memberikan kebolehgunaan dan pengalaman pengguna yang lebih baik untuk projek itu, dan menyelesaikan masalah seni bina halaman hadapan dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan komponen tab dan halaman berbilang tab dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!