vue實(shí)現(xiàn)下拉菜單效果
本文實(shí)例為大家分享了vue實(shí)現(xiàn)下拉菜單效果的具體代碼,供大家參考,具體內(nèi)容如下
下拉菜單主要運(yùn)用了hover顯示與隱藏以及定位的問題
效果圖:
可能出現(xiàn)的問題
定位后菜單的div無法自適應(yīng)(寬度由定位的父元素決定導(dǎo)致?lián)Q行)
div { ?? ?white-space: nowrap; ?? ?width: auto; }
制作下拉菜單時(shí),a標(biāo)簽列表根據(jù)最大的內(nèi)容自適應(yīng)寬度撐滿盒子
a { ?? ?display: block; ?? ?width: 100%; }
CSS下拉菜單鼠標(biāo)移入菜單內(nèi)容時(shí),菜單隱藏消失的問題
首先,我們用 css 寫下拉菜單,一般過程是這樣:一個(gè)大的父元素框架—— drop-list ,包含一個(gè)觸發(fā)下拉菜單的起點(diǎn)—— drop-text,和一個(gè)菜單內(nèi)容——drop-content,鼠標(biāo)移動(dòng)到父元素上時(shí),下拉菜單顯示,鼠標(biāo)移開時(shí),菜單內(nèi)容隱藏。
按照道理來說,鼠標(biāo)放置父元素整體范圍是不會(huì)收起菜單內(nèi)容的,經(jīng)過排錯(cuò)后發(fā)現(xiàn),drop-content與 drop-text 存在空隙,鼠標(biāo)移動(dòng)到那個(gè)縫隙時(shí),就離開了父元素,所以會(huì)存在鼠標(biāo)移動(dòng)時(shí),菜單內(nèi)容收起的情況。
解決方法:
1、讓空隙消失,設(shè)置 droptext 的下外邊距為0即 margin-bottom:0; drop-content 的上外邊距為0 即 margin-top:0。
2、若需要間隙可以在drop-content內(nèi)包裹一層在里面設(shè)置間隙,把drop-content透明隱藏。
代碼如下:
<template> ? <div class="container"> ? ? <div class="dropdown"> ? ? ? <!-- 標(biāo)題 --> ? ? ? <span class="dropdown-title"> 下拉菜單 </span> ? ? ? <!-- 下拉菜單內(nèi)容 --> ? ? ? <div class="dropdown-content"> ? ? ? ? <div class="dropdown-menu"> ? ? ? ? ? <div class="menuItem">菜單1</div> ? ? ? ? ? <div class="menuItem">菜單菜單1</div> ? ? ? ? ? <div class="menuItem">菜單2</div> ? ? ? ? ? <div class="menuItem">菜單菜單菜單1</div> ? ? ? ? ? <div class="menuItem">菜單3</div> ? ? ? ? </div> ? ? ? </div> ? ? </div> ? </div> </template> <script> export default { ? data() { ? ? return {}; ? }, ? mounted() {}, ? methods: {}, }; </script> <style lang="scss" scoped> .container { ? padding: 20px; } .dropdown { ? margin: 0 20px; ? .dropdown-title { ? ? display: inline-block; ? ? position: relative; ? ? height: 60px; ? ? line-height: 60px; ? ? font-size: 20px; ? ? color: #fff; ? ? background-color: #000; ? ? padding: 0 24px; ? ? border-radius: 4px; ? ? cursor: pointer; ? ? // transition: all 1s ease-in-out; ? } ? .dropdown-content { ? ? // 定位顯示局域 ? ? position: absolute; ? ? visibility: hidden; // 隱藏 ? ? opacity: 0; // 隱藏 ? ? transition: all 0.6s ease-in-out; ? ? .dropdown-menu { ? ? ? margin-top: 4px; ?// 與title制造距離 ? ? ? padding: 10px 8px 15px; // 給下面多留一點(diǎn)距離,抵消視覺差 ? ? ? color: white; ? ? ? background-color: rgba($color: #000, $alpha: 0.8); ? ? ? border-radius: 4px; ? ? ? .menuItem { ? ? ? ? width: 100%; ?// 自適應(yīng)寬度 ? ? ? ? white-space: nowrap; ? ? ? ? padding: 10px 16px; ? ? ? ? font-size: 16px; ? ? ? ? color: white; ? ? ? ? cursor: pointer; ? ? ? ? border-radius: 4px; ? ? ? ? &:hover { ? ? ? ? ? background-color: #ccc; ? ? ? ? } ? ? ? } ? ? } ? } ? &:hover .dropdown-content { ? ? visibility: visible; ? ? opacity: 1; ? } } </style>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue+Element UI實(shí)現(xiàn)下拉菜單的封裝
- vue+element實(shí)現(xiàn)下拉菜單并帶本地搜索功能示例詳解
- vue實(shí)現(xiàn)下拉菜單樹
- 解決vue動(dòng)態(tài)下拉菜單 有數(shù)據(jù)未反應(yīng)的問題
- vue實(shí)現(xiàn)帶過渡效果的下拉菜單功能
- Vue.js下拉菜單組件使用方法詳解
- 淺談Vue.js中如何實(shí)現(xiàn)自定義下拉菜單指令
- vue下拉菜單組件(含搜索)的實(shí)現(xiàn)代碼
- Vue實(shí)現(xiàn)自定義下拉菜單功能
- 詳解Vue用自定義指令完成一個(gè)下拉菜單(select組件)
相關(guān)文章
解決vue中菜單再次點(diǎn)擊內(nèi)容不刷新問題
當(dāng)elementUI中菜單打開后,再次點(diǎn)擊不會(huì)刷新的問題,導(dǎo)致菜單再次點(diǎn)擊不刷新的根本原因是頁面打開后,再次打開相同的頁面是不會(huì)刷新的,這應(yīng)該是框架的機(jī)制就是如此,小編整理了兩個(gè)比較不錯(cuò)的解決方法,需要的朋友可以參考下2023-08-08關(guān)于vue中對(duì)window.openner的使用指南
opener屬性是一個(gè)可讀可寫的屬性,可返回對(duì)創(chuàng)建該窗口的Window對(duì)象的引用,下面這篇文章主要給大家介紹了關(guān)于vue中對(duì)window.openner使用的相關(guān)資料,需要的朋友可以參考下2022-11-11vue監(jiān)聽瀏覽器原生返回按鈕,進(jìn)行路由轉(zhuǎn)跳操作
這篇文章主要介紹了vue監(jiān)聽瀏覽器原生返回按鈕,進(jìn)行路由轉(zhuǎn)跳操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue-cli3項(xiàng)目在IE瀏覽器打開兼容問題及解決
這篇文章主要介紹了vue-cli3項(xiàng)目在IE瀏覽器打開兼容問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08