最近都是用element-ui 在協助自己的專案開發，用著用著就想看看餓了麼是怎麼實現元件的使用的，於是就想自己動手也來寫，當然，我是要循序漸進的，從最開始最簡單的元件定義開始。總的寫了三個小元件，我按照我自己覺得難度等級，分別定義為基礎版，打怪版，終極版。
專案線上demo
專案github地址
嗯，在寫之前，我先說一下，我會這篇文章中寫下面三個小元件中的其中兩個。分別如下所示:
- 基於vue的backTop 返回頂部小元件 ——— 普通版
- 基於vue的下拉選單小元件 ———-打怪版
- 基於vue的側邊欄導航選單的小元件 ——————終極版
在編寫元件的時候，複用元件是很有好處的。可複用元件應該有一個清晰的公共介面。
Vue元件的API來自三個部分：props events slots
- props: 允許外部環境傳遞資料給元件。
- Events: 允許元件對外部環境產生副作用。
- Slots: 允許外部環境將額外的內容組合在元件內部。
那麼，其實我們可以用v-bind和v-on的簡寫語法，來使得模板清楚簡潔：
// 這是我寫的backTop 元件的呼叫方法。
<back-top :scrollmyself = `true`></back-top> // 用props將外部環境資料傳遞進去。複製程式碼額，我覺得還是直接動手開始做吧，會比較實在一點，那就從最簡單的backTop元件開始吧。
一 基礎版： backTop返回頂部元件。
1.1最終的實現效果：
頁面右下角就是自己封裝的backtop元件。
1.2 外部元件呼叫的方式：
<back-top :scrollmyself = `true`></back-top> //這個scrollmyself是傳進去元件的props值，複製程式碼1.3 元件自定義方式
先說一下功能情況，這個backTop元件的作用就是，當頁面存在滾動條，或者頁面中某個區域性有存在滾動條，當頁面滾動到一定位置之後，頁面就會出現點選返回頂部的按鈕，點選之後就會返回頂部，此時返回頂部的icon消失。
- 1 .定義元件的基本功能結構
- 2 . 定義元件的install將元件export出去
- 3 在專案的main.js中使用呼叫元件。
首先看一下檔案結構：
1 backtop內部的main.vue檔案
——– template模板
———-元件名： name： BackTop
———-props: 定義props資料格式，預設為false；true的時候當前發生滾動的物件就是內部引用該元件的父元件，為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值，如果滾動的物件是當前元件的父元素，就設定scrollObj為true.如果沒有設定就預設為window物件
default: false
}
},
data () {
return {
isShow: false,
target: ``
}
},
methods: {
// 新增樣式，滑鼠hover上去，改變顏色
addhoverClass (e) {
if (e.type === `mouseover`) {
this.$el.classList.add(`hover`)
} else if (e.type === `mouseout`) {
this.$el.classList.remove(`hover`)
}
},
showIcon () {
// 根據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之後自動返回頂部的函式
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來判斷當前的滾動監聽物件是誰
if (this.scrollmyself) {
this.target = this.$el.parentNode
} else {
this.target = document.body
}
this.target.addEventListener(`scroll`, this.showIcon)
},
beforeDestroy () {
// 元件銷燬的時候，需要刪除scroll的監聽事件。
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的內部的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內部引用
import backTop from `./myComponent/backtop`
Vue.use(backTop)複製程式碼總結一下： 在上面這個backtop元件中，用props進行資料的傳遞，將資料傳遞給內部元件。
接下來這個側邊欄多級下拉導航側邊欄，實現的最終效果如下所示。
二 終極版本： sideBar側邊欄元件。
2.1 最終的實現效果：
側邊欄元件可以實現多級下拉選單，同時也可以實現路由的跳轉，只要設定相應的route值就可以。
2.2 元件的基本結構
因為這個元件是側邊欄元件，有單個的子選單，也有包含有下拉子選單的選單，同時，所有我分成三個小的元件來實現。
同時也會使用slot來進行內容的分發。
基本的結構如下所示：
其實這個元件對於我來說，存在幾個難點。
-
1 首先這是一個可以多級下拉選單的元件，那麼基本的結構和樣式就很重要，如何讓子選單下的子選單每次都依次往右邊移動大概20px的距離，可以凸顯出選單之間的級別關係。
-
2 其次是點選每一個含有子選單的標題，如何讓其顯示下拉選單，而且是下拉的樣式來顯示的，同時要保證再深一層次的下拉選單不會顯示出來。
-
3 我會用一個props來從父元件向子元件傳遞資料，通過
props myVisible來控制導航側邊欄的出現與消失。同時你也會發現，通過點選蒙板（在元件內部定義）也可以實現側邊欄的消失，如何實現雙向資料傳遞呢？
待會我會提到這兩個問題，不過我們可以先來看一下這個元件引入（怎麼引入我待會說，跟上面的一樣）之後的使用範例：
<my-menu :my-visible.sync = "visible">
<!-- 這裡的按鈕可以自己去封裝定義 -->
<!-- <p slot=`toggleBtn`>點我點我</p> -->
<template slot="menu-title">我的個人助手小系統呀</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>複製程式碼基本的使用結構，可以認真看例子程式碼。具體的細節我就不說啦。
引數
[my-menu 元件] myVisible : 預設為false,控制側邊欄的顯示與消失。
[menu-item元件] route : 預設為空，控制路由的跳轉。
slot
[my-menu 元件] menu-title: 控制選單的標題顯示
[menu-item元件] icon: icon圖示的顯示。
[my-submenu元件] submenu-title: 子級選單的標題顯示。icon: icon圖示的顯示。
2.3 元件的程式碼結構
menu-item的結構
難點實現：這個渲染之後是每一個不含有子選單的選單，那麼問題來了，當有繫結路由物件的時候，點選某個選單的時候，側邊欄選單是要消失的，那麼如何，去告訴引用了menu-item元件的my-menu父元件去關閉呢？
解決方法：這裡參考了餓了麼元件的dispatch方法，（dispatch檔案就不po出來了），向父元件傳遞事件。
引入了dispatch檔案之後：
子元件中使用:this.dispatch(`my-menu`, `closeByRoute`)
監聽的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進行傳遞 this.dispatch(元件名， 觸發的事件名)
}
}
}
}
</script>複製程式碼my-menu的結構
前面提到，my-menu元件是用props myVisible來實現側邊欄的顯示與消失。因為vue是不可以直接修改prop屬性的，但是新版的vue可以使用sync來實現父子元件的雙向資料繫結。
只要在呼叫的時候，使用 <my-menu :my-visible.sync = `visible`></my-menu>
而在元件內部，想要變更props值的時候，只需要新增 this.$emit(`update:myVisible`, !this.myVisible)來更新props屬性值就可以。
www.cnblogs.com/penghuwan/p… 大家可以參考一下這篇文章。
這個元件的主要就是用props來控制顯示和隱藏。最主要的是toggleShow方法，控制側邊欄的顯示和隱藏，通過新增一個togglehide 的類來判斷當前的側邊欄是否是顯示的狀態。
<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`) // 關閉導航標籤的回撥
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`) // 開啟導航標籤的回撥
this.$refs.barPart.style.left = 0 + `px`
}
}
},
mounted () {
this.$refs.barPart.style.left = -this.$refs.barPart.offsetWidth + `px` //初始化通過left值來隱藏側邊欄元件
this.$on(`closeByRoute`, this.toggleShow)
}
}
</script>複製程式碼my-submenu 元件。
含有子選單的選單引用，就需要引用my-submenu的元件。關於如何實現子選單的下拉和收起的效果，這是這個元件的主要實現難點。
基本思路如下：
1 一開始先設定.treeview同級的treeview-menu選單的display為none
2 當包含有子選單的選單即記賬標籤被點選之後，設定treeview-menu的樣式height為0，首先設定為display:block，而且over-flow為hidden。然後獲取當前的子選單下的li個數，即可以獲取所有子元素的高度，然後再設定treeview-menu的高度為該高度。
結合transition就可以實現下拉效果了。具體可以看程式碼。
這裡設定display：block和設定高度不能同時設定，不然transition不會生效，可以設定一個小延時，設定為display:block之後，再設定高度。
<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是當前的元素
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)複製程式碼一個小技巧
關於怎麼實現這些子選單中的等級關係，就是越往下的子選單就會依次增多一個padding-left:20px;的屬性值。
其實可以看一下我的 my-submenu.vue 的結構
而當有多級下拉選單的時候，我在外部引用的時候都是這樣子去引用呼叫的。
而含有多級子選單的，我都是直接在my-submenu內部再去巢狀新增，細心的你會發現，我的子選單list都是存在一個這樣的ul裡面。
所以，我就在CSS樣式中設定如下，這個很關鍵，這樣的話，只要你不管巢狀多少層下拉選單，都會依次增加一個padding-left：20px;的屬性值。
.treeview-menu {
.treeview-menu {
padding-left:20px;
}
}複製程式碼呼呼，感覺自己講得太細節了，會不會反而會更混亂，但是這些是我在做的過程中遇到的問題，畢竟自己是小白，覺得很多東西如果不講細節一點，一開始學肯定覺得很吃力，不知道要怎麼深入。所以我都會希望自己能夠詳細地分享自己學習過程中所遇到的問題。也希望通過分享，自己也能從別人身上學到新的知識。