基于Vue3实现一个小相册详解
作者：出逃日志
这篇文章主要为大家详细介绍了如何基于Vue3实现一个小相册效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
下面是是对Vue3操作的一个项目实战
下面代码是html的基本骨架（没有任何的功能）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相册</title>
<style>
.box{
margin-bottom: 20px;
padding: 0;
}
.img{
width: 480px;
height: 240px;
border: 1px bisque solid;
}
</style>
</head>
<body>
<div id="app">
<h2>基于Vue3实现的相册：展示第xx张相片</h2>
<img src = "./img_src/logo1.png" class="img" alt="图片加载失败">
<ul type="none" class="box"></ul>
<button>上一张</button> <button>下一张</button>
</div>
<script type="module">
import { createApp, ref } from './vue.esm-browser.js'
</script>
</body>
</html>运行结果：
接下来我们将添加代码使其变成一个小相册，运行结果如下图：
我们可以点击上一张或下一张来实现图片的跳转，也可以使用按钮1234来实现你想跳转的张数
【实现思路】
1. 利用v-on为切换相片的按钮绑定上一个函数，这个函数负责更改图片路径
2. 利用v-bind绑定图片的路径，使得图片路径可以自动更新
以下是实现相册的完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相册</title>
<style>
.clear_ele::after{
content: ""; /* 这个伪元素的内容属性必须有 */
display: block;
clear: both;
}
.box{
margin-bottom: 20px;
padding: 0;
}
.button{
background-color: bisque;
width: 20px;
float: left;
text-align: center;
margin-right: 10px;
border-radius: 8px;
cursor: pointer;
}
.img{
width: 480px;
height: 240px;
border: 1px bisque solid;
}
</style>
</head>
<body>
<div id="app">
<h2>基于Vue3实现的相册：展示第{{ img.number }}张相片</h2>
<img v-bind:src="img.url" class="img">
<ul type="none" class="clear_ele box">
<li v-for="(val, idx) in 4" @click="jump(val)" class="button"> {{val}} </li>
</ul>
<button @click="prev">上一张</button> <button @click="next">下一张</button>
</div>
<script type="module">
import { createApp, ref, reactive } from './vue.esm-browser.js'
createApp({
setup() {
// 【定义数据】
const img = reactive(
{
number: 1,
url: "./img_src/logo1.png"
}
)
// 【定义函数】
//上一张
const prev = () => {
img.number--
if (img.number == 0) {
img.number = 4
}
img.url = `./img_src/logo${img.number}.png`
}
//下一张
const next = () => {
img.number++
if (img.number == 5) {
img.number = 1
}
img.url = `./img_src/logo${img.number}.png`
}
//跳转
const jump = (val) => {
img.number = val
img.url = `./img_src/logo${img.number}.png`
}
return {img, prev,next,jump}
}
}).mount("#app")
</script>
</body>
</html>还有另一种方法也同样可以实现相册的效果，代码如下：
下述代码的弊端就是比较冗长，相对于上一种方法会消耗更长时间，因为它是把每一张照片的使用结果一一敲出来的，可与上面代码比对
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相册</title>
<style>
.clear_ele::after{
content: ""; /* 这个伪元素的内容属性必须有 */
display: block;
clear: both; /* 忽略前面盒子浮动带来的影响，解决父盒高度塌陷问题 */
}
.button{
background-color: bisque;
width: 20px;
float: left;
text-align: center;
margin-right: 10px;
border-radius: 8px;
cursor: pointer;
}
.img{
width: 480px;
height: 240px;
border: 1px bisque solid;
}
.box{
margin-bottom: 20px;
padding: 0;
}
</style>
</head>
<body>
<div id="app">
<h2>基于Vue3实现的相册：展示第{{img.index}}张相片</h2>
<img v-bind:src= "img.url" class="img" alt="图片加载失败">
<ul type="none" class="box clear_ele">
<li class="button" v-on:click = "show_1_img">1</li>
<li class="button" v-on:click = "show_2_img">2</li>
<li class="button" v-on:click = "show_3_img">3</li>
<li class="button" v-on:click = "show_4_img">4</li>
</ul>
<button v-on:click = "pre">上一张</button>
<button v-on:click = "next">下一张</button>
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const img = reactive(
{
index: 1,
url: "./img_src/logo1.png", //图片路径
}
)
const show_1_img = () => {
img.index = 1
img.url = `./img_src/logo${img.index}.png`
console.log(`用户点击第${img.index}张按钮，显示第${img.index}张照片`);
}
const show_2_img = () => {
img.index = 2
img.url = `./img_src/logo${img.index}.png`
console.log(`用户点击第${img.index}张按钮，显示第${img.index}张照片`);
}
const show_3_img = () => {
img.index = 3
img.url = `./img_src/logo${img.index}.png`
console.log(`用户点击第${img.index}张按钮，显示第${img.index}张照片`);
}
const show_4_img = () => {
img.index = 4
img.url = `./img_src/logo${img.index}.png`
console.log(`用户点击第${img.index}张按钮，显示第${img.index}张照片`);
}
const pre = () => {
img.index = img.index - 1
if(img.index < 1 ){
img.index = 4
}
// 把图片路径存储在响应式数据里，当这个响应式数据改变时，html的图片路径就会自动改变
img.url = `./img_src/logo${img.index}.png`
console.log(`用户点击了上一张按钮，显示第${img.index}张照片`);
}
const next = () => {
img.index = img.index + 1
if(img.index > 4 ){ // 图片展示完了，回到第一张
img.index = 1
}
// 把图片路径存储在响应式数据里，当这个响应式数据改变时，html的图片路径就会自动改变
img.url = `./img_src/logo${img.index}.png`
console.log(`用户点击了下一张按钮，显示第${img.index}张照片`);
}
return { img,
show_1_img,
show_2_img,
show_3_img,
show_4_img,
pre, next } //把数据（属性）， 函数（方法）暴露出来，供HTML模板调用
}
}).mount("#app")
</script>
</body>
</html>到此这篇关于基于Vue3实现一个小相册详解的文章就介绍到这了,更多相关Vue3相册内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！