vue實(shí)現(xiàn)鼠標(biāo)移過(guò)出現(xiàn)下拉二級(jí)菜單功能
1.我曾經(jīng)聽(tīng)一位快十年前端大佬說(shuō)過(guò)一句話,就是能用css實(shí)現(xiàn)的動(dòng)畫,就用css不要用js去實(shí)現(xiàn) 因?yàn)樵阡秩旧蟘ss肯定比js效果更好
我用jquery曾經(jīng)實(shí)現(xiàn)過(guò)鼠標(biāo)點(diǎn)擊 出現(xiàn)下拉菜單 有點(diǎn)和面包屑 和標(biāo)簽頁(yè)導(dǎo)航類似 后來(lái)參加工作了 公司一直在用vue 所以很多用jqeury寫的項(xiàng)目都要用vue來(lái)重構(gòu) 這其中不免碰見(jiàn)了有一些動(dòng)畫效果 雖然很簡(jiǎn)單
我也曾想著就用jquery去實(shí)現(xiàn)吧 代碼多一點(diǎn)無(wú)所謂了 但最后卻不是這樣 vue好像和jquery中的有些插件沖突了 只要vue已導(dǎo)入 那些用jquery實(shí)現(xiàn)的動(dòng)畫 就不能用 但又不能不用vue 沒(méi)辦法 這些效果只能用vue來(lái)實(shí)現(xiàn)了
vue官方提供了一種動(dòng)畫效果 是 transition 下面是vue官方的經(jīng)典例子
vue監(jiān)聽(tīng)的元素 一旦從dom樹(shù) 發(fā)生類似 刪除 重新創(chuàng)建 =》 removeElement createElement display:block; display:none;
對(duì)應(yīng) vue中的 v-if 和 v-show 就可以算是觸發(fā)一種動(dòng)畫效果 從用戶角度來(lái)說(shuō)都是 上面?zhèn)z種情況都是從無(wú)到有的出現(xiàn)在界面上
.fade-enter-active, .fade-leave-active { //定義元素 進(jìn)入頁(yè)面時(shí)和離開(kāi)頁(yè)面時(shí)的 效果 transition: opacity .5s; // 設(shè)置透明度默認(rèn)是1 1是不透明 0是全透明 全透明相當(dāng)于消失在頁(yè)面上 transition css3的過(guò)度效果 } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; //設(shè)置元素進(jìn)入 前和離開(kāi)后都是純透明狀態(tài) }
// 設(shè)置一個(gè)按鈕 通過(guò)v-show 控制元素的顯示隱藏 <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> // <transition name="fade"></transition> 這個(gè)是必須的 <p v-if="show">hello</p> //這里的name 和css樣式中的那個(gè) fade也是一致的 讓p元素display block和node之間切換 </transition> </div> var app1=new Vue({ el:'#app',//或者'#app' data:{ show:false //vue實(shí)例 定義一個(gè)變量 } })
上面的這個(gè)例子算是 vue中經(jīng)典的例子了 如果你不想寫 樣式的話 你可以結(jié)合第三方插件庫(kù) 也可以快速實(shí)現(xiàn)vue中的動(dòng)畫效果
我這里用的是 animate.css動(dòng)畫庫(kù)
<link rel="stylesheet" type="text/css"> //cdn <div> <button @click="show = !show"> 點(diǎn)擊 </button> <transition name="custom-classes-transition" //使用 animate.css 雖然只是寫個(gè)類名 但前面不要忘記寫 enter-active-class="animated slideInDown" //animated 再寫 你要運(yùn)用的動(dòng)畫名稱 leave-active-class="animated slideInUp" > <p v-if="show">hello</p> </transition> </div>
vue實(shí)例和上面的一模一樣就不寫了 下面 我附上 animate.css的地址
https://daneden.github.io/animate.css/
3.其實(shí)吧 在工作中 你可能就實(shí)現(xiàn)一個(gè)小動(dòng)畫 好像沒(méi)必要引進(jìn)那么大的animate插件庫(kù) 我在工作中就用的方法1 除非你的項(xiàng)目要大量用到動(dòng)畫 并且需要不同的表現(xiàn)效果 那還是推薦使用插件庫(kù)
下面 我說(shuō)我的實(shí)際工作怎么解決的
我要實(shí)現(xiàn)一個(gè)鼠標(biāo)移過(guò)出現(xiàn)下拉菜單
.fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; }
// 這里是鼠標(biāo)移動(dòng)過(guò)給show 賦值每一個(gè)遍歷li的下標(biāo) 離開(kāi)賦值給-1
// 童鞋們知道為啥賦值成-1嗎 因?yàn)橹拔屹x值給false 發(fā)現(xiàn)下標(biāo)是0的時(shí)候跟false是相等的 這個(gè)算是疏忽了
//這樣就實(shí)現(xiàn)了 鼠標(biāo)移動(dòng)過(guò) 不同的li會(huì)出現(xiàn)當(dāng)前l(fā)i下的的下拉菜單 動(dòng)畫 經(jīng)理也沒(méi)說(shuō)非要拿嗎高級(jí) 所以沒(méi)有在寫出什么復(fù)雜的動(dòng)畫說(shuō)實(shí)話 本人實(shí)力暫時(shí)也不是很強(qiáng) 哈哈 這里的i和show 都是變量 所以可以直接在@mouseover事件中使用 很多童鞋可能忘記了這種用法 只知道 事件后面一定要綁定方法 其實(shí)給變量賦值 也是可以的
<li class="nLi" v-for="(v,i) of itemList" @mouseover="show=i" @mouseout="show=-1"> <h3><a href="">企業(yè)文化</a>|</h3> <transition name="fade"> <div class="sub" v-show="show==i"> <ul> <li><a href="">公司理念</a></li> <li><a href="">發(fā)展戰(zhàn)略</a></li> <li><a href="">發(fā)展歷程</a></li> </ul> </div> </transition> </li> var app1=new Vue({ el:'#app',//或者'#app' data:{ show:-1 //vue實(shí)例 定義一個(gè)變量 } })
好了 這個(gè)算是今天的一個(gè)小收獲 到此結(jié)束 我會(huì)持續(xù)更新把碰見(jiàn)的問(wèn)題 共享出來(lái) 讓很多童鞋少走彎路 本人一直在向大牛的路上努力前進(jìn)著
總結(jié)
以上所述是小編給大家介紹的vue實(shí)現(xiàn)鼠標(biāo)移過(guò)出現(xiàn)下拉二級(jí)菜單,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- Vue+Element UI 樹(shù)形控件整合下拉功能菜單(tree + dropdown +input)
- 解決vue動(dòng)態(tài)下拉菜單 有數(shù)據(jù)未反應(yīng)的問(wèn)題
- vue實(shí)現(xiàn)帶過(guò)渡效果的下拉菜單功能
- Vue.js下拉菜單組件使用方法詳解
- 淺談Vue.js中如何實(shí)現(xiàn)自定義下拉菜單指令
- vue下拉菜單組件(含搜索)的實(shí)現(xiàn)代碼
- Vue實(shí)現(xiàn)自定義下拉菜單功能
- 詳解Vue用自定義指令完成一個(gè)下拉菜單(select組件)
- vue實(shí)現(xiàn)下拉菜單樹(shù)
相關(guān)文章
VUE3中watch監(jiān)聽(tīng)使用實(shí)例詳解
watch函數(shù)用來(lái)偵聽(tīng)特定的數(shù)據(jù)源,并在回調(diào)函數(shù)中執(zhí)行副作用,下面這篇文章主要給大家介紹了關(guān)于VUE3中watch監(jiān)聽(tīng)使用的相關(guān)資料,需要的朋友可以參考下2022-06-06基于vue實(shí)現(xiàn)多功能樹(shù)形結(jié)構(gòu)組件的示例代碼
一個(gè)優(yōu)雅展示樹(shù)形結(jié)構(gòu)數(shù)據(jù)的 Vue 組件,遞歸渲染每個(gè)節(jié)點(diǎn)及其子節(jié)點(diǎn),支持自定義顏色、文本和布局,通過(guò)獨(dú)特的樣式巧妙處理不同層級(jí),為用戶打造豐富的視覺(jué)盛宴,文中通過(guò)代碼給大家介紹的非常詳細(xì),感興趣的同學(xué)可以自己動(dòng)手嘗試一下2024-02-02vue 動(dòng)態(tài)設(shè)置瀏覽器標(biāo)題的方法詳解
這篇文章主要為大家介紹了vue動(dòng)態(tài)設(shè)置瀏覽器標(biāo)題的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-12-12Vue兩個(gè)版本的區(qū)別和使用方法(更深層次了解)
在我們使用 vue時(shí),我們可以引用兩個(gè)不同版本的 Vue,分別是 Vue完整版(vue.js)和 Vue(vue.runtime.js )非完整版,那么它們的區(qū)別是什么呢,今天我們就來(lái)分析下這兩個(gè)不同版本之間的區(qū)別,一起看看吧2020-02-02vue項(xiàng)目使用electron-builder庫(kù)打包成桌面程序的過(guò)程
這篇文章主要介紹了vue項(xiàng)目使用electron-builder庫(kù)打包成桌面程序的過(guò)程,本文給大家介紹如何使用electron-builder這個(gè)庫(kù)結(jié)合實(shí)例代碼給大家講解的非常詳細(xì),感興趣的朋友一起看看吧2024-02-02Vue 頁(yè)面權(quán)限控制和登陸驗(yàn)證功能的實(shí)例代碼
這篇文章主要介紹了Vue 頁(yè)面權(quán)限控制和登陸驗(yàn)證功能的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06使用Vue實(shí)現(xiàn)移動(dòng)端左滑刪除效果附源碼
這篇文章主要介紹了使用Vue實(shí)現(xiàn)移動(dòng)端左滑刪除效果,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05