[improvement] rename packages dir to src (#3659)

2019-06-27 11:25:57 +08:00
parent 8489918dca
commit 75c79b7044
619 changed files with 21 additions and 21 deletions
@@ -0,0 +1,136 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-tabbar v-model="active">
+        <van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="friends-o">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
+      </van-tabbar>
+    </demo-block>
+
+    <demo-block :title="$t('itemName')">
+      <van-tabbar v-model="activeName">
+        <van-tabbar-item
+          name="home"
+          icon="home-o"
+        >
+          {{ $t('tab') }}
+        </van-tabbar-item>
+        <van-tabbar-item
+          name="search"
+          icon="search"
+        >
+          {{ $t('tab') }}
+        </van-tabbar-item>
+        <van-tabbar-item
+          name="friends"
+          icon="friends-o"
+        >
+          {{ $t('tab') }}
+        </van-tabbar-item>
+        <van-tabbar-item
+          name="setting"
+          icon="setting-o"
+        >
+          {{ $t('tab') }}
+        </van-tabbar-item>
+      </van-tabbar>
+    </demo-block>
+
+    <demo-block :title="$t('badge')">
+      <van-tabbar v-model="active2">
+        <van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item
+          icon="search"
+          dot
+        >
+          {{ $t('tab') }}
+        </van-tabbar-item>
+        <van-tabbar-item
+          icon="friends-o"
+          info="5"
+        >
+          {{ $t('tab') }}
+        </van-tabbar-item>
+        <van-tabbar-item
+          icon="setting-o"
+          info="20"
+        >
+          {{ $t('tab') }}
+        </van-tabbar-item>
+      </van-tabbar>
+    </demo-block>
+
+    <demo-block :title="$t('customIcon')">
+      <van-tabbar v-model="active3">
+        <van-tabbar-item info="3">
+          <span>{{ $t('custom') }}</span>
+          <template #icon="{ active }">
+            <img :src="active ? icon.active : icon.normal">
+          </template>
+        </van-tabbar-item>
+        <van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
+      </van-tabbar>
+    </demo-block>
+
+    <demo-block :title="$t('customColor')">
+      <van-tabbar
+        v-model="active4"
+        active-color="#07c160"
+        inactive-color="#000"
+      >
+        <van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="friends-o">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
+      </van-tabbar>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      badge: '显示徽标',
+      customIcon: '自定义图标',
+      customColor: '自定义颜色',
+      itemName: '通过名称匹配'
+    },
+    'en-US': {
+      badge: 'Show Badge',
+      customIcon: 'Custom Icon',
+      customColor: 'Custom Color',
+      itemName: 'Item Name'
+    }
+  },
+
+  data() {
+    return {
+      active: 0,
+      active2: 0,
+      active3: 0,
+      active4: 0,
+      activeName: 'home',
+      icon: {
+        normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
+        active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
+      }
+    };
+  }
+};
+</script>
+
+<style lang="less">
+.demo-tabbar {
+  .van-tabbar {
+    position: relative;
+
+    &-item {
+      cursor: pointer;
+    }
+  }
+}
+</style>