这是使用vuetify3可以开发的一个简单的相册，通过菜单可以控制相册以彩色或者黑白方式显示。
在这个例子中，我们主要使用 抽屉式导航（Navigation drawers） 做导航，使用栅格（Grids）显示相册图片。
在整个过程中，我们可以直接使用
vuetify3的各种控件，几乎不用写css。
新建项目
可以使用上一篇文章：用最快捷的方法创建vuetify3项目 的方法新建项目。
制作菜单控件
可以在 veutify官网 选择一款抽屉式导航（Navigation drawers）控件，在这里可以直接查看实际效果，也可以直接把代码拷贝出来使用。
vuetify官网的组件部分有大量控件，我想绝大部分应用使用这些控件拼凑就足够酷了。
在项目的 components 文件夹中新建文件 SideBar.vue，然后把从官网拷贝的代码粘贴过来，修改一下，菜单控件就做好了。
下面是SideBar.vue的代码：
<template>
<v-navigation-drawer expand-on-hover rail>
<v-list>
<v-list-item
prepend-avatar="https://randomuser.me/api/portraits/men/85.jpg"
subtitle="liupras@gmailcom"
title="火云"
></v-list-item>
</v-list>
<v-divider></v-divider>
<v-list density="compact" nav>
<v-list-item
prepend-icon="mdi-image"
title="彩色"
value="color gallery"
@click="selectOption(true)"
></v-list-item>
<v-list-item
prepend-icon="mdi-dialpad"
title="黑白"
value="gray gallery"
@click="selectOption(false)"
></v-list-item>
</v-list>
</v-navigation-drawer>
</template>
<script setup>
// 定义 selectOption 事件，此事件供父控件订阅，以便它的消息可以发送给父控件。
const emits = defineEmits(["selectOption"]);
// 响应v-list-item的click事件。
const selectOption = (isColor) => {
// 发送消息给订阅的父控件
emits("selectOption", isColor);
};
</script>
关于事件
用户在菜单项点击时，事件的发送过程为：SideBar.vue->App.vue->ImageGallery.vue。
这个过程实现了鼠标选择菜单（黑色或者彩色）后，ImageGallery能接收到指令并相应。
即App.vue订阅了SideBar.vue的selectOption事件，所以能收到菜单选择的信息，然后通过ImageGallery.vue开放的Props：isWithColor，将用户选择的菜单内容传递给ImageGallery.vue，从而实现图像控制。
制作图库控件
图片可以通过栅格（Grids）进行布局：
每张图片可以用图像（images）控件来显示，它外面还可以套一个v-card控件，以使得图片更好看。
下面是该控件ImageGallery.vue的代码：
<template>
<v-row>
<v-col v-for="n in 168" :key="n" lg="1" md="2" sm="4" cols="6"
><!--根据屏幕尺寸调整每行图片的数量-->
<v-hover>
<template v-slot:default="{ isHovering, props }"><!--鼠标悬停特效-->
<v-card
class="mx-2 my-1 pa-1"
:class="{ 'on-hover': isHovering }"
:elevation="isHovering ? 12 : 2"
v-bind="props"
@click="
copyURL(
`https://picsum.photos/500/300?image=${n * 5 + 10}${
p.isWithColor ? '' : '&grayscale'
}`
)
"
><!--自带圆角，图片更好看-->
<v-img
:lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}${
p.isWithColor ? '' : '&grayscale'
}`"
:src="`https://picsum.photos/500/300?image=${n * 5 + 10}${
p.isWithColor ? '' : '&grayscale'
}`"
aspect-ratio="1"
class="bg-grey-lighten-2"
cover
>
<template v-slot:placeholder><!--图片加载时显示-->
<v-row align="center" class="fill-height ma-0" justify="center">
<v-progress-circular
color="grey-lighten-5"
indeterminate
></v-progress-circular>
</v-row>
</template>
</v-img>
</v-card>
</template>
</v-hover>
</v-col>
</v-row>
</template>
<script setup>
// 定义属性isWithColor，父控件可以将isWithColor传递给子控件
const p = defineProps({
isWithColor: {
type: Boolean,
default: true,
},
});
// 将图片的URL复制到剪贴板
const copyURL = (url) => {
navigator.clipboard.writeText(url);
alert("图片URL已经拷贝到剪贴板!");
};
</script>
<style scoped>
.v-card {
transition: opacity 0.4s ease-in-out;
}
.v-card:not(.on-hover) {
opacity: 0.6;
}
</style>
组合控件，见证成果
由于菜单控件应用于整个程序，本程序功能比较简单，所以我们就把这个控件应用在App.vue中更加方便些。
下面是App.vue的代码：
<!--
<v-app>: Vuetify 的根组件，提供应用的主题和基础布局。
<v-main>: 包裹主要内容的组件，确保应用内容居中且响应式布局。
<router-view />: Vue Router 的占位符组件，显示当前匹配的路由视图。
-->
<template>
<v-app>
<side-bar @selectOption="onSelectOption"/>
<v-main>
<!--<router-view />-->
<image-gallery :is-with-color="isWithColor" />
</v-main>
<app-footer />
</v-app>
</template>
<script setup>
import {ref} from 'vue'
const isWithColor = ref(true)
// SideBar中有菜单项被点击时，会触发该方法
const onSelectOption=(isColor)=>{
//设置isWithColor后，isColor将传递给ImageGallery
isWithColor.value = isColor
}
</script>
在应用程序的根目录下运行：
pnpm dev
程序启动后会出现下图所示页面，并且自动打开浏览器：
总结
通过几个简单的控件组合，我们就制作了一个很酷的相册应用，可见使用vuetify3做一般的web应用可以大大提升前端开发效率。
查看完整代码
🪐祝好运🪐