一. 导航抽屉 v-navigation-drawer

v-navigation-drawer是用户用于导航应用程序的组件。
导航抽屉被预先配置为可以在有或没有 vue-router 的情况下使用。 在应用程序中，通常会把 v-navigation-drawer 组件作为 v-app 的直接子组件。

1. 抽屉的显示和隐藏 v-model绑定

要控制抽屉的显示和隐藏, 我们使用v-model来绑定一个标志位参数

<template><div class="home"><v-toolbar dense dark light><v-app-bar-nav-icon @click="show_flag = !show_flag "></v-app-bar-nav-icon></v-toolbar><v-navigation-drawer app color="indigo white--text" v-model="show_flag">hello</v-navigation-drawer></div>
</template><script>
export default {data() {return {show_flag: false,};},
};
</script>

2. 抽屉的样式

(1). app化动态调整

组件作为应用程序布局的一部分。用于动态调整内容的大小。

<v-navigation-drawer app color="indigo white--text" v-model="show_flag">hello</v-navigation-drawer>

值得注意的是, 它是会根据设备宽度(设备类型)自动调整行为的

(2). 折叠式 clipped

<v-navigation-drawer clipped color="indigo white--text" v-model="show_flag">hello</v-navigation-drawer>

(3). 隐藏蒙版 hide-overlay

<v-navigation-drawerapphide-overlaycolor="indigo white--text"v-model="show_flag"></v-navigation-drawer>

(4). 修改遮罩蒙版 overlay-color/overlay-opacity

我们可以使用overlay-color更改遮罩颜色
使用overlay-opacity更改遮罩透明度

<v-navigation-draweroverlay-color = "indigo"overlay-opacity = "0.5"v-model="show_flag">

(5). 缩小化抽屉 mini-variant

<v-navigation-drawerappmini-variantcolor="indigo white--text"v-model="show_flag">

我们还可以使用 mini-variant-width来控制最小宽度

<v-navigation-drawer v-model="show_flag" mini-variantmini-variant-width="64">

(6). hover展开 expand-on-hover

平时会默认缩小,鼠标hover时才会展开

<template><div class="home"><v-toolbar dense dark light><v-app-bar-nav-icon @click="show_flag = !show_flag"></v-app-bar-nav-icon></v-toolbar><v-navigation-drawer v-model="show_flag" expand-on-hovermini-variant-width="64"><v-list nav dense><v-list-item-groupv-model="group"active-class="deep-purple--text text--accent-4"><v-list-item><v-list-item-avatar><img src="~assets/head.jpg" alt="alt" /></v-list-item-avatar><v-list-item-title>熊爸天下</v-list-item-title></v-list-item><v-list-item><v-list-item-icon><v-icon large>mdi-qqchat</v-icon></v-list-item-icon><v-list-item-title>QQ:xxxxxx</v-list-item-title></v-list-item><v-list-item><v-list-item-icon><v-icon large>mdi-wechat</v-icon></v-list-item-icon><v-list-item-title>微信:xxxxxxx</v-list-item-title></v-list-item><v-list-item><v-list-item-icon><v-icon large>mdi-email</v-icon></v-list-item-icon><v-list-item-title>Email:xxxx@xxx.com</v-list-item-title></v-list-item></v-list-item-group></v-list></v-navigation-drawer></div>
</template><script>
export default {data() {return {show_flag: false,group: null,};},
};
</script>

(7). 右侧抽屉 right

<v-navigation-drawerv-model="show_flag"rightapp>

(8). 抽屉背景 src

<v-navigation-drawerv-model="show_flag"appsrc = "~assets/background.jpg">

(9). 底部弹出 bottom

底部弹出只有在在移动设备上从屏幕底部展开(只能遇到 mobile-breakpoint 时激活), 有没有app属性也会影响其行为

<v-navigation-drawer bottom v-model="show_flag" >
<v-navigation-drawer bottom v-model="show_flag" app>

无app属性

有app属性

(10). 不管屏幕尺寸如何, 抽屉都可以看到 permanent

肯定能看到, 连v-modle都不好使了

<v-navigation-drawer permanent>

3.append插槽

<template><div class="home"><v-toolbar dense dark light><v-app-bar-nav-icon @click="show_flag = !show_flag"></v-app-bar-nav-icon></v-toolbar><v-navigation-drawermini-variant-width="64"darkpermanentapp><v-list nav dense><v-list-item-groupv-model="group"active-class="deep-purple--text text--accent-4"><v-list-item><v-list-item-avatar><img src="~assets/head.jpg" alt="alt" /></v-list-item-avatar><v-list-item-title>熊爸天下</v-list-item-title></v-list-item><v-list-item><v-list-item-icon><v-icon large>mdi-qqchat</v-icon></v-list-item-icon><v-list-item-title>QQ:xxxxxx</v-list-item-title></v-list-item><v-list-item><v-list-item-icon><v-icon large>mdi-wechat</v-icon></v-list-item-icon><v-list-item-title>微信:xxxxxxx</v-list-item-title></v-list-item><v-list-item><v-list-item-icon><v-icon large>mdi-email</v-icon></v-list-item-icon><v-list-item-title>Email:xxxx@xxx.com</v-list-item-title></v-list-item></v-list-item-group></v-list><template v-slot:append><div class="pa-2"><v-btn block color="error"> 注销 </v-btn></div></template></v-navigation-drawer></div>
</template><script>
export default {data() {return {show_flag: false,group: null,};},
};
</script>

二. 卡片组件

1. 卡片相关组件

(1). 卡片 v-card

(2). 卡片标题 v-card-title

(3). 卡片副标题 v-card-subtitle

(4). 卡片文本 v-card-text

(5). 卡片动作 v-card-actions

用于为卡片放置 动作 的容器

<v-card outlined><v-card-title primary-title><v-avatar size="36"><img src="~assets/head.jpg" alt="alt" /></v-avatar><span class="ml-2">熊爸天下</span></v-card-title><v-card-subtitle primary-title> 超级奶爸 </v-card-subtitle><v-card-text>lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,consectetur, lorem ipsum dolor sit amet, consectetur, lorem ipsum dolorsit amet, consectetur</v-card-text></v-card>

2. 卡片的样式

(1). 外轮廓线样式 outlined

<v-card outlined>

(2). 形状的样式 shaped

<v-card shaped>

(3). 瓦片样式 tile

3. 卡片的禁用 disabled

4. 卡片的加载状态 loading

<v-card outlined loading>

5. 和v-expand-transition配合实现弹出动画卡片

<template><v-container><v-card><v-card-title><v-avatar size="36"><img src="~assets/head.jpg" alt="alt" /></v-avatar><span class="ml-2">熊爸天下</span></v-card-title><v-card-subtitle primary-title> 超级奶爸 </v-card-subtitle><v-card-text>lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,consectetur, lorem ipsum dolor sit amet, consectetur, lorem ipsum dolorsit amet, consectetur</v-card-text><v-card-actions><v-btn text color="success" @click="reveal = !reveal">详情</v-btn><v-btn text color="error">取消</v-btn></v-card-actions><!-- 初始隐藏的扩展卡片 --><v-expand-transition><v-cardv-show="reveal"><v-card-text><v-card-title>人类起源</v-card-title><p>阿努纳奇(Anunnaki)来自太阳系一个拥有椭圆轨道的行星，这个行星被称为“尼比鲁”，它的轨道周期为3600个地球年。在苏美尔，阿卡德，亚述以及巴比伦文明中，阿努纳奇人是创造人类的众神。</p></v-card-text><v-card-actions><v-btn text color="success" @click="reveal = false"> 关闭 </v-btn></v-card-actions></v-card></v-expand-transition></v-card></v-container>
</template><script>
export default {data() {return {reveal: false,};},
};
</script>

配合css实现详情卡

<template><v-container><v-card><v-card-title><v-avatar size="36"><img src="~assets/head.jpg" alt="alt" /></v-avatar><span class="ml-2">熊爸天下</span></v-card-title><v-card-subtitle primary-title> 超级奶爸 </v-card-subtitle><v-card-text>lorem ipsum dolor sit amet, consectetur, lorem ipsum dolor sit amet,consectetur, lorem ipsum dolor sit amet, consectetur, lorem ipsum dolorsit amet, consectetur</v-card-text><v-card-actions><v-btn text color="success" @click="reveal = true">详情</v-btn><v-btn text color="error">取消</v-btn></v-card-actions><!-- 初始隐藏的扩展卡片 --><v-expand-transition><v-cardv-if="reveal"class="transition-fast-in-fast-out v-card--reveal"style="height: 100%"><v-card-text class="pb-0"><v-card-title>人类起源</v-card-title><p>阿努纳奇(Anunnaki)来自太阳系一个拥有椭圆轨道的行星，这个行星被称为“尼比鲁”，它的轨道周期为3600个地球年。在苏美尔，阿卡德，亚述以及巴比伦文明中，阿努纳奇人是创造人类的众神。</p></v-card-text><v-card-actions class="pt-0"><v-btn text color="success" @click="reveal = false"> 关闭 </v-btn></v-card-actions></v-card></v-expand-transition></v-card></v-container>
</template><script>
export default {data() {return {reveal: false,};},
};
</script>
<style>
.v-card--reveal {bottom: 0;opacity: 1 !important;position: absolute;width: 100%;
}
</style>