vue-tabpage
A vue-cli project, it extends a example from https://jsfiddle.net/chrisvfritz/Lp20op9o/
preview
- easy to make a tabpage!
There is also a React demo like this:
react-tabpage
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm testFor a detailed explanation on how things work, check out the guide and docs for vue-loader.
Details
TabRouter.vue
<template>
<div>
<button v-for="tab in tabs"
:key="tab"
:class="['tab-button', { active: currentTab === tab}]"
:style="{ width: widthData }"
@click="currentTab=tab">{{ tab }}</button>
<slot :currentTab="currentTab"></slot>
</div>
</template>
<script>
export default {
props: {
tabs: Array
},
data() {
return {
// default tab
currentTab: this.tabs[0]
}
},
computed: {
widthData() {
return 100 / this.tabs.length + '%'
}
}
}
</script>App.vue
<template>
<main-layout>
<center>
<tab-router :tabs="['Home', 'Project', 'About']">
<template slot-scope="TabRouter">
<component :is="TabRouter.currentTab"
:home="home"
:projects="project"
:about="about"></component>
</template>
</tab-router>
</center>
</main-layout>
</template>
<script>
import MainLayout from './layouts/Main'
import TabRouter from './components/TabRouter'
import Home from './pages/Home'
import Project from './pages/Project'
import About from './pages/About'
export default {
components: {
MainLayout,
TabRouter,
Home,
Project,
About
},
data() {
return {
index: require('./common/json/data.json')
}
},
computed: {
home() {
return this.index.home
},
project() {
return this.index.project
},
about() {
return this.index.project
}
}
}
</script>Home.vue
<template>
<mainLayout>
<p>{{title}}</p>
<img :src="logo" />
<p>{{author}}</p>
<p>{{readME}}</p>
<group :items="websites"
:width="90"
:fontSize="32"></group>
</mainLayout>
</template>
<script>
import mainLayout from '../layouts/Main'
import group from '../components/Group'
export default {
components: {
mainLayout,
group
},
props: ['home'],
computed: {
title() {
return this.home.title
},
logo() {
return this.home.logo
},
author() {
return this.home.author
},
readME() {
return this.home.readME
},
websites() {
return this.home.websites
}
}
}
</script>