使用 ChatGPT 生成 Vue3 响应式导航栏组件
标签： 使用 ChatGPT 生成 Vue3 响应式导航栏组件 Vue.js博客 51CTO博客
2023-04-29 18:24:02 216浏览
使用 ChatGPT 生成 Vue3 响应式导航栏组件，下面是ChartGPT生成的Vue3响应式导航栏组件。经过简单的调试。基本可实现描述的要求。Nav.vue
下面是ChartGPT 生成的 Vue3 响应式导航栏组件。 经过简单的调试。 基本可实现描述的要求。
Nav.vue
<template>
<nav class="nav-container">
<div class="logo-container">
<img src="your-logo-here.svg" alt="logo" />
</div>
<div class="menu-container" :class="{ 'menu-open': menuOpen }">
<ul v-if="!isMobile">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Price</a></li>
<li><a href="#">Route</a></li>
<li><a href="#">other1</a></li>
<li><a href="#">other2</a></li>
</ul>
<div class="burger-icon" @click="toggleMenu" v-if="isMobile">
<div v-if="!menuOpen" class="burger-bars"></div>
<div v-else class="burger-close">
<div class="line1"></div>
<div class="line2"></div>
</div>
</div>
<ul class="mobile-menu" v-if="isMobile && menuOpen">
<li><a href="#" @click="toggleMenu">Home</a></li>
<li><a href="#" @click="toggleMenu">About Us</a></li>
<li><a href="#" @click="toggleMenu">Price</a></li>
<li><a href="#" @click="toggleMenu">Route</a></li>
<li><a href="#" @click="toggleMenu">Other1</a></li>
<li><a href="#" @click="toggleMenu">Other2</a></li>
</ul>
</div>
</nav>
</template>
<script setup>
import { ref, computed } from 'vue';
const menuOpen = ref(false);
const isMobile = ref(window.innerWidth < 768);
window.addEventListener('resize', () => {
isMobile.value = window.innerWidth < 768;
});
const toggleMenu = () => {
menuOpen.value = !menuOpen.value;
};
</script>
<style scoped>
.nav-container {
display: flex;
justify-content: space-between;
height: 100px;
align-items: center;
padding: 0.5rem 1rem;
background-color: #333;
}
.logo-container img {
height: 30px;
}
.menu-container {
display: flex;
align-items: center;
}
.menu-container ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu-container ul li {
margin-right: 1rem;
}
.menu-container .mobile-menu li {
margin-right: 0;
}
.menu-container ul li a {
color: #fff;
text-decoration: none;
}
.burger-icon {
display: flex;
justify-content: center;
height: 30px;
align-items: center;
cursor: pointer;
}
.burger-bars {
width: 25px;
height: 3px;
background-color: #fff;
position: relative;
}
.burger-bars::before,
.burger-bars::after {
content: '';
width: 100%;
height: 3px;
background-color: #fff;
position: absolute;
}
.burger-bars::before {
top: -8px;
}
.burger-bars::after {
bottom: -8px;
}
.burger-close {
position: relative;
width: 25px;
height: 3px;
}
.line1,
.line2 {
width: 100%;
height: 3px;
background-color: #fff;
position: absolute;
}
.line1 {
transform: rotate(45deg);
}
.line2 {
transform: rotate(-45deg);
}
.mobile-menu {
display: flex;
flex-direction: column;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 100px;
left: 0;
background-color: #333;
width: 100%;
height: calc(100vh - 100px);
overflow-y: auto;
}
.mobile-menu li a {
color: #fff;
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
}
.mobile-menu li a:hover {
background-color: #444;
}
</style>好博客就要一起分享哦！分享海报
此处可发布评论
评论（0）展开评论
暂无评论，快来写一下吧
展开评论
