【前端】Vue实现网站导航 以卡片形式显示（附Demo）
CSDN 2024-08-03 14:33:01 阅读 95
目录
前言1. html版本2. Vue2.1 Demo12.2 Demo2
前言
单独做一个跳转页面推荐阅读：【前端】实现Vue组件页面跳转的多种方式
但是如果网站多了，推荐卡片式导航，具体可看下文：（以图片显示显示各个网站，图片需要内嵌）
1. html版本
其实html版本和Vue相差不了多少，只是排版问题而已
这一版主要是卡片形式，但是没有嵌入图片，嵌入图片加个位置即可：
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Vue Website Navigation</title>
<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>code>
<style>
/* 样式可以根据您的需求进行自定义 */
.websites {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.website-card {
width: calc(33.33% - 20px); /* 计算每个卡片宽度 */
padding: 20px;
margin: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">code>
<!-- 常用网站导航 -->
<div class="websites">code>
<div
class="website-card"code>
v-for="(site, index) in websites"code>
:key="index"code>
@click="openWebsite(site.url)"code>
>
{ { site.name }}
</div>
</div>
</div>
<script>
// 创建Vue实例
new Vue({
el: '#app', // 指定挂载点
data: { // 数据
websites: [
{ name: 'Google', url: 'https://www.google.com' },
{ name: 'GitHub', url: 'https://github.com' },
{ name: 'Stack Overflow', url: 'https://stackoverflow.com' }
]
},
methods: { // 方法
openWebsite(url) {
window.open(url);
}
}
});
</script>
</body>
</html>
2. Vue
以下版本会由浅入深，相应修改
2.1 Demo1
卡片形式存在，但没有嵌入图片形式：
<template>
<div class="websites">code>
<div
class="website-card"code>
v-for="(site, index) in websites"code>
:key="index"code>
@click="openWebsite(site.url)"code>
>
{ { site.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
websites: [
{ name: 'Google', url: 'https://www.google.com' },
{ name: 'GitHub', url: 'https://github.com' },
{ name: 'Stack Overflow', url: 'https://stackoverflow.com' }
// 在这里添加更多的网站
]
};
},
methods: {
openWebsite(url) {
window.open(url);
}
}
};
</script>
<style scoped>
/* 样式可以根据您的需求进行自定义 */
.websites {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.website-card {
width: calc(33.33% - 20px); /* 计算每个卡片宽度 */
padding: 20px;
margin: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
</style>
如果嵌入图片，完整版如下（对应的网站可以修改为本项目路径等，通过request进行请求）：
<template>
<div class="websites">code>
<div
class="website-card"code>
v-for="(site, index) in websites"code>
:key="index"code>
@click="openWebsite(site.url)"code>
>
<img :src="site.image" alt="Website Logo" class="website-image">code>
<span>{ { site.name }}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
websites: [
{ name: 'Google', url: 'https://www.google.com', image: 'https://via.placeholder.com/150', },
{ name: 'GitHub', url: 'https://github.com', image: 'https://via.placeholder.com/150', },
{ name: 'Stack Overflow', url: 'https://stackoverflow.com', image: 'https://via.placeholder.com/150', }
// 在这里添加更多的网站
]
};
},
methods: {
openWebsite(url) {
window.open(url);
}
}
};
</script>
<style scoped>
/* 样式可以根据您的需求进行自定义 */
.websites {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.website-card {
width: calc(33.33% - 20px); /* 计算每个卡片宽度 */
padding: 20px;
margin: 10px;
border: 1px solid #ccc;
cursor: pointer;
text-align: center;
}
.website-image {
width: 100px; /* 图片宽度 */
height: auto; /* 自动调整高度 */
margin-bottom: 10px;
}
</style>
2.2 Demo2
以上代码图片可能居中，或者样式不够优美
可以适当让图片填充式的方式拉满整个卡片
<template>
<div class="websites">code>
<div
class="website-card"code>
v-for="(site, index) in websites"code>
:key="index"code>
@click="openWebsite(site.url)"code>
>
<div class="website-image">code>
<img :src="site.image" alt="Website Logo">code>
</div>
<div class="website-details">code>
<span class="website-name">{ { site.name }}</span>code>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
websites: [
{ name: 'Google', url: 'https://www.google.com', image: 'https://via.placeholder.com/150', },
{ name: 'GitHub', url: 'https://github.com', image: 'https://via.placeholder.com/150', },
{ name: 'Stack Overflow', url: 'https://stackoverflow.com', image: 'https://via.placeholder.com/150', }
// 在这里添加更多的网站
]
};
},
methods: {
openWebsite(url) {
window.open(url);
}
}
};
</script>
<style scoped>
/* 样式可以根据您的需求进行自定义 */
.websites {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.website-card {
width: calc(33.33% - 20px); /* 设置每个卡片的宽度 */
margin: 10px; /* 设置外边距 */
border: 1px solid #ccc; /* 设置边框 */
cursor: pointer;
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
}
.website-image {
flex: 1;
overflow: hidden;
}
.website-image img {
width: 100%; /* 图片宽度充满整个卡片 */
height: auto;
}
.website-details {
padding: 10px;
}
.website-name {
font-weight: bold;
}
</style>
使用了Flexbox布局
.website-card设置为display: flex;，以确保图片和文字在垂直方向上布局良好
.website-image部分设置为flex: 1;，以充满剩余的空间，并通过设置overflow: hidden;来确保图片不会超出卡片
.website-details部分包含了文字内容，并添加了一些样式来调整字体加粗等
上一篇： 【Spring Boot】手撕搜索引擎项目，深度复盘在开发中的重难点和总结（长达两万6千字的干货，系好安全带，要发车了......）
下一篇： 2024年最新idea创建maven项目，零基础开发前端
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。