這篇文章給大家分享的是有關(guān)Vue狀態(tài)模式如何實(shí)現(xiàn)窗口?？抗δ艿膬?nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來(lái)看看吧。
創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站建設(shè)、成都網(wǎng)站制作與策劃設(shè)計(jì),大理州網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:大理州等地區(qū)。大理州做網(wǎng)站價(jià)格咨詢:13518219792
昨天做的tabs窗口，非常滿意，今天乘勝追擊，把它做成了可以根據(jù)自身大小改變顯示樣式，自身寬度過小時(shí)，tab頁(yè)可以浮動(dòng)?？科湟粋?cè)。具體效果：
左側(cè)
右側(cè)
頂層的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，我們可以在代碼里通過這個(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)擊事件，傳給控制腳本，模板基本沒什么邏輯，主要就是顯示和接收事件。
是否顯示圖標(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確定，如果?？吭谧筮卍ockLeft為true，反之為false。
tabTitle是?？繒r(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)類：
NormalState（普通tabs控件），MiddleState（列表狀態(tài)，帶標(biāo)題帶圖標(biāo)），MiniState（迷你列表狀態(tài)，只顯示圖標(biāo)）。后兩個(gè)類有一些共同的操作，比如彈出隱藏選項(xiàng)卡等，可以繼承共同的基類：ListState，三個(gè)狀態(tài)類功能上也有一些交集，他們可以有共同的基類State。類關(guān)系圖如下（好多年沒有用UML工具了，用Excel湊合一下）：
不仔細(xì)看，不知道這個(gè)圖其實(shí)是Excel畫的，還以為是哪個(gè)高端UML工具做的呢。
狀態(tà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沒有resize事件，可以通過鼠標(biāo)事件來(lái)代替。我們的窗口大小是通過鼠標(biāo)拖動(dòng)實(shí)現(xiàn)的，所以跟蹤鼠標(biāo)拖動(dòng)事件，動(dòng)態(tài)查詢控件大小，然后分發(fā)事件。
這個(gè)控件至此就完成了，寫這個(gè)文章的事件比寫代碼時(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代碼可視化編輯工具，本系列記錄了該軟件的開發(fā)過程，有問題的朋友請(qǐng)?jiān)趇thub上給我留言。
感謝各位的閱讀！關(guān)于“Vue狀態(tài)模式如何實(shí)現(xiàn)窗口停靠功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
