Vue.js下拉菜單組件使用方法詳解

更新時間：2019年10月19日 16:36:29 作者：吳聲子夜歌

這篇文章主要為大家詳細(xì)介紹了Vue.js下拉菜單組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue.js下拉菜單組件的具體實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下

效果

#### 入口頁面 index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>可從外部關(guān)閉的下拉菜單</title>
 <link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
 <div id="app" v-cloak>
 <div class="main" v-clickoutside="handleClose">
  <button @click="show = !show">點(diǎn)擊顯示下拉菜單</button>
  <div class="dropdown" v-show="show">
  <p>下拉框的內(nèi)容，點(diǎn)擊外面區(qū)域可以關(guān)閉</p>
  </div>
 </div>
 </div>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="clickoutside.js"></script>
 <script src="index.js"></script>
</body>
</html>

根實(shí)例 index.js

var app = new Vue({
 el: '#app',
 data: {
 show: false
 },
 methods: {
 handleClose () {
  this.show = false;
 }
 }
});

下拉框組件 clickoutside.js

Vue.directive('clickoutside',{
 bind: function (el, binding, vnode) {
 function documentHandler(e) {
  if(el.contains(e.target)){
  return false;
  }
  if(binding.expression){
  binding.value(e);
  }
 }
 el.__vueClickOutside__ = documentHandler;
 document.addEventListener('click',documentHandler);
 },
 unbind: function (el, binding) {
 document.removeEventListener('click', el.__vueClickOutside__);
 delete el.__vueClickOutside__;
 }
});

樣式表

[v-cloak]{
 display: none;
}
.main{
 width: 125px;
}
button{
 display: block;
 width: 100%;
 color: #fff;
 background-color: #39f;
 border: 0;
 padding: 6px;
 text-align: center;
 font-size: 12px;
 border-radius: 4px;
 cursor: pointer;
 outline: none;
 position: relative;
}
button:active{
 top:1px;
 left: 1px;
}
.dropdown{
 width:100%;
 height: 150px;
 margin: 5px 0;
 font-size: 12px;
 background-color: #fff;
 border-radius: 4px;
 box-shadow: 0 1px 6px rgba(0,0,0,.2);
}
.dropdown p{
 display: inline-block;
 padding: 6px;
}

更多教程點(diǎn)擊《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue Router應(yīng)用方法詳解
在看這篇文章的幾點(diǎn)要求：需要你先知道Vue-Router是個什么東西，用來解決什么問題，以及它的基本使用。如果你還不懂的話，建議上官網(wǎng)了解下Vue-Router的基本使用后再回來看這篇文章
2022-09-09
vue之計算屬性的緩存computed的用法解讀
這篇文章主要介紹了vue之計算屬性的緩存computed的用法解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-11-11
vue+element遇到的坑及解決
這篇文章主要介紹了vue+element遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue如何清空對象
這篇文章主要介紹了Vue如何清空對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue中子組件調(diào)用父組件的3種方法實(shí)例
vue子組件調(diào)用父組件的方法其實(shí)不難,最近整理了一下,下面這篇文章主要給大家介紹了關(guān)于Vue中子組件調(diào)用父組件的3種方法,需要的朋友可以參考下
2022-05-05
Vue腳手架的創(chuàng)建超詳解步驟
這篇文章主要給大家介紹了關(guān)于Vue腳手架創(chuàng)建的相關(guān)資料,Vue腳手架是vue官方提供的標(biāo)準(zhǔn)化開發(fā)工具(平臺),文中通過代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01
Vue基礎(chǔ)教程之條件渲染和列表渲染
Vue會盡可能高效地渲染元素,通常會復(fù)用已有元素而不是從頭開始渲染。這么做會使Vue變得非?？?下面這篇文章主要給大家介紹了Vue基礎(chǔ)教程之條件渲染和列表渲染的相關(guān)資料,需要的朋友可以參考下
2021-11-11
vue實(shí)現(xiàn)消息的無縫滾動效果的示例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)消息的無縫滾動效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
Javascript結(jié)合Vue實(shí)現(xiàn)對任意迷宮圖片的自動尋路
本文將結(jié)合實(shí)例代碼介紹Javascript結(jié)合Vue實(shí)現(xiàn)對任意迷宮圖片的自動尋路，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
vue路由中前進(jìn)后退的一些事兒
這篇文章主要給大家介紹了關(guān)于vue路由中前進(jìn)后退的一些事兒，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue路由具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05