昨天做的tabs窗口，非常滿意，今天乘勝追擊，把它做成了可以根據(jù)自身大小改變顯示樣式，自身寬度過(guò)小時(shí)，tab頁(yè)可以浮動(dòng)停靠其一側(cè)。具體效果：

左側(cè)

右側(cè)

向來(lái)喜歡簡(jiǎn)單明了的東西，所以想實(shí)現(xiàn)的簡(jiǎn)單一點(diǎn)，無(wú)奈現(xiàn)實(shí)不允許啊，功能實(shí)在有一丟丟復(fù)雜。硬著頭皮搞了整整一下午，終于完成。

左側(cè)跟右側(cè)窗口，要使用同一個(gè)控件，盡量增加代碼的可復(fù)用性，控件的狀態(tài)就有些多：正常顯示（普通tabs窗口），列表（顯示圖標(biāo)跟標(biāo)題，點(diǎn)擊時(shí)彈出tab頁(yè)），迷你列表（只顯示圖標(biāo)，點(diǎn)擊時(shí)彈出tab頁(yè)）。

控件在界面左側(cè)時(shí)，tab頁(yè)彈出在其右側(cè)。反之，控件在界面右側(cè)時(shí)，tab頁(yè)彈出在其左側(cè)。

從正常tabs，縮小到列表顯示時(shí)，所有tab都是不被激活的。從列表放大到正常tabs，要默認(rèn)一個(gè)標(biāo)簽（tab）是被選中的。

這么多的狀態(tài)要求，代碼很容易就亂掉。不過(guò)還好，設(shè)計(jì)模式中有一個(gè)叫“狀態(tài)模式”的，可以很好的解決這個(gè)問(wèn)題，缺點(diǎn)就是初期代碼量稍大，優(yōu)點(diǎn)是便于后期管理。

昨天做了兩個(gè)tabs控件，一個(gè)是WidgetTabs，另外一個(gè)是PageTabs，后者現(xiàn)在還能滿足我們的需求，只需要修改WidgetTabs這一個(gè)就行。

昨天實(shí)現(xiàn)的一些代碼刪掉，首先重寫(xiě)模板，根據(jù)模板寫(xiě)腳本代碼，可以讓腳本代碼更實(shí)用些，就像測(cè)試驅(qū)動(dòng)的開(kāi)發(fā)里，先寫(xiě)測(cè)試再寫(xiě)代碼，是一個(gè)道理。

還有，差點(diǎn)忘了。昨天的代碼里，把所有的style樣式都放在style.css這個(gè)文件里了，讓后vue全局引入，隨著我們寫(xiě)的控件越來(lái)越多，這個(gè)文件會(huì)越來(lái)越臃腫，不便于管理。這次把WidgetTabs相關(guān)的style代碼，拿到vue組件里面。

先看模板代碼：

<template><div : ref='widget'><ul class='heads'> <li v-for='tab in tabs' : @click='click(tab)'> <div v-show='showIcon' class='tab-icon'><i :class='tab.icon'></i></div> <span v-show='showTitle'> {{ tab.name }}</span> </li></ul><div v-show='showTabBody' :class='dockLeft?’dock-left’:’’'> <div v-show='showTabTitle' class='tab-title'> <div>{{selectedTab ? selectedTab.name : ’’}}</div> <div @click='close'>×</div> </div> <slot></slot></div></div></template>

頂層的DIV是我們這個(gè)控件的殼子，class對(duì)應(yīng)三個(gè)狀態(tài)的三個(gè)css class：

1、缺省狀態(tài)，空字符串

2、列表狀態(tài)，middle-size

3、迷你列表狀態(tài)，mini-size

css代碼里根據(jù)這個(gè)csss class，用不同的方式顯示其子元素，從而實(shí)現(xiàn)正常顯示，或者彈出顯示兩種風(fēng)格。

ref相當(dāng)于給這個(gè)DIV定了一個(gè)唯一ID，我們可以在代碼里通過(guò)這個(gè)ID，獲取相應(yīng)的dom元素，從而判斷當(dāng)前控件大小，根據(jù)這個(gè)大小，調(diào)整控件顯示樣式。

ul元素顯示的是tabs控件的導(dǎo)航標(biāo)簽部分，根據(jù)每個(gè)tab頁(yè)的顯示或者隱藏來(lái)確定標(biāo)簽是否激活，它還有一個(gè)功能就是接受鼠標(biāo)點(diǎn)擊事件，傳給控制腳本，模板基本沒(méi)什么邏輯，主要就是顯示和接收事件。

是否顯示圖標(biāo)，根據(jù)showIcon計(jì)算屬性確定。

是否顯示標(biāo)題，根據(jù)showTitle計(jì)算屬性確定。

整個(gè)選項(xiàng)卡body是否顯示，根據(jù)showTabBody計(jì)算屬性確定。因?yàn)檫x項(xiàng)卡body有時(shí)停靠在控件左側(cè)，有時(shí)停靠在控件右側(cè)，這個(gè)停靠方式根據(jù)屬性dockLeft確定，如果停靠在左邊dockLeft為true，反之為false。

tabTitle是停靠時(shí)，顯示的標(biāo)題區(qū)域：

根據(jù)計(jì)算屬性showTabTitle確定是否顯示。關(guān)閉按鈕負(fù)責(zé)接收點(diǎn)擊事件，傳遞給控制器腳本。不管用什么樣的方式實(shí)現(xiàn)，控制腳本只要能滿足模板的這個(gè)要求就可以了。相當(dāng)于接口定了，根據(jù)接口設(shè)計(jì)實(shí)現(xiàn)方式。

前面已經(jīng)確定要用狀態(tài)模式實(shí)現(xiàn)，根據(jù)狀態(tài)設(shè)計(jì)三個(gè)狀態(tài)類(lèi)：

NormalState（普通tabs控件），MiddleState（列表狀態(tài)，帶標(biāo)題帶圖標(biāo)），MiniState（迷你列表狀態(tài)，只顯示圖標(biāo)）。后兩個(gè)類(lèi)有一些共同的操作，比如彈出隱藏選項(xiàng)卡等，可以繼承共同的基類(lèi)：ListState，三個(gè)狀態(tài)類(lèi)功能上也有一些交集，他們可以有共同的基類(lèi)State。類(lèi)關(guān)系圖如下（好多年沒(méi)有用UML工具了，用Excel湊合一下）：

不仔細(xì)看，不知道這個(gè)圖其實(shí)是Excel畫(huà)的，還以為是哪個(gè)高端UML工具做的呢。

狀態(tài)類(lèi)對(duì)應(yīng)的代碼：

class State{constructor(context){ this.context = context}widthChange(width){ if(width <=90){ this.toState(this.context.miniState)} else if(width <=160){ this.toState(this.context.middleState)} else{ this.toState(this.context.normalState)}}showTabBody(){ return true }showTabTitle(){ return false }showIcon(){ return false }showTitle(){ return true }close(){}toState(state){ if(this.context.state !== state){ if(this.context.state === this.context.normalState){ this.context.selectedTab.isShow = false console.log(’dddd’)} if(state === this.context.normalState){ this.context.selectedTab.isShow = true } this.context.state = state}}stateClass(){ return ’’ }}class NormalState extends State{constructor(context){super(context)}clickTab(clickedTab){ this.context.tabs.forEach(tab => {tab.isShow = (tab.name == clickedTab.name) this.context.selectedTab = clickedTab});}} //需要彈出式顯示標(biāo)簽內(nèi)容class ListState extends State{constructor(context){super(context)}showTabBody(){ return this.context.selectedTab.isShow}showTabTitle(){ return true }showIcon(){ return true }showTitle(){ return true }close(){ this.context.selectedTab.isShow = false }clickTab(clickedTab){ this.context.tabs.forEach(tab => { if(tab === clickedTab){tab.isShow = !tab.isShow this.context.selectedTab = clickedTab } else{ tab.isShow = false }});}} //該狀態(tài)顯示圖標(biāo)跟標(biāo)題class MiddleState extends ListState{constructor(context){super(context)}stateClass(){ return ’middle-size’ }} //該狀態(tài)只顯示圖標(biāo)class MiniState extends ListState{constructor(context){super(context)}showTitle(){ return false }stateClass(){ return ’mini-size’ }}

控件腳本代碼：

export default {name: ’WidgetTabs’,data() { return {tabs: [], state: null, selectedTab :null, dockLeft:false,}},created() { this.tabs = this.$children; this.normalState = new NormalState(this) this.middleState = new MiddleState(this) this.miniState = new MiniState(this) this.state = this.normalState},computed: {stateClass(){ return this.state.stateClass()},showIcon(){ return this.state.showIcon()},showTitle(){ return this.state.showTitle()},showTabBody(){ return this.state.showTabBody()},showTabTitle(){ return this.state.showTabTitle()},},methods: {click(clickTab) { this.state.clickTab(clickTab)},mouseMove(){ if(this.$refs.widget){ this.dockLeft = this.$refs.widget.offsetLeft < 50 this.state.widthChange(this.$refs.widget.offsetWidth) }},mouseDown(event){ document.addEventListener(’mousemove’, this.mouseMove)},mouseUp(event){ document.removeEventListener(’mousemove’, this.mouseMove)},close(){ this.state.close()}},mounted () {document.addEventListener(’mousedown’, this.mouseDown)document.addEventListener(’mouseup’, this.mouseUp) this.tabs.forEach(tab => { if(tab.isShow){ this.selectedTab = tab }});},beforeDestroyed() {document.removeEventListener(’mousedown’, this.mouseDown)document.removeEventListener(’mouseup’, this.mouseUp)},}

組件創(chuàng)建時(shí)初始化各種狀態(tài)。需要注意的一點(diǎn)是，需要在窗口變化時(shí)動(dòng)態(tài)獲取控件寬度，來(lái)確定控件是處在哪個(gè)狀態(tài)。JS中DIV沒(méi)有resize事件，可以通過(guò)鼠標(biāo)事件來(lái)代替。我們的窗口大小是通過(guò)鼠標(biāo)拖動(dòng)實(shí)現(xiàn)的，所以跟蹤鼠標(biāo)拖動(dòng)事件，動(dòng)態(tài)查詢(xún)控件大小，然后分發(fā)事件。

這個(gè)控件至此就完成了，寫(xiě)這個(gè)文章的事件比寫(xiě)代碼時(shí)間長(zhǎng)，天生是個(gè)程序員不是writer。

整個(gè)項(xiàng)目在這個(gè)歷史節(jié)點(diǎn)的代碼，請(qǐng)到我的Github上查看： https://github.com/vularsoft/...

找到該歷史節(jié)點(diǎn)的方法：

RXEditor是一個(gè)Boostrap代碼可視化編輯工具，本系列記錄了該軟件的開(kāi)發(fā)過(guò)程，有問(wèn)題的朋友請(qǐng)?jiān)趇thub上給我留言。

總結(jié)

到此這篇關(guān)于Vue狀態(tài)模式實(shí)現(xiàn)窗口停靠功能(靈動(dòng)、自由, 管理后臺(tái)Admin界面)的文章就介紹到這了,更多相關(guān)vue狀態(tài)模式實(shí)現(xiàn)窗口停靠?jī)?nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！