▲导航栏
使用<v-app-bar>
创建一个导航栏
- 添加app 使之能固定在页面上方(fixed)
- 添加flat 移除阴影
- 用color属性设置颜色
- 添加dense 使导航栏更窄
- 添加hide-on-scroll 页面往下滚动时导航栏隐藏
- 添加invert-scroll 页面往上滚动时导航栏隐藏
- 用src属性设置背景图片地址
使用<v-toolbar-title>
创建导航栏的标题
<v-spacer>
相当于是左右的分界线 在v-spacer上面的标签将会在导航栏左侧 在v-spacer下面的标签将会在导航栏右侧
<v-app-bar app flat>
<!-- 标题 -->
<v-toolbar-title class="text-uppercase grey--text">
<span class="font-weight-light">Hello</span>
<span>Piconjo</span>
</v-toolbar-title>
<!-- 在v-spacer上面的标签将会在导航栏左侧 在v-spacer下面的标签将会在导航栏右侧 -->
<v-spacer></v-spacer>
<!-- 按钮1 -->
<v-btn outlined class="mx-2" color="grey">
<span>LoveU</span>
<v-icon right>favorite</v-icon>
</v-btn>
<!-- 按钮2 -->
<v-btn outlined class="mx-2" color="grey">
<span>Login</span>
<v-icon right>lock</v-icon>
</v-btn>
</v-app-bar>
效果:
导航抽屉
导航抽屉就是大部分是从页面侧边弹出来以供用户浏览的组件
使用<v-navigation-drawer>
创建一个导航抽屉
- 添加app 使之能固定在页面上方(fixed)
导航抽屉必须添加app属性 否则无法显示 - 添加right 使之显示在页面右侧
- 添加expand-on-hover 使之变成缩小版 当悬停在导航抽屉时扩展为正常大小
- 用src属性设置背景图片地址
导航抽屉还需要绑定一个用于控制其显示还是隐藏的属性 true为显示 false为隐藏
<v-navigation-drawer v-model="drawer" app class="indigo">
<p>Test</p>
</v-navigation-drawer>
...
<script>
export default {
data(){
return {