這篇文章給大家介紹使用vue怎么實現(xiàn)下拉菜單組件，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)是專業(yè)的武陵源網(wǎng)站建設(shè)公司，武陵源接單;提供網(wǎng)站設(shè)計制作、網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行武陵源網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

子組件 dropdown.vue

 .list-and-search{
 background: #fff;
 border: 1px solid #ccc;
 display: none;
  &.on{
   display: block;
  }
 }
 .cur-name{
 height: 32px;
 line-height: 32px;
 text-indent: 10px;
 position: relative;
 color: #777;
 &:after{
 position: absolute;
  right: 9px;
  top: 13px;
  content: " ";
  width: 0;
  height: 0;
  border-right: 6px solid transparent;
  border-top: 6px solid #7b7b7b;
  border-left: 6px solid transparent;
  border-bottom: 6px solid transparent;
 }
 &.show{
 &:after{
 right: 9px;
  top: 6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #7b7b7b;
  border-left: 6px solid transparent;
  border-top: 6px solid transparent;
 }
 }
 }
 .vue-dropdown.default-theme {
  width: 200px;
  z-index:10;
  border-radius:3px; 
  border: 1px solid #ccc;
  cursor: pointer;
  -webkit-user-select:none; 
 user-select:none;
  &._self-show {
   display: block!important;
  }
  .search-module {
   position: relative;
   border-bottom: 1px solid #ccc;
   .search-text {
    width: 100%;
    height: 30px;
    text-indent: 10px;
    // border-radius: 0.5em;
    box-shadow: none;
    outline: none;
    border: none;
    // &:focus {
    //  border-color: #2198f2;
    // }
   }
   .search-icon {
    position: absolute;
    top: 24%;
    right: 0.5em;
    color: #aaa;
   }
  }
  input::-webkit-input-placeholder{
   font-size: 14px;
  }
  .list-module {
   max-height: 200px;
   overflow-y: auto;
   li {
    &._self-hide {
     display: none;
    }
    margin-top: 0.4em;
    padding: 0.4em;
    &:hover {
     cursor:pointer;
     color: #fff;
     background: #00a0e9;
    }
   }
  }
 }
 .tip-nodata {
  font-size: 14px;
  padding: 10px 0;
  text-indent: 10px;
 }

父組件調(diào)用

import Dropdown from '@/components/dropdown.vue'
export default {
 data() {
 return {
  itemlist: {
  cur: {
   val: "",
   name: "所有產(chǎn)品"
  },
  data: [{
   val: "",
   name: "所有產(chǎn)品"
  }, {
   val: 1,
   name: "夢幻西游"
  }, {
   val: 2,
   name: "夢幻無雙"
  }, {
   val: 3,
   name: "大話西游"
  }]
  },
 }
 },
 components: {
 Dropdown,
 },
 methods :{
 dropDownClick(e) {
  console.log(e.name, e.val)
 }
 }
}

關(guān)于使用vue怎么實現(xiàn)下拉菜單組件就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

本文名稱：使用vue怎么實現(xiàn)下拉菜單組件-創(chuàng)新互聯(lián)
文章URL：http://weahome.cn/article/cdphhe.html