Vuetify2.x学习笔记(贰)：导航栏(tabbar)和导航抽屉(navigation drawer)、主题颜色(theme)、列表(list)、间距(padding&margin)

▲导航栏

使用<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 {
            drawer:false
        }
    }
}
</script>

用<v-app-bar-nav-icon>创建一个导航抽屉按钮(也就是汉堡按钮)
通过点击该按钮控制导航抽屉的展示

<!-- 汉堡按钮 -->
<v-app-bar-nav-icon class="grey--text" @click="drawer=!drawer"></v-app-bar-nav-icon>

导航栏和导航抽屉组合

Navbar.vue：

<template>
    <div>
        <nav>
            <v-app-bar app flat>
                <v-app-bar-nav-icon class="grey--text" @click="drawer=!drawer"></v-app-bar-nav-icon>

                <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-btn outlined class="mx-2" color="grey">
                    <span>LoveU</span>
                    <v-icon right>favorite</v-icon>
                </v-btn>
                <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 v-model="drawer" app class="indigo">
                <p>Test</p>
            </v-navigation-drawer>
        </nav>
    </div>
</template>

<script>
export default {
    data(){
        return {
            drawer:false
        }
    }
}
</script>

▲主题颜色

Vuetify提供了默认的主题颜色只要在标签上加上对应的class即可

<v-btn class="success">绿色的success</v-btn>
<v-btn class="error">红色的error</v-btn>
<v-btn class="warning">黄色的warning</v-btn>
<v-btn class="info">蓝色的info</v-btn>
<v-btn class="primary">深蓝色的primary</v-btn>
<v-btn class="secondary">黑色的secondary</v-btn>
<v-btn class="accent">浅蓝色的accent</v-btn>

在这里插入图片描述
同时也能覆盖默认的主题颜色实现颜色的自定义
在vuetify.js里进行配置：

export default new Vuetify({
    theme: {
        themes: {
          light: {
            primary: '#1976D2',
            secondary: '#424242',
            accent: '#82B1FF',
            error: '#FF5252',
            info: '#2196F3',
            success: '#4CAF50',
            warning: '#FFC107'
          },
        },
    }
});

启用暗色主题：

<v-switch v-model="$vuetify.theme.dark" label="暗色主题"></v-switch>

▲列表

使用<v-list>创建一个列表
<v-list-item>是列表中的每一项
<v-list-item-action>表示列表的行为
<v-list-item-content>表示列表的主体内容
<v-list-item-title>表示列表的标题

所以是这样的：

<v-list>
    <v-list-item>
        <v-list-item-action>
            <v-icon class="white--text">home</v-icon>
        </v-list-item-action>
        <v-list-item-content>
            <v-list-item-title class="white--text">Homepage</v-list-item-title>
        </v-list-item-content>
    </v-list-item>
</v-list>

也可放置于导航抽屉中：

<v-navigation-drawer v-model="drawer" app class="red">
    <v-list>
        <v-list-item>
            <v-list-item-action>
                <v-icon class="white--text">home</v-icon>
            </v-list-item-action>
            <v-list-item-content>
                <v-list-item-title class="white--text">Homepage</v-list-item-title>
            </v-list-item-content>
        </v-list-item>
    </v-list>
</v-navigation-drawer>

效果：
在这里插入图片描述
在<v-list>标签上添加dense使其变窄
在<v-list>标签上添加disabled使其无法被点击
在<v-list>标签上添加rounded使列表项变成圆角
在<v-list>标签上添加flat使其在选中后不会有按下的效果

使用<v-divider>标签设置列表item的分隔线

列表的路由

只需要在<v-list-item>标签上添加router属性代表这是一个路由然后在to属性里指定要跳转到的路由地址即可

<v-list>
    <v-list-item v-for="link in links" :key="link.text" router :to="link.route">
        <v-list-item-action>
            <v-icon class="white--text">{{link.icon}}</v-icon>
        </v-list-item-action>
        <v-list-item-content>
            <v-list-item-title class="white--text">{{link.text}}</v-list-item-title>
        </v-list-item-content>
    </v-list-item>
</v-list>

...

<script>
export default {
    data(){
        return {
            drawer:false,
            links:[
                { text: 'Homepare', icon: 'home',route:"/"},
                { text: 'Story', icon: 'book',route:"/story"},
                { text: 'about', icon: 'face',route:"/about"},
            ]
        }
    }
}
</script>

效果：
在这里插入图片描述

▲间距

Vuetify提供了间距助手类
只要添加相应的类即可可以快速修改元素的padding和margin
格式：{property}{direction}-{size}

property是间距的类型(margin还是padding)

m表示margin
p表示padding

direction表示方向

t表示top
b表示bottom
l表示left
r表示right
x表示left和right(x轴)
y表示top和bottom(y轴)
s表示left(从左到右)和right(从右到左)
e表示right(从左到右)和left(从右到左)
a 表示所有方向

size表示程度数值越高程度越深

0是消除所有margin或padding并设置为0
1-12之间是正间距数值越高程度越深
n{size}为负间距例如n2 n3…
数值也是1-12之间
auto为自动

若是要在多个页面上应用相同的间距那么无需再每个组件上添加间距类只需要在App.vue的<v-content>标签上添加即可：

<template>
  <v-app>
    <Navbar/>
    <v-content class="mx-4">
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

Piconjo_Official

原创文章 252 获赞 42 访问量 214万+

关注私信