From ccfe2f643dc4bc5506e760dc5d71960c6188e51b Mon Sep 17 00:00:00 2001
From: ewall <1054064180@qq.com>
Date: Sat, 21 Mar 2020 22:41:24 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Atabbar=20=E5=BA=95=E9=83=A8?=
 =?UTF-8?q?=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                     | 10 ++++++++
 src/components/Tabbar/index.vue | 44 +++++++++++++++++++++++++++++++++
 src/components/Vant/index.js    |  6 ++++-
 3 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Tabbar/index.vue

diff --git a/src/App.vue b/src/App.vue
index d3e2cd8..14a6762 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,15 @@
 <template>
   <div id="app">
     <router-view />
+    <tabbar />
   </div>
 </template>
+
+<script>
+import Tabbar from './components/Tabbar'
+export default {
+  components: {
+    Tabbar
+  }
+}
+</script>
diff --git a/src/components/Tabbar/index.vue b/src/components/Tabbar/index.vue
new file mode 100644
index 0000000..6c74c0a
--- /dev/null
+++ b/src/components/Tabbar/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <div class="tabbar">
+      <van-tabbar v-model="active" :active-color="variables.theme" :fixed="false">
+        <van-tabbar-item icon="wap-home">首页</van-tabbar-item>
+        <van-tabbar-item icon="bars">分类</van-tabbar-item>
+        <van-tabbar-item icon="shopping-cart">购物车</van-tabbar-item>
+        <van-tabbar-item icon="manager">我的</van-tabbar-item>
+      </van-tabbar>
+    </div>
+    <div class="tabbar--placeholder"></div>
+  </div>
+</template>
+
+<script>
+import variables from '@/styles/variables.scss'
+
+export default {
+  data() {
+    return {
+      active: 0
+    }
+  },
+  computed: {
+    variables() {
+      return variables
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tabbar {
+  width: 100vw;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  border-top: 2px solid #f5f5f5;
+}
+.tabbar--placeholder {
+    width: 100vw;
+    height: 100px;
+}
+</style>
diff --git a/src/components/Vant/index.js b/src/components/Vant/index.js
index 4c4e878..c0ad674 100644
--- a/src/components/Vant/index.js
+++ b/src/components/Vant/index.js
@@ -18,7 +18,9 @@ import {
   SwipeItem,
   Loading,
   Tag,
-  CountDown
+  CountDown,
+  Tabbar,
+  TabbarItem
 } from 'vant'
 
 Vue.use(Toast)
@@ -38,3 +40,5 @@ Vue.use(Toast)
   .use(Loading)
   .use(Tag)
   .use(CountDown)
+  .use(Tabbar)
+  .use(TabbarItem)