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

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

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

本文實例為大家分享了Vue.js下拉菜單組件的具體實現(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">點擊顯示下拉菜單</button>
  <div class="dropdown" v-show="show">
  <p>下拉框的內(nèi)容，點擊外面區(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>

根實例 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;
}

更多教程點擊《Vue.js前端組件學習教程》，歡迎大家學習閱讀。

關(guān)于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。

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

您可能感興趣的文章:

相關(guān)文章

使用vue-router切換頁面時，獲取上一頁url以及當前頁面url的方法
這篇文章主要介紹了使用vue-router切換頁面時，獲取上一頁url以及當前頁面url的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05
Vue項目實現(xiàn)換膚功能的一種方案分析
這篇文章主要介紹了Vue項目實現(xiàn)換膚功能的一種方案分析，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-08-08
vue element upload組件 file-list的動態(tài)綁定實現(xiàn)
這篇文章主要介紹了vue element upload組件 file-list的動態(tài)綁定實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-10-10
vue獲取驗證碼倒計時組件
這篇文章主要為大家詳細介紹了vue獲取驗證碼倒計時組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-08-08
使用Vue做一個簡單的todo應用的三種方式的示例代碼
這篇文章主要介紹了使用Vue做一個簡單的todo應用的三種方式的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
Vue3實現(xiàn)clipboard復制的使用示例
在日常開發(fā)中,為用戶提供復制文本功能的需求比較常見,下面介紹一款vue3可用的插件,可以快速實現(xiàn)這個功能,感興趣的可以了解一下
2023-11-11
Vue.JS入門教程之處理表單
這篇文章主要為大家詳細介紹了Vue.JS入門教程之處理表單,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
vue點擊input彈出帶搜索鍵盤并監(jiān)聽該元素的方法
今天小編就為大家分享一篇vue點擊input彈出帶搜索鍵盤并監(jiān)聽該元素的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
一文詳細分析Vue3中的emit用法(子傳父)
Emit是Vue3中另一種常見的組件間傳值方式,它通過在子組件中觸發(fā)事件并將數(shù)據(jù)通過事件參數(shù)傳遞給父組件來實現(xiàn)數(shù)據(jù)傳遞,這篇文章主要給大家介紹了關(guān)于詳細分析Vue3中emit用法(子傳父)的相關(guān)資料,需要的朋友可以參考下
2024-05-05
el-select 點擊按鈕滾動到選擇框頂部的實現(xiàn)代碼
本文通過實例代碼給大家分享el-select 點擊按鈕滾動到選擇框頂部效果,主要代碼是在visibleChange在這個popper里面找到.el-select-dropdown__list,感興趣的朋友跟隨小編一起看看吧
2024-05-05