系列文章目錄

第一章 定制上中下（頂部菜單、底部區(qū)域、中間主區(qū)域顯示）三層結(jié)構(gòu)首頁
第二章 使用Vue3、Element-plus菜單組件構(gòu)建菜單
第三章 使用Vue3、Element-plus走馬燈組件構(gòu)建輪播圖
第四章 使用Vue3、Element-plus tabs組件構(gòu)建選項(xiàng)卡功能
[第五章 使用Vue3、Element-plus菜單組件構(gòu)建組圖文章]

前言

在第一章節(jié)，我們把博物館管理系統(tǒng)打了個(gè)地基，基本的產(chǎn)品架構(gòu)和框架已經(jīng)都落實(shí)到位；
第二章節(jié)，使用Vue3、Element-plus菜單組件構(gòu)建頂部區(qū)域的菜單，包括父子菜單；
第三章節(jié)，使用Vue3、Element-plus走馬燈組件構(gòu)建輪播圖；
本章節(jié)，我們做1件事：使用Vue3、Element-plus tabs組件構(gòu)建選項(xiàng)卡功能

1、學(xué)習(xí)Element-plus 的tabs組件選項(xiàng)卡功能

1.1、tabs 組件

分隔內(nèi)容上有關(guān)聯(lián)但屬于不同類別的數(shù)據(jù)集合。

1.2、基礎(chǔ)用法

基礎(chǔ)的、簡(jiǎn)潔的標(biāo)簽頁。

Tabs 組件提供了選項(xiàng)卡功能， 默認(rèn)選中第一個(gè)標(biāo)簽頁，你也可以通過 value 屬性來指定當(dāng)前選中的標(biāo)簽頁。

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
  </el-tabs>
</template>
        ....................
</el-menu>

1.3、卡片風(fēng)格的標(biāo)簽

可以設(shè)置具有卡片風(fēng)格的標(biāo)簽。

只需要設(shè)置 type 屬性為 card 就可以使選項(xiàng)卡改變?yōu)闃?biāo)簽風(fēng)格。

<template>
  <el-tabs v-model="activeName"  type="card" @tab-click="handleClick">
    <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
  </el-tabs>
</template>
        ....................
</el-menu>

1.4、標(biāo)簽位置的設(shè)置

可以通過 tab-position 設(shè)置標(biāo)簽的位置

標(biāo)簽一共有四個(gè)方向的設(shè)置 tabPosition=“l(fā)eft|right|top|bottom”

1.5、Tabs 屬性

1.6、Tabs 事件

2、博物館管理系統(tǒng)數(shù)據(jù)展示

2.1、產(chǎn)品原型圖

2.2、準(zhǔn)備mock數(shù)據(jù)

mock數(shù)據(jù)是JSON格式的數(shù)據(jù)，會(huì)使用axios去加載，解析后放置到tabs組件里去顯示

2.3、通過axios加載數(shù)據(jù)

<template>
  <div class="main-box">
    <div class="main">
      
      <!-- 經(jīng)典產(chǎn)品  -->
      <div style="text-align: center;margin: 60px 2px 20px 2px">
        <h1>主題收藏</h1>
<!--        <div style="margin: 20px 0 ; color: #6a737d">
          <h3>我們的產(chǎn)品后端主要基于Java+Mysql+Redis+SpringCloud alibaba技術(shù)實(shí)現(xiàn)，前端使用了Vue3、Router、Axios、Echarts等技術(shù)</h3>
        </div>-->

        <!-- 項(xiàng)目介紹 Tab -->
        <div style="margin: 20px 0; text-align: left; ">
          <el-tabs tab-position="bottom" type="border-card"  class="demo-tabs" >
            <el-tab-pane v-for="item in carouseProjectData" :label="item.subTitle" >
              <el-row :gutter="20">
                <el-col :span="12"> <img :src="item.picture" style="width: 100%;height: 400px;" alt=""/></el-col>
                <el-col :span="12">
                  <div class="title">{{item.title}}</div>
                  <div class="subTitle"><p v-html="item.content"> </p></div>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>

      </div>
      <!-- 經(jīng)典產(chǎn)品END -->

    </div>
  </div>
</template>

<script>

import axios from "axios";

export default {
  name: 'VueHome',
  data() {
    return { 
      carouseProjectData: [], 
    }
  },
  created() { 
    //獲取項(xiàng)目數(shù)據(jù)
    this.getData("carouseProjectData" , "../../static/mock/project/data.json" );
  
  },
  methods: {

    getData(val , url){
      axios.get( url ).then((response) => {
        this[val] = response.data.success.data;
      });
    },
  }
}
</script>

總結(jié)

效果可見地址中間的【主題收藏】模塊：http://139.159.230.49/

以上就是今天要講的內(nèi)容，本文介紹了在Vue3里，如何使用Element-plus tabs組件構(gòu)建選項(xiàng)卡功能，如何使用axios去加載Vue項(xiàng)目里的JSON格式文件數(shù)據(jù)填充到 tabs組件。文章來源地址http://www.zghlxwxcb.cn/news/detail-703298.html

到了這里，關(guān)于[Vue3 博物館管理系統(tǒng)] 使用Vue3、Element-plus tabs組件構(gòu)建選項(xiàng)卡功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！