Vue 中的现代底部导航栏 - vue-bottom-navigation

Vue 中的现代底部导航栏 - vue-bottom-navigation
插件名称 vue-bottom-navigation
发布时间 2021年8月24日
插件作者 imanmalekian31

一个 Vue 组件,用于为 Web 和移动设备创建现代动画底部导航选项卡栏。

安装和下载:

# NPM
$ npm i bottom-navigation-vue --save

如何使用它:

1. 导入并注册组件。

import VueBottomNavigation from "bottom-navigation-vue";
Vue.use(VueBottomNavigation);
// or
export default {
  components: { VueBottomNavigation },
};

2. 在模板中添加 VueBottomNavigation 组件。

<template>
  <VueBottomNavigation :options="options" v-model="selected" />
</template>

3. 在底部导航中添加菜单项。在这个例子中,我们使用 Font Awesome 图标字体作为菜单图标。徽章选项用于指定徽章中未读通知的数量。

export default {
  components: { VueBottomNavigation },
  data: () => ({
    selected: 1,
    options: [
      { 
        id: 1, 
        icon: "fas fa-home", 
        title: "Home", 
        badge: 10 
      },
      // ...
    ],
  }),
};

4. 可用的组件道具。

value: {
  default: null,
},
options: {
  type: Array,
  default: () => [],
},
color: {
  type: String,
  default: "#42A5F5",
},
badgeColor: {
  type: String,
  default: "#FBC02D",
},