Vue3導航欄元件封裝實現方法
阿新 • • 發佈:2021-09-15
在3中封裝一個導航欄元件,並且實現,隨著滾動條滾動實現一個吸頂效果,供大家參考
導航欄元件的效果圖:
滾動條滾動以後的吸頂效果示意圖:
具體程式碼展示:
<template> <header class="app-header"> <div class="container"> <!-- 頭部導航區域 --> <HeaderNavCommon /> <div class="search"> <i class="iconfont icon-search"></i> <input type="text" placeholder="搜一搜" /> </div> <div class="cart"> <a href="#" class="curr"> <i class="iconfont icon-cart"></i> <em>2</em> </a> </div> </div> </header> </template> <script> import HeaderNavCommon from '@/components/header-nav-common.vue' export default { name: 'AppHeader',components: { HeaderNavCommon } } </script> <style scoped lang="less"> .app-header { background: #fff; .container { display: flex; align-items: center; } .navs { width: 820px; display: flex; justify-content: space-around; padding-left: 40px; li { margin-right: 40px; width: 38px; text-align: center; a { display: inline-block; font-size: 16px; line-height: 32px; height: 32px; } &:hover { a { color: @xtxColor; border-bottom: 1px solid @xtxColor; } } } } .search { width: 170px; height: 32px; www.cppcns.composition: relative; border-bottom: 1px solid #e7e7e7; line-height: 32px; .icon-search { font-size: 18px; margin-left: 5px; } input { width: 140px; padding-left: 5px; color: #666; } } .cart { width: 50px; .curr { height: 32px; line-height: 32px; text-align: center; position: relative; display: block; .icon-cart { font-size: 22px; } em { font-style: normal; position: absolute; right: 0; top: 0; padding: 1px 6px;line-height: 1; background: @helpColor; color: #fff; font-size: 12px; border-radius: 10px; font-family: Arial; } } } } </style>
中間選單部門單獨封裝一個元件,實現兩個元件的複用 (HeaderNavCommon元件)
<template> <ul class="app-header-nav"> <li class="home"><RouterLink to="/">首頁</RouterLink></li> <li><a href="#" >美食</a></li> <li><a href="#" >餐廚</a></li> <li><a href="#" >藝術</a></li> <li><a href="#" >電器</a></li> <li><a href="#" >居家</a></li> <li><a href="#" >洗護</a></li> <li><a href="#" >孕嬰</a></li> <li><a href="#" >服裝</a></li> <li><a href="#" >雜貨</a></li> </ul> </templwww.cppcns.comate> <script> export default { name: 'AppHeaderNav' } </script> <style scoped lang='less'> .app-header-nav { width: 820px; display: flex; padding-left: 40px; position: relative; z-index: 998; li { margin-right: 40px; width: 38px; text-align: center; a { font-size: 16px; line-height: 32px; height: 32px; display: inline-block; } &:hover { a { color: @xtxColor; border-bottom: 1px solid @xtxColor; } } } } </style>
封裝吸頂效果的元件
<template>
<div class="app-header-sticky" :class="{ show: top >= 78 }">
<div class="container" v-if="top >= 78">
<!-- 中間 -->
<HeaderNavCommon />
<!-- 右側按鈕 -->
<div class="right">
<RouterLink to="/">品牌</RouterLink>
<RouterLink to="/">專題</RouterLink>
</div>
</div>
</div>
</template>
<script>
import HeaderNavCommon from '@/components/header-nav-common.vue'
// import { ref } from 'vue'
import { useWindowScroll } from '@vueuse/core'
export default {
name: 'AppHeaderSticky',components: { HeaderNavCommon },setup() {
// 頁面滾動距離
// const top = ref(0)
// window.onscroll = () => {
// top.value = document.documentElement.scrollTop
// }
// 頁面滾動利用第三方包
const { y: top } =www.cppcns.com useWindowScroll()
return { top }
}
}
</script>
<style scoped lang="less">
.app-header-sticky {
width: 100%;
height: 80px;
position: fixed;
left: 0;
top: 0;
z-index: 999;
background-color: #fff;
border-bottom: 1px solid #e4e4e4;
// 此處為關鍵樣式!!!
// 預設情況下完全把自己移動到上面
transform: translateY(-100%);
// 完全透明
opacity: 0;
// 顯示出來的類名
&.show {
transition: all 0.3s linear;
transform: none;
opacity: 1;
}
.container {
display: flex;
align-items: center;
}
.right {
width: 220px;
display: flex;
text-align: center;
padding-left: 40px;
border-left: 2px solid @xtxColor;
a {
width: 38px;
margin-right: 40px;
font-size: 16px;
line-height: 1;
&:hover {
color: @xtxColor;
}
}
}
}
</style>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。