一. 底部导航栏 v-bottom-navigation

v-bottom-navigation 组件是侧边栏的替代品。 它主要用于移动应用程序，并且有三个变体： icons 和 text和 shift。

1. 基本用法

    <v-bottom-navigation v-model="selected">
      <v-btn value="home">
        <span>首页</span>
        <v-icon>mdi-home</v-icon>
      </v-btn>
      <v-btn value="favorites">
        <span>订阅</span>
        <v-icon>mdi-heart</v-icon>
      </v-btn>
      <v-btn value="history">
        <span>历史</span>
        <v-icon>mdi-history</v-icon>
      </v-btn>
      <v-btn value="mine">
        <span>我的</span>
        <v-icon>mdi-human</v-icon>
      </v-btn>
    </v-bottom-navigation>

2. 颜色 color

可以设置颜色属性, 建议使用 light 和 dark 来正确对比文字颜色。

<v-bottom-navigation dark color="lime" v-model="selected">

3. 宽度 grow

<v-bottom-navigation grow v-model="selected">

4. 水平布局 horizontal

让图标和按钮文本水平对齐

<v-bottom-navigation horizontal v-model="selected">

5. 上档 shift

隐藏未激活时的按钮文本, 这种效果动画过渡很好

<v-bottom-navigation shift v-model="selected">

二. 底部工作表 v-bottom-sheet

类似于抽屉效果, 只不过是从底部弹出

1. 基本功能 (用插槽实现弹出按钮)

<template>
  <div>
    <v-bottom-sheet v-model="show">
      <template v-slot:activator="{ on, attrs }">
        <v-btn color="orange" dark v-bind="attrs" v-on="on"> 弹窗按钮 </v-btn>
      </template>
      <v-sheet class="text-center" height="200px">
        <div>这是一个底部弹窗</div>
      </v-sheet>
    </v-bottom-sheet>
  </div>
</template>
<script>
export default {
  data: () => ({ show: false }),
};
</script>

2. 基本功能 (用按钮事件实现弹出)

<template>
  <div>
    <v-btn color="orange" dark @click="show = true"> 弹窗按钮 </v-btn>
    <v-bottom-sheet v-model="show" inset>
      <v-sheet class="text-center" height="200px">
        <v-btn class="mt-6" text color="red" @click="show = false">
          close
        </v-btn>
        <div>这是一个底部弹窗</div>
      </v-sheet>
    </v-bottom-sheet>
  </div>
</template>
<script>
export default {
  data: () => ({ show: false }),
};
</script>

3. 关闭蒙版关闭功能 persistent

<v-bottom-sheet v-model="show" persistent>

4. 控制宽度 inset

<v-bottom-sheet v-model="show" inset>

5. 例: 列表中打开

<template>
  <div>
    <v-btn color="orange" dark @click="show = true"> 弹窗按钮 </v-btn>
    <v-bottom-sheet v-model="show">
      <v-list>
        <v-list-item @click="btnClick(0)">
          <v-list-item-avatar>
            <v-icon>mdi-home</v-icon>
          </v-list-item-avatar>
          <v-list-item-title>标题</v-list-item-title>
        </v-list-item>
        <v-list-item @click="btnClick(1)">
          <v-list-item-avatar>
            <v-icon>mdi-history</v-icon>
          </v-list-item-avatar>
          <v-list-item-title>历史</v-list-item-title>
        </v-list-item>
        <v-list-item @click="btnClick(2)">
          <v-list-item-avatar>
            <v-icon>mdi-logout</v-icon>
          </v-list-item-avatar>
          <v-list-item-title>退出</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-bottom-sheet>
  </div>
</template>
<script>
export default {
  data: () => ({ show: false }),
  methods: {
    btnClick(v) {
      console.log(v);
      this.show = false;
    },
  },
};
</script>