最近都是用element-ui 在協(xié)助自己的項目開發(fā)递览，用著用著就想看看餓了么是怎么實現(xiàn)組件的使用的叼屠，于是就想自己動手也來寫，當(dāng)然绞铃，我是要循序漸進(jìn)的镜雨，從最開始最簡單的組件定義開始《酰總的寫了三個小組件荚坞，我按照我自己覺得難度等級，分別定義為基礎(chǔ)版纯命，打怪版西剥，終極版。

項目在線demo

項目在線演示demo（切換到移動端調(diào)試模式哦）

項目github地址

項目github地址

嗯亿汞，在寫之前瞭空，我先說一下，我會這篇文章中寫下面三個小組件中的其中兩個。分別如下所示:

• 基于vue的backTop 返回頂部小組件 --------- 普通版
• 基于vue的下拉菜單小組件 ----------打怪版
• 基于vue的側(cè)邊欄導(dǎo)航菜單的小組件 ------------------終極版

在編寫組件的時候咆畏，復(fù)用組件是很有好處的南捂。可復(fù)用組件應(yīng)該有一個清晰的公共接口旧找。
Vue組件的API來自三個部分：props events slots

• props: 允許外部環(huán)境傳遞數(shù)據(jù)給組件溺健。
• Events: 允許組件對外部環(huán)境產(chǎn)生副作用。
• Slots: 允許外部環(huán)境將額外的內(nèi)容組合在組件內(nèi)部钮蛛。

那么，其實我們可以用v-bind和v-on的簡寫語法，來使得模板清楚簡潔：

// 這是我寫的backTop 組件的調(diào)用方法偷遗。
<back-top　:scrollmyself = 'true'></back-top>   // 用props將外部環(huán)境數(shù)據(jù)傳遞進(jìn)去氏豌。

額箩溃，我覺得還是直接動手開始做吧歪架，會比較實在一點，那就從最簡單的backTop組件開始吧。

一 基礎(chǔ)版： backTop返回頂部組件催束。

1.1最終的實現(xiàn)效果：

頁面右下角就是自己封裝的backtop組件摘昌。

test.gif

1.2 外部組件調(diào)用的方式：

<back-top　:scrollmyself = 'true'></back-top>   //這個scrollmyself是傳進(jìn)去組件的props值露泊，

1.3 組件自定義方式

先說一下功能情況脖咐，這個backTop組件的作用就是偿凭，當(dāng)頁面存在滾動條，或者頁面中某個局部有存在滾動條悬垃，當(dāng)頁面滾動到一定位置之后，頁面就會出現(xiàn)點擊返回頂部的按鈕载庭，點擊之后就會返回頂部看彼，此時返回頂部的icon消失扇谣。

• 1 .定義組件的基本功能結(jié)構(gòu)
• 2 . 定義組件的install將組件export出去
• 3 在項目的main.js中使用調(diào)用組件。

首先看一下文件結(jié)構(gòu)：

image.png

1 backtop內(nèi)部的main.vue文件
-------- template模板
----------組件名： name： BackTop
----------props: 定義props數(shù)據(jù)格式闲昭，默認(rèn)為false罐寨；true的時候當(dāng)前發(fā)生滾動的對象就是內(nèi)部引用該組件的父組件，為false的時候就是window對象序矩。

<template>
<transition name='slide-fade'>
    <div class='page-component-up' v-show='isShow' @click='getTop'>
    <i class='tri'></i>
  </div>
</transition>
</template>
<script>
export default {
  name: 'BackTop',  // 這個是export出去的組件名鸯绿，我定義為BackTop
  props: {
    scrollmyself: {
      type: Boolean,  // 這是選擇滾動對象的props值，如果滾動的對象是當(dāng)前組件的父元素簸淀，就設(shè)置scrollObj為true.如果沒有設(shè)置就默認(rèn)為window對象
      default: false
    }
  },
  data () {
    return {
      isShow: false,
      target: ''
    }
  },
  methods: {
//  添加樣式瓶蝴，鼠標(biāo)hover上去，改變顏色
    addhoverClass (e) {
      if (e.type === 'mouseover') {
        this.$el.classList.add('hover')
      } else if (e.type === 'mouseout') {
        this.$el.classList.remove('hover')
      }
    },
    showIcon () {
  //  根據(jù)scrollTop的值來判斷是否顯示返回頂部的icon
      if (this.target.scrollTop > 100) {
        this.isShow = true
        this.$el.addEventListener('mouseover', this.addhoverClass)
        this.$el.addEventListener('mouseout', this.addhoverClass)
      } else if (this.target.scrollTop < 100) {
        this.isShow = false
      }
    },
    getTop () {
// 點擊icon之后自動返回頂部的函數(shù)
      let timer = setInterval(() => {
        let top = this.target.scrollTop
        let speed = Math.ceil(top / 5)
        this.target.scrollTop = top - speed
        if (top === 0) {
          clearInterval(timer)
        }
      }, 20)
    }
  },
  mounted () {
    // 通過這個target來判斷當(dāng)前的滾動監(jiān)聽對象是誰
    if (this.scrollmyself) {
      this.target = this.$el.parentNode
    } else {
      this.target = document.body
    }
    this.target.addEventListener('scroll', this.showIcon)
  },
  beforeDestroy () {
   //  組件銷毀的時候租幕，需要刪除scroll的監(jiān)聽事件舷手。
    this.target.removeEventListener('scroll', this.showIcon)
  }
}
</script>

// CSS部分：

<style lang="scss" rel="stylesheet/scss">
  .slide-fade-enter-active {
     transition: all .1s ease;
  }
  .slide-fade-leave-active {
    transition: all .1s cubic-bezier(1.0, 0.3, 0.8, 1.0);
    opacity: 0;
  }
  .slide-fade-enter, .slide-fade-leave-to
   /* .slide-fade-leave-active 在低于 2.1.8 版本中 */ {
  // transform: translateY(-20px);
    opacity: 0;
  }
  .page-component-up {
    background-color: #4eb1fb;
    position: fixed;
    right: 3rem;
    bottom: 12rem;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    cursor: pointer;
    opacity: .4;
    transition: .3s;
    text-align: center;
    z-index: 999;
  }
  .tri {
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-bottom-color: #dfe6ec;
    text-align: center;
  }
  .hover {
    background-color: red;
  }
</style>

2 引出組件：

在我們的component的內(nèi)部的index.js文件中，我們需要將組件引出劲绪；

import BackTop from './backtop/src/main';

/* istanbul ignore next */
BackTop.install = function(Vue) {
  Vue.component(BackTop.name, BackTop);
};

export default BackTop;

3 在main.js內(nèi)部引用

import backTop from './myComponent/backtop'
Vue.use(backTop)

總結(jié)一下： 在上面這個backtop組件中男窟，用props進(jìn)行數(shù)據(jù)的傳遞，將數(shù)據(jù)傳遞給內(nèi)部組件贾富。
接下來這個側(cè)邊欄多級下拉導(dǎo)航側(cè)邊欄歉眷，實現(xiàn)的最終效果如下所示。

二 終極版本： sideBar側(cè)邊欄組件颤枪。

2.1 最終的實現(xiàn)效果：

側(cè)邊欄組件可以實現(xiàn)多級下拉菜單汗捡，同時也可以實現(xiàn)路由的跳轉(zhuǎn)，只要設(shè)置相應(yīng)的route值就可以畏纲。

test.gif

2.2 組件的基本結(jié)構(gòu)

因為這個組件是側(cè)邊欄組件扇住，有單個的子菜單，也有包含有下拉子菜單的菜單盗胀，同時艘蹋，所有我分成三個小的組件來實現(xiàn)。

同時也會使用slot來進(jìn)行內(nèi)容的分發(fā)读整。

基本的結(jié)構(gòu)如下所示：

image.png

其實這個組件對于我來說簿训，存在幾個難點咱娶。

• 1 首先這是一個可以多級下拉菜單的組件米间，那么基本的結(jié)構(gòu)和樣式就很重要，如何讓子菜單下的子菜單每次都依次往右邊移動大概20px的距離膘侮，可以凸顯出菜單之間的級別關(guān)系屈糊。

• 2 其次是點擊每一個含有子菜單的標(biāo)題，如何讓其顯示下拉菜單琼了，而且是下拉的樣式來顯示的逻锐，同時要保證再深一層次的下拉菜單不會顯示出來夫晌。

• 3 我會用一個props來從父組件向子組件傳遞數(shù)據(jù)，通過 props myVisible來控制導(dǎo)航側(cè)邊欄的出現(xiàn)與消失昧诱。同時你也會發(fā)現(xiàn)晓淀，通過點擊蒙板（在組件內(nèi)部定義）也可以實現(xiàn)側(cè)邊欄的消失，如何實現(xiàn)雙向數(shù)據(jù)傳遞呢盏档？

待會我會提到這兩個問題凶掰，不過我們可以先來看一下這個組件引入（怎么引入我待會說，跟上面的一樣）之后的使用范例：

 <my-menu :my-visible.sync = "visible">
      <!-- 這里的按鈕可以自己去封裝定義 -->
      <!-- <p slot='toggleBtn'>點我點我</p> -->
      <template slot="menu-title">我的個人助手小系統(tǒng)呀</template>
      <menu-item route='/'><i slot='icon' class=' iconfont icon-403010'></i>首頁</menu-item>
      <menu-item route='/DatePlan'><i slot='icon' class=' iconfont icon-403010'></i>DatePlan</menu-item>
      <menu-item route='/EatWhat'><i slot='icon'  class=' iconfont icon-chi'></i>今天吃什么</menu-item>
      <menu-item route='/memo'><i slot='icon'  class=' iconfont icon-beiwanglu'></i>備忘錄</menu-item>
      <menu-item route='/when'><i slot='icon'  class=' iconfont icon-fangjia'></i>什么時候放假</menu-item>
      <menu-item route='/icon'><i slot='icon'  class=' iconfont icon-pinrenpinkongxin'></i>拋硬幣</menu-item>
      <menu-item route='/mirror'><i slot='icon'  class=' iconfont icon-jingzi'></i>照鏡子</menu-item>   
      <my-submenu>
        <i slot="icon" class=' iconfont icon-jizhang'></i><template slot="submenu-title"></i>記賬</template>
        <menu-item route='/money'><i slot="icon" class=' fa fa-circle-o'></i>記賬首頁</menu-item>
        <menu-item route='/moneyRecord'><i slot="icon" class='fa fa-circle-o'></i>添加記賬</menu-item>
        <my-submenu>
          <i slot="icon" class='fa fa-circle-o'></i><template slot="submenu-title">這是有下拉菜單</template>
          <menu-item><i slot="icon" class=' fa fa-circle-o'></i>我是第一個</menu-item>
          <menu-item><i slot="icon" class=' fa fa-circle-o'></i>我是第二個</menu-item>
        </my-submenu>
         <my-submenu>
          <i slot="icon" class='fa fa-circle-o'></i><template slot="submenu-title">這是有下拉菜單</template>
          <menu-item><i slot="icon" class=' fa fa-circle-o'></i>我是第一個</menu-item>
          <menu-item><i slot="icon" class='fa fa-circle-o'></i>我是第二個</menu-item>
          <my-submenu>
            <i slot="icon" class='fa fa-circle-o'></i><template slot="submenu-title">這是有下拉菜單</template>
            <menu-item><i slot="icon" class=' fa fa-circle-o'></i>我是第一dddddd個</menu-item>
            <menu-item><i slot="icon" class=' fa fa-circle-o'></i>我是第二ddddddddddddd個</menu-item>
          </my-submenu>
        </my-submenu>
      </my-submenu>
    </my-menu>

基本的使用結(jié)構(gòu)蜈亩，可以認(rèn)真看例子代碼懦窘。具體的細(xì)節(jié)我就不說啦。

參數(shù)
[my-menu 組件] myVisible : 默認(rèn)為false,控制側(cè)邊欄的顯示與消失稚配。
[menu-item組件] route : 默認(rèn)為空畅涂，控制路由的跳轉(zhuǎn)。
slot
[my-menu 組件] menu-title: 控制菜單的標(biāo)題顯示
[menu-item組件] icon: icon圖標(biāo)的顯示道川。
[my-submenu組件] submenu-title: 子級菜單的標(biāo)題顯示午衰。icon: icon圖標(biāo)的顯示。

2.3 組件的代碼結(jié)構(gòu)

menu-item的結(jié)構(gòu)

難點實現(xiàn)：這個渲染之后是每一個不含有子菜單的菜單冒萄，那么問題來了苇经，當(dāng)有綁定路由對象的時候，點擊某個菜單的時候宦言，側(cè)邊欄菜單是要消失的扇单，那么如何，去告訴引用了menu-item組件的my-menu父組件去關(guān)閉呢奠旺？
解決方法：這里參考了餓了么組件的dispatch方法蜘澜，（dispatch文件就不po出來了），向父組件傳遞事件响疚。
引入了dispatch文件之后：
子組件中使用:this.dispatch('my-menu', 'closeByRoute')
監(jiān)聽的my-menu父組件：this.$on('closeByRoute', this.toggleShow)

<template>
    <li >
        <router-link href="#" style='color:white' :to='route' @click.native='handleRoute'>
          <slot name='icon'></slot>
          <span class='menutitle'><slot></slot></span></router-link>
      </li>
</template>
<script>
import dispatch from '../../utils/dispatch'
export default {
  name: 'menu-item',
  mixins: [dispatch],
  props: {
    route: {
      type: String,
      default: ' '
    }
  },
  methods: {
    handleRoute () {
      if (this.route) {
        this.dispatch('my-menu', 'closeByRoute') 
        // 使用dispatch進(jìn)行傳遞 this.dispatch(組件名鄙信， 觸發(fā)的事件名)
      }
    }
  }
}
</script>

my-menu的結(jié)構(gòu)

前面提到，my-menu組件是用props myVisible來實現(xiàn)側(cè)邊欄的顯示與消失忿晕。因為vue是不可以直接修改prop屬性的装诡，但是新版的vue可以使用sync來實現(xiàn)父子組件的雙向數(shù)據(jù)綁定。
只要在調(diào)用的時候践盼，使用 <my-menu :my-visible.sync = 'visible'></my-menu>
而在組件內(nèi)部鸦采，想要變更props值的時候，只需要添加 this.$emit('update:myVisible', !this.myVisible)來更新props屬性值就可以咕幻。

http://www.cnblogs.com/penghuwan/p/7473375.html#_label1 大家可以參考一下這篇文章渔伯。

這個組件的主要就是用props來控制顯示和隱藏。最主要的是toggleShow方法肄程，控制側(cè)邊欄的顯示和隱藏锣吼，通過添加一個togglehide 的類來判斷當(dāng)前的側(cè)邊欄是否是顯示的狀態(tài)选浑。

<template>
  <div class='sideBar togglehide' ref='barPart'>
    <div class='menuCover' @click='toggleMenu' ref='cover'></div>
    <ul class='menu'>
      <li class='list-title'><slot name="menu-title"></slot></li>
      <slot></slot>  
    </ul>
  </div>
</template>
<script>
export default {
  name: 'my-menu',
  props: {
    myVisible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    myVisible () {
      this.toggleShow()
    }
  },
  methods: {
    toggleMenu () {
      this.$emit('update:myVisible', !this.myVisible)
    },
    toggleShow () {
      let target = this.$refs.barPart
      let test = target.classList.contains('togglehide')
      if (!test) {
        target.classList.add('togglehide')
        this.$emit('closeBar') // 關(guān)閉導(dǎo)航標(biāo)簽的回調(diào)
        let OpenMenu = target.querySelectorAll('.openMenu')
        let OpenIcon = target.querySelectorAll('.openIcon')
        this.$refs.barPart.style.left = -this.$refs.barPart.offsetWidth + 'px'
        for (let i = 0; i < OpenMenu.length; i++) {
          OpenMenu[i].classList.remove('openMenu')
          OpenMenu[i].style.display = 'none'
        }
        for (let i = 0; i < OpenIcon.length; i++) {
          OpenIcon[i].classList.remove('openIcon')
        }
      } else {
        target.removeAttribute('style')
        target.classList.remove('togglehide')
        this.$emit('openBar') // 打開導(dǎo)航標(biāo)簽的回調(diào)
        this.$refs.barPart.style.left = 0 + 'px'
      }
    }
  },
  mounted () {
    this.$refs.barPart.style.left = -this.$refs.barPart.offsetWidth + 'px'  //初始化通過left值來隱藏側(cè)邊欄組件
    this.$on('closeByRoute', this.toggleShow)
  }
}
</script>

my-submenu 組件。

含有子菜單的菜單引用玄叠，就需要引用my-submenu的組件古徒。關(guān)于如何實現(xiàn)子菜單的下拉和收起的效果，這是這個組件的主要實現(xiàn)難點读恃。

image.png

基本思路如下：
1 一開始先設(shè)置.treeview同級的treeview-menu菜單的display為none
2 當(dāng)包含有子菜單的菜單即記賬標(biāo)簽被點擊之后描函，設(shè)置treeview-menu的樣式height為0，首先設(shè)置為display:block狐粱，而且over-flow為hidden舀寓。然后獲取當(dāng)前的子菜單下的li個數(shù)，即可以獲取所有子元素的高度肌蜻，然后再設(shè)置treeview-menu的高度為該高度互墓。
結(jié)合transition就可以實現(xiàn)下拉效果了。具體可以看代碼蒋搜。

這里設(shè)置display：block和設(shè)置高度不能同時設(shè)置篡撵，不然transition不會生效，可以設(shè)置一個小延時豆挽，設(shè)置為display:block之后育谬，再設(shè)置高度。

<template>
    <div>
     <li class='treeview'  @click='toggleShowMenu'>
          <a href="#" data-show = false  style='color:white'>
          <slot name='icon'></slot>   
          <span class='menutitle'><slot name="submenu-title"></slot></span>
          <span class='pull-right-container'><i class='fa fa-angle-left pull-right' style='color:white'></i></span>
        </a>
        </li>    
        <ul class='treeview-menu' style='display:none'>
          <slot></slot>
        </ul>
    </div>
</template>
<script>
export default {
  name: 'my-submenu',
  methods: {
    toggleShowMenu (e) {
      let setTarget = e.currentTarget.nextElementSibling
      if (setTarget !== null) {
        let showCon = setTarget.classList.contains('openMenu')
        let childLi = setTarget.children
        var totalHeight = 0
        let h = e.currentTarget
        var targetIcon = h.querySelectorAll('.pull-right')[0]  // todo: h是當(dāng)前的元素
        let nodeListArr = Array.prototype.slice.call(childLi)
        if (!showCon) {
          setTarget.style.height = 0
          setTarget.classList.add('openMenu')
          targetIcon.classList.add('openIcon')
          setTarget.style.overflow = 'hidden'
          setTarget.style.display = 'block'
          for (let i = 0; i < nodeListArr.length; i++) {
            totalHeight = totalHeight + nodeListArr[i].offsetHeight
          }
          setTimeout(() => {
            setTarget.style.height = totalHeight + 'px'
            setTimeout(() => {
              setTarget.removeAttribute('style')
              setTarget.style.display = 'block'
            }, 300)
          }, 40)
        } else {
          targetIcon.classList.remove('openIcon')
          setTarget.style.height = setTarget.offsetHeight + 'px'
          setTarget.style.overflow = 'hidden'
          setTarget.classList.remove('openMenu')
          setTimeout(() => {
            setTarget.style.height = 0 + 'px'
            setTimeout(() => {
              setTarget.removeAttribute('style')
              setTarget.style.display = 'none'
            }, 300)
          }, 40)
        }
      }
    }
  }
}
</script>

在index.js中export組件

import mymenu from './sidebar//src/my-menu.vue'
import menuitem from './sidebar/src/menu-item.vue'
import mysubmenu from './sidebar/src/my-submenu.vue'
import BackTop from './backtop/src/main'
/* istanbul ignore next */

const components = [
  mymenu,
  menuitem,
  mysubmenu,
  BackTop
]

const install = (Vue, OPts) => {
  if (install.installed) {
    return
  }
  components.map(component => {
    Vue.component(component.name, component)
  })
}

export default {
  version: '0.0.1',
  author: 'katherine',
  install,
  mymenu,
  menuitem,
  mysubmenu,
  BackTop
}

這里我將所有的組件都在這里export出去了帮哈。引用的時候膛檀，只要直接import整個文件就可以了。

main.js

import globalUI from './myComponent'
Vue.use(globalUI)

一個小技巧

image.png

image.png

image.png

而當(dāng)有多級下拉菜單的時候，我在外部引用的時候都是這樣子去引用調(diào)用的憾筏。
而含有多級子菜單的嚎杨，我都是直接在my-submenu內(nèi)部再去嵌套添加，細(xì)心的你會發(fā)現(xiàn)氧腰，我的子菜單list都是存在一個這樣的ul里面枫浙。

image.png

所以，我就在CSS樣式中設(shè)置如下古拴，這個很關(guān)鍵箩帚，這樣的話，只要你不管嵌套多少層下拉菜單斤富，都會依次增加一個padding-left：20px;的屬性值膏潮。

.treeview-menu {
  .treeview-menu {
   padding-left:20px; 
}
}

呼呼，感覺自己講得太細(xì)節(jié)了满力，會不會反而會更混亂焕参，但是這些是我在做的過程中遇到的問題，畢竟自己是小白油额，覺得很多東西如果不講細(xì)節(jié)一點叠纷，一開始學(xué)肯定覺得很吃力，不知道要怎么深入潦嘶。所以我都會希望自己能夠詳細(xì)地分享自己學(xué)習(xí)過程中所遇到的問題涩嚣。也希望通過分享，自己也能從別人身上學(xué)到新的知識掂僵。

項目在線demo

項目在線演示demo（切換到移動端調(diào)試模式哦）

項目github地址（喜歡的話歡迎start~~~~）

項目github地址