电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

解決vue單頁面多個(gè)組件嵌套監(jiān)聽瀏覽器窗口變化問題

瀏覽:105日期:2022-12-22 09:35:36

需求

最近公司有個(gè)大屏展示項(xiàng)目(如下圖)

解決vue單頁面多個(gè)組件嵌套監(jiān)聽瀏覽器窗口變化問題

頁面的元素需要做響應(yīng)式監(jiān)聽,圖表需要跟著窗口響應(yīng)變化

問題

每一個(gè)圖表都被我寫成了一個(gè)組件,然后就在每一個(gè)組件里寫了一串代碼,監(jiān)聽瀏覽器變化

結(jié)果只有父組件的代碼生效

mounted(){ window.onresize = () => { //當(dāng)窗口發(fā)生改變時(shí)觸發(fā) // };}

原因

經(jīng)簡(jiǎn)單測(cè)試后發(fā)現(xiàn),同一個(gè)路由頁面只能注冊(cè)一次瀏覽器窗口監(jiān)聽事件,第二次注冊(cè)的會(huì)覆蓋第一次注冊(cè)

下邊代碼即可測(cè)試

mounted(){ window.onresize = () => { //當(dāng)窗口發(fā)生改變時(shí)觸發(fā) console.log(1) }; window.onresize = () => { //當(dāng)窗口發(fā)生改變時(shí)觸發(fā) (會(huì)覆蓋上一個(gè)函數(shù)) console.log(2) };}

父子嵌套組件同理,子組件生命周期執(zhí)行在父組件之前,父組件函數(shù)會(huì)覆蓋子組件函數(shù)

解決方案

1、只在父頁面寫個(gè)監(jiān)聽,但是通過組件傳值的方式傳給子組件,并且子組件用watch監(jiān)聽傳值的變化,響應(yīng)改變

2、假如是多層組件嵌套,用vuex可能會(huì)更省力

補(bǔ)充知識(shí):vue/組件嵌套/無限嵌套/嵌套組件消息傳遞/嵌套父子組件傳值

目前接到一個(gè)需求,是我之前從來沒有實(shí)踐過的,正好趁此機(jī)會(huì)做一個(gè)深度剖析,并記錄下這次的成長,并分享給大家。

需求文檔

一 、(一個(gè)廠商編號(hào)和一個(gè)版本號(hào))唯一決定一個(gè)配置

二 、 配置內(nèi)容支持無限嵌套

三、配置數(shù)據(jù)格式示例(配置包括項(xiàng)和模塊):

{ 'vendorId': 'IL03#sub_01', 'version': '9.0.0', 'config': { 'module-1': { 'property-1': 'value-1', 'property-2': 'value-2', 'property-3': 'value-3', 'module-1_1': { 'property-1_1': 'value-1_1', 'property-1_2': 'value-1_2', 'property-1_3': 'value-1_3' } }, 'module-2': { 'property-4': 'value-4', 'property-5': 'value-5' } }}

四、配置成果物如下:

解決vue單頁面多個(gè)組件嵌套監(jiān)聽瀏覽器窗口變化問題

需求分解

一個(gè)簡(jiǎn)單的嵌套組件:

<template> <div> <span>{{data.content}}<span> <div> <nested :data='data.child'></nested> <div> </div></template><script>export default { name: ’nested’, props: [’data’]}</script>

我們給最外層的組件(根嵌套組件)綁定形如

{ 'content': 'value', 'child': { 'content': 'value-1' 'child': { 'content': 'value-1_1' ...... } }}

的數(shù)據(jù)結(jié)構(gòu),就可以看見效果了,是不是和我們前面需求的數(shù)據(jù)結(jié)構(gòu)很像?

開始動(dòng)工

step1:最外層列表展示

這里作為靜態(tài)路由頁面展示即可(分頁、查詢、刪除功能在這里做)

<!-- 這里使用了EL-UI --><template> <!-- 應(yīng)用配置入口 --> <div class='app-config-wrap'> <!-- 增 --> <div class='app-config-add'> <el-button type='primary' size='mini' @click='handleClickAdd'>新增配置</el-button> </div> <!-- 查 --> <div class='app-config-search'> <div @click='isShowFilter = !isShowFilter'> <span class='text'>查詢App配置</span> <span v-if='!isShowFilter'></span> <span v-else></span> </div> <div @click='handleClearAll' v-if='isShowFilter'> <span class='text'>清空條件</span> </div> <div v-show='isShowFilter'> <div class='by-vendorId'> <el-input type='text' size='mini' placeholder='按廠商編號(hào)查詢' clearable v-model.trim='vendorId'> </el-input> </div> <div class='by-version'> <el-input type='text' size='mini' placeholder='按版本號(hào)查詢' clearable v-model.trim='version'> </el-input> </div> <div class='search-button'> <el-button type='primary' size='mini' @click='handleClickSearch'>查 詢</el-button> </div> </div> </div> <div :style='tableHeight'> <el-table size='mini' :data='configList' stripe @row-click='handleClickRow' highlight-current-row style='width: 100%;'> <el-table-column type='index' label='No.' width='60'></el-table-column> <el-table-column prop='vendorId' label='廠商編號(hào)' :show-overflow-tooltip='true'></el-table-column> <el-table-column prop='version' label='版本號(hào)' :show-overflow-tooltip='true'></el-table-column> <el-table-column prop='operation' label='操作'> <template slot-scope='scope'> <!-- 刪 --> <el-button type='danger' size='mini' @click='handleClickDelete(scope.row.id)'>刪除配置</el-button> </template> </el-table-column> </el-table> </div> <el-pagination v-if='total' background small :current-page='pageNum' :page-sizes='[10, 20, 40, 60]' :page-size='pageSize' layout='total, sizes, prev, pager, next, jumper' :total='parseInt(total)' @current-change='changePageNo' @size-change='changePageSize'> </el-pagination> </div></template><script>export default { name: ’appConfig’, components: {}, props: [], data () { return { isShowFilter: false, vendorId: ’’, version: ’’, pageNum: 1, pageSize: 20, total: 0, configList: [{ // 假數(shù)據(jù) id: 1, vendorId: ’cjm’, version: ’10.0.0’ }] } }, computed: { tableHeight () { return this.isShowFilter ? { height: ’calc(100% - 129px)’ } : { height: ’calc(100% - 90px)’ } } }, methods: { handleClearAll () { this.vendorId = ’’ this.version = ’’ }, handleClickSearch () { // 這里發(fā)送查詢請(qǐng)求 }, changePageNo (val) { // 這里發(fā)送分頁請(qǐng)求 this.pageNum = val }, changePageSize (val) { // 這里發(fā)送分頁請(qǐng)求 this.pageSize = val }, handleClickDelete (id) { // 這里發(fā)送刪除請(qǐng)求 }, handleClickAdd () { // 使用路由方式跳轉(zhuǎn)到配置頁面(增加配置和修改配置同一頁面即可) this.$router.push({ name: ’configData’, query: {} }) }, handleClickRow (row) { // 通過id讓配置頁面初始化時(shí)請(qǐng)求數(shù)據(jù),在跳轉(zhuǎn)頁面中watch即可 this.$router.push({ name: ’configData’, query: { id: row.id } }) } }}</script>// 樣式我就不貼了,節(jié)省篇幅

step2:動(dòng)態(tài)路由頁準(zhǔn)備

由于配置頁面展示是根據(jù)廠商編號(hào)和版本號(hào)動(dòng)態(tài)改變的,所以這里用到

this.$router.push({ name: ’configData’, query: { id: row.id }})

來實(shí)現(xiàn)動(dòng)態(tài)路由頁面,這里也需要引入我們的根嵌套組件(嵌套入口)。

<template> <div class='config-data-warp'> <div class='config-head'> <span class='text'>廠商編號(hào):</span> <el-input type='text' size='mini' placeholder='廠商編號(hào)' clearable v-model.trim='vendorId'> </el-input> </div> <div class='config-head'> <span class='text'>版本號(hào):</span> <el-input type='text' size='mini' placeholder='版本號(hào)' clearable v-model.trim='version'> </el-input> </div> <div class='config-main'> <config-module :data='config' :root='true' :commit='commit' @commit='handlerCommit'></config-module> </div> <el-button type='primary' size='mini' @click='commit = true'>確認(rèn)提交</el-button> </div></template><script>import configModule from ’./configModule’export default { name: ’configData’, components: {configModule}, data () { return { id: this.$route.id, commit: false, vendorId: ’’, version: ’’, config: {} // 這里放點(diǎn)假數(shù)據(jù) } }, mounted () { // 如果id存在,就去請(qǐng)求數(shù)據(jù) if (id) { ... } }, methods: { handlerCommit (data) { // 這里是匯總數(shù)據(jù)的地方,記下來,等下提到了好找 console.log(data) this.commit = false } }}</script>

值得注意的是,確認(rèn)提交按鈕只是將commit變量置為true,而commit綁定在我們的嵌套組件中。

<div v-for='(value, index) in configJsonChildren' :key='index + ’child’ + moduleName'> <config-module :index='index' @change='changeChildName' @commit='handlerCommit' :commit='commit' :data='{key: value[0], child: value[1]}'></config-module></div>

這是嵌套組件的部分代碼,我們可以看到commit被原封不動(dòng)的傳遞給了子嵌套組件,也就是說,這里的commit變量起到通知所有嵌套組件執(zhí)行了提交動(dòng)作,這也是父組件控制子組件組件的唯一方式——傳遞數(shù)據(jù)變化props(或者使用vuex也可以)。

這里還有一點(diǎn),就是定義什么是嵌套部分,什么是嵌套外部分,顯然,廠商編號(hào)和版本號(hào)不屬于嵌套部分。

還有傳入的root變量,是為了控制根嵌套組件的名稱不可修改,所以傳個(gè)true就可以了。

step3:嵌套組件的實(shí)現(xiàn)(重點(diǎn))

這里梳理一下嵌套組件需要提供的功能點(diǎn):

1、能夠做到傳入數(shù)據(jù)的展示

2、能夠動(dòng)態(tài)添加項(xiàng)和模塊

3,能夠?qū)⑿薷牧说臄?shù)據(jù)傳遞出去

傳入數(shù)據(jù)的展示

我們?cè)倩剡^頭看看后臺(tái)傳給我們的數(shù)據(jù)格式:

{ 'vendorId': 'IL03#sub_01', 'version': '9.0.0', 'config': { 'module-1': { 'property-1': 'value-1', 'property-2': 'value-2', 'property-3': 'value-3', 'module-1_1': { 'property-1_1': 'value-1_1', 'property-1_2': 'value-1_2', 'property-1_3': 'value-1_3' } }, 'module-2': { 'property-4': 'value-4', 'property-5': 'value-5' } }}

從中我們是否可以提煉出每個(gè)嵌套組件的數(shù)據(jù)格式?

module: { property-1: value-1, property-2: value-2, ...... module-1: { ...... }, mpdule-2: { ...... }, ......}

而且,我們需要這個(gè)對(duì)象的key和value是可以被雙向綁定的。

可是我們想一下,對(duì)象的key可以雙向綁定嗎?顯然不能!

這也就是說,原始傳入的數(shù)據(jù)結(jié)構(gòu)并不能用,需要進(jìn)行處理:

<template> <div class='config-module-warp'> <div class='config-head'> <!-- 根組件固定模塊名,或者說不需要模塊名 --> <span v-if='root'>配置:</span> <div v-else> <el-input type='text' size='mini' placeholder='模塊名' clearable v-model='moduleName' @change='changeModuleName'></el-input> </div> <el-button type='primary' size='mini' @click='handleClickAddProperty'>新增項(xiàng)</el-button> <el-button type='primary' size='mini' @click='handleClickAddModule'>新增模塊</el-button> <el-button v-if='root' type='danger' size='mini' @click='handleClickClear'>清空配置</el-button> <el-button v-else type='danger' size='mini' @click='handleClickDeleteModule'>刪除模塊</el-button> <div v-for='(value, index) in configJsonProperty' :key='index + ’property’'> <el-input type='text' size='mini' placeholder='key' clearable v-model='value[0]'></el-input> : <el-input type='text' size='mini' placeholder='value' clearable v-model='value[1]'></el-input> <el-button type='danger' size='mini' @click='handleClickDeleteProperty(index)'>刪除該項(xiàng)</el-button> </div> <div v-for='(value, index) in configJsonChildren' :key='index + ’child’'> <config-module :index='index' @change='changeChildName' @commit='handlerCommit' :commit='commit' :data='{key: value[0], child: value[1]}'></config-module> </div> </div></template>...data () { return { moduleName: ’’, // 綁定當(dāng)前子模塊名 configJsonProperty: [], // 這里是子模塊的property configJsonChildren: [], // 這里是子模塊下的子模塊(?I模塊^-^) ... }}...mounted () { if (this.data && this.root) { // 由于根節(jié)點(diǎn)是沒有模塊名的,數(shù)據(jù)的解析結(jié)構(gòu)是{key: moduleName, child: moduleValue},參上。 this.classify({child: this.data}) } else if (this.data) { this.classify(this.data) }}// 或者將引用根組件的地方改成下面這樣也可以:// <config-module :data='{child: config}' :root='true' :commit='commit'// @commit='handlerCommit'></config-module>// _____________________________________// mounted () {// if (this.data) {// this.classify(this.data)// }// }...classify (prop) { let data = prop.child this.moduleName = prop.key for (let key in data) { if (typeof data[key] === ’object’) { this.configJsonChildren.push([ // 這里將數(shù)組轉(zhuǎn)化為可以雙向綁定的二維數(shù)組 key, data[key] ]) } else { this.configJsonProperty.push([ key, data[key] ]) } }}

實(shí)現(xiàn)動(dòng)態(tài)增加

只需要添加空項(xiàng)就行了,但由于模塊是由父組件傳入的,所以改變模塊名也需要同步改變父組件的模塊名,而這里就用到了props中的index,代表父組件中的位置。

handleClickAddProperty () {this.configJsonProperty.push([ ’’, ’’ ])},handleClickAddModule () { this.configJsonChildren.push([ ’’, {} ])},changeModuleName (value) { this.$emit(’change’, this.index, value)},changeChildName (index, name) { this.$set(this.configJsonChildren[index], 0, name)},

孿生兄弟:動(dòng)態(tài)刪除

其實(shí),增加數(shù)據(jù)和刪除數(shù)據(jù)無外乎就是,本地?cái)?shù)據(jù)本地改,外部數(shù)據(jù)同步改:

handleClickClear () { // 如果本身就是空,就無需操作,防止誤操作,畢竟我挺討厭彈窗的 if (!this.configJsonProperty.length && !this.configJsonChildren.length) { return } // 敏感操作給個(gè)彈窗 this.$confirm(’確定清空所有配置?’, ’警告’, { confirmButtonText: ’確定’, cancelButtonText: ’取消’, type: ’warning’ }).then(() => { // 這個(gè)是本地觸發(fā)的哦! this.configJsonProperty = [] this.configJsonChildren = [] })},handleClickDeleteProperty (index) { // 本地?cái)?shù)據(jù)本地改 this.configJsonProperty.splice(index, 1)},handleClickDeleteModule () { // 外部數(shù)據(jù)傳出改,由于是刪除操作,外部銷毀了會(huì)直接導(dǎo)致本地銷毀,本地?zé)o需再銷毀 // 和改模塊名不一樣 // 改模塊名時(shí),雖然外部數(shù)據(jù)改變觸發(fā)了本地更新,但由于是push操作,并不會(huì)改變本地?cái)?shù)據(jù) this.$emit(’delete’, this.index)},deleteModule (index) { // 與handleClickDeleteProperty方法比較,一定要分清哪個(gè)是子組件觸發(fā),哪個(gè)是父組件觸發(fā) this.configJsonChildren.splice(index, 1)},

重中之重:提取這個(gè)樹結(jié)構(gòu)中的數(shù)據(jù)

數(shù)據(jù)在各個(gè)子組件中保存,怎么把它們提取出來呢?

聰明的你肯定馬上想到了我之前所說的commit變量吧,它將這個(gè)動(dòng)作分發(fā)到了各個(gè)子組件。

所以,只要每個(gè)子組件聽從命令,把數(shù)據(jù)層層上報(bào),是不是就完成了呢?

這就好比是公司總經(jīng)理想要開發(fā)一個(gè)軟件,他就只要告訴各個(gè)部門:

哎,你們軟件部負(fù)責(zé)做出軟件可行性方案;

你們市場(chǎng)部負(fù)責(zé)調(diào)查同類軟件和市場(chǎng)份額;

你們營銷部趕快出爐軟件推廣方案,等等。

然后部門總監(jiān)給各項(xiàng)目經(jīng)理發(fā)小人物,然后項(xiàng)目經(jīng)理再分解任務(wù)成需求給你。

最后做完了,流程就是:你 -》經(jīng)理-》總監(jiān)-》總經(jīng)理。

在我們這份代碼中,也是這樣子的:

第一步:你要知道任務(wù)來了:

watch: { commit (val) { if (val) { this.handleClickCommit() // 接到任務(wù) } else { this.commitData = {} // 這里也標(biāo)記一下 } }},

第一步:找到最底層的“你”,也就是找到這個(gè)樹組件的末梢節(jié)點(diǎn),

它的標(biāo)志是:

if (!this.configJsonChildren.length) { ...... } // 他沒有子節(jié)點(diǎn)了

d收集它的“工作成果”:

let obj = {}this.configJsonProperty.forEach(v => { if (v[0] && v[1]) { obj[v[0]] = v[1] } else { this.$emit(’error’) // 如果有項(xiàng)不完整,可以報(bào)錯(cuò) }})

你覺得上面代碼有沒有小問題?給你五秒想一想。

1

2

3

4

5

有沒有這樣一種情況?我們一不注意寫了兩個(gè)同樣鍵名的項(xiàng),不管是寫到了錯(cuò)的模塊里面還是怎樣。

那么在上面的代碼中,就會(huì)使得新值覆蓋舊值,就有可能導(dǎo)致嚴(yán)重的事故?。?!

所以我們改成:

handleClickCommit () { if (!this.configJsonChildren.length) { if (!this.moduleName && !this.root) { this.$emit(’error’) return } let obj = {} for (let v of this.configJsonProperty) { if (v[0] && v[1]) { if (obj.hasOwnProperty(v[0])) { this.$emit(’error’) // 啊,一不小心走神了 return } obj[v[0]] = v[1] } else { this.$emit(’error’) // 這里不需要return是因?yàn)椴粫?huì)造成嚴(yán)重后果,當(dāng)然也可以加上 // 主要是我用這個(gè)功能時(shí)會(huì)一口氣添加好多項(xiàng),也不一定全填滿,省得一個(gè)個(gè)刪。 } } this.$emit(’commit’, { // 把數(shù)據(jù)給經(jīng)理?。。∵@個(gè)殺千刀的,天天催! key: this.moduleName, // 身份狗牌 value: obj }) }}

啊,工作終于提交了,再也不擔(dān)心了,接下來的事就交給經(jīng)理去做吧!

經(jīng)理:我手下管著這么多人,不可能來一個(gè)我上交一個(gè)吧?那就等他們?nèi)可辖涣?,我再整個(gè)打包上交吧。

首先第一步,我需要一個(gè)箱子來存他們的成果:

data () { return { moduleName: ’’, configJsonProperty: [], configJsonChildren: [], commitData: {} // 存放成果的箱子 }}

接下來就等他們上交了:

handlerCommit (data) { if (!this.moduleName && !this.root) { // 領(lǐng)導(dǎo)也要有名字,但總經(jīng)理只有一個(gè) this.$emit(’error’) return } this.commitData[data.key] = data.value // 先按人頭收下成果 for (let item of this.configJsonChildren) { if (!this.commitData.hasOwnProperty(item[0])) return // 如果沒收齊,繼續(xù)等待 } // 歐耶,收齊了 let obj = {} for (let v of this.configJsonProperty) { // 這個(gè)for循環(huán)可以封成一個(gè)函數(shù)的,畢竟寫了兩次 if (v[0] && v[1]) { if (obj.hasOwnProperty(v[0])) { this.$emit(’error’) return } obj[v[0]] = v[1] } else { this.$emit(’error’) } } this.$emit(’commit’, { key: this.moduleName, value: Object.assign(obj, this.commitData) // 領(lǐng)導(dǎo)自己的成果加上員工的成果 })}

還記得上面我讓你記下的地方嗎?

handlerCommit (data) { console.log(data) // 匯總數(shù)據(jù),在這里可以發(fā)送給后臺(tái)了 this.commit = false // 任務(wù)完成標(biāo)志}

watch: { commit (val) { if (val) { this.handleClickCommit() } else { this.commitData = {} // 初始化子組件 } }},

到這里,嵌套組件也大致完工了,貼全代碼:

<template> <div class='config-module-warp'> <div class='config-head'> <span v-if='root'>配置:</span> <div v-else> <el-input type='text' size='mini' placeholder='模塊名' clearable v-model='moduleName' @change='changeModuleName'></el-input> </div> <el-button type='primary' size='mini' @click='handleClickAddProperty'>新增項(xiàng)</el-button> <el-button type='primary' size='mini' @click='handleClickAddModule'>新增模塊</el-button> <el-button v-if='root' type='danger' size='mini' @click='handleClickClear'>清空配置</el-button> <el-button v-else type='danger' size='mini' @click='handleClickDeleteModule'>刪除模塊</el-button> </div> <div v-for='(value, index) in configJsonProperty' :key='index + ’property’'> <el-input type='text' size='mini' placeholder='key' clearable v-model='value[0]'></el-input> : <el-input type='text' size='mini' placeholder='value' clearable v-model='value[1]'></el-input> <el-button type='danger' size='mini' @click='handleClickDeleteProperty(index)'>刪除該項(xiàng)</el-button> </div> <div v-for='(value, index) in configJsonChildren' :key='index + ’child’'> <config-module :index='index' @change='changeChildName' @delete='deleteModule' @commit='handlerCommit' :commit='commit' :data='{key: value[0], child: value[1]}'></config-module> </div> </div></template><script>export default { name: ’configModule’, props: [’data’, ’root’, ’commit’, ’index’], data () { return { moduleName: ’’, configJsonProperty: [], configJsonChildren: [], commitData: {}, error: false } }, watch: { commit (val) { if (val) { this.handleClickCommit() } else { this.commitData = {} this.error = false } } }, computed: { }, mounted () { if (this.data) { this.classify(this.data) } }, methods: { classify (prop) { let data = prop.child this.moduleName = prop.key for (let key in data) { if (typeof data[key] === ’object’) { this.configJsonChildren.push([ key, data[key] ]) } else { this.configJsonProperty.push([ key, data[key] ]) } } }, handleClickAddProperty () { this.configJsonProperty.push([ ’’, ’’ ]) }, handleClickAddModule () { this.configJsonChildren.push([ ’’, {} ]) }, handleClickClear () { if (!this.configJsonProperty.length && !this.configJsonChildren.length) { return } this.$confirm(’確定清空所有配置?’, ’警告’, { confirmButtonText: ’確定’, cancelButtonText: ’取消’, type: ’warning’ }).then(() => { this.configJsonProperty = [] this.configJsonChildren = [] }) }, handleClickDeleteProperty (index) { this.configJsonProperty.splice(index, 1) }, handleClickDeleteModule () { this.$emit(’delete’, this.index) }, deleteModule (index) { this.configJsonChildren.splice(index, 1) }, changeModuleName (value) { this.$emit(’change’, this.index, value) }, changeChildName (index, name) { this.$set(this.configJsonChildren[index], 0, name) }, handleClickCommit () { if (!this.configJsonChildren.length) { if (!this.moduleName && !this.root) { this.$emit(’error’) return } let obj = {} for (let v of this.configJsonProperty) { if (v[0] && v[1]) { if (obj.hasOwnProperty(v[0])) { this.$emit(’error’) return } obj[v[0]] = v[1] } else { this.$emit(’error’) } } this.$emit(’commit’, { key: this.moduleName, value: obj }) } }, handlerCommit (data) { if (!this.moduleName && !this.root) { this.$emit(’error’) return } this.commitData[data.key] = data.value for (let item of this.configJsonChildren) { if (!this.commitData.hasOwnProperty(item[0])) return } let obj = {} for (let v of this.configJsonProperty) { if (v[0] && v[1]) { if (obj.hasOwnProperty(v[0])) { this.$emit(’error’) return } obj[v[0]] = v[1] } else { this.$emit(’error’) } } this.$emit(’commit’, { key: this.moduleName, value: Object.assign(obj, this.commitData) }) } }}</script>

總結(jié)

其實(shí)聰明的人根本就不需要我總結(jié)嘛,代碼是最好的語言

所以這里我提出一些我的不足和沒做完的部分,不過都是細(xì)枝末節(jié)啦:

第一個(gè)是錯(cuò)誤的處理,我這邊沒有加上

第二個(gè)是模塊應(yīng)該有折疊功能,不然配置多看著就眼花繚亂,

不過v-show的使用大家應(yīng)該也是登峰造極了。

然后,大家有什么意見和建議都可以在下方反饋。

感謝大家看完這一篇長文,么么噠~希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 杭州网络公司_百度SEO优化-外贸网络推广_抖音小程序开发-杭州乐软科技有限公司 | 广西绿桂涂料--承接隔热涂料、隔音涂料、真石漆、多彩仿石漆等涂料工程双包施工 | 新型游乐设备,360大摆锤游乐设备「诚信厂家」-山东方鑫游乐设备 新能源汽车电池软连接,铜铝复合膜柔性连接,电力母排-容发智能科技(无锡)有限公司 | 楼梯定制_楼梯设计施工厂家_楼梯扶手安装制作-北京凌步楼梯 | 老房子翻新装修,旧房墙面翻新,房屋防水补漏,厨房卫生间改造,室内装潢装修公司 - 一修房屋快修官网 | 电动卫生级调节阀,电动防爆球阀,电动软密封蝶阀,气动高压球阀,气动对夹蝶阀,气动V型调节球阀-上海川沪阀门有限公司 | 称重传感器,测力传感器,拉压力传感器,压力变送器,扭矩传感器,南京凯基特电气有限公司 | 长沙网站建设制作「网站优化推广」-网页设计公司-速马科技官网 | 低粘度纤维素|混凝土灌浆料|有机硅憎水粉|聚羧酸减水剂-南京斯泰宝 | 自动螺旋上料机厂家价格-斗式提升机定制-螺杆绞龙输送机-杰凯上料机 | WF2户外三防照明配电箱-BXD8050防爆防腐配电箱-浙江沃川防爆电气有限公司 | 手机存放柜,超市储物柜,电子储物柜,自动寄存柜,行李寄存柜,自动存包柜,条码存包柜-上海天琪实业有限公司 | 灰板纸、灰底白、硬纸板等纸品生产商-金泊纸业 | 无锡不干胶标签,卷筒标签,无锡瑞彩包装材料有限公司 | PE一体化污水处理设备_地埋式生活污水净化槽定制厂家-岩康塑业 | 泰安塞纳春天装饰公司【网站】 | 算命免费_生辰八字_免费在线算命 - 卜算子算命网 | 培训中心-海南香蕉蛋糕加盟店技术翰香原中心官网总部 | 珠光砂保温板-一体化保温板-有釉面发泡陶瓷保温板-杭州一体化建筑材料 | 武汉天安盾电子设备有限公司 - 安盾安检,武汉安检门,武汉安检机,武汉金属探测器,武汉测温安检门,武汉X光行李安检机,武汉防爆罐,武汉车底安全检查,武汉液体探测仪,武汉安检防爆设备 | 棕刚玉-白刚玉厂家价格_巩义市东翔净水材料厂 | 逗网红-抖音网红-快手网红-各大平台网红物品导航 | 智慧钢琴-电钢琴-便携钢琴-数码钢琴-深圳市特伦斯乐器有限公司 | 扬子叉车厂家_升降平台_电动搬运车|堆高车-扬子仓储叉车官网 | 铣刨料沥青破碎机-沥青再生料设备-RAP热再生混合料破碎筛分设备 -江苏锡宝重工 | 东莞动力锂电池保护板_BMS智能软件保护板_锂电池主动均衡保护板-东莞市倡芯电子科技有限公司 | 建筑工程资质合作-工程资质加盟分公司-建筑资质加盟 | 船老大板材_浙江船老大全屋定制_船老大官网 | 东莞螺丝|东莞螺丝厂|东莞不锈钢螺丝|东莞组合螺丝|东莞精密螺丝厂家-东莞利浩五金专业紧固件厂家 | 书法培训-高考书法艺考培训班-山东艺霖书法培训凭实力挺进央美 | 流水线电子称-钰恒-上下限报警电子秤-上海宿衡实业有限公司 | 众品地板网-地板品牌招商_地板装修设计_地板门户的首选网络媒体。 | 钢木实验台-全钢实验台-化验室通风柜-实验室装修厂家-杭州博扬实验设备 | 全自动烧卖机厂家_饺子机_烧麦机价格_小笼汤包机_宁波江北阜欣食品机械有限公司 | 水稻烘干机,小麦烘干机,大豆烘干机,玉米烘干机,粮食烘干机_巩义市锦华粮食烘干机械制造有限公司 水环真空泵厂家,2bv真空泵,2be真空泵-淄博真空设备厂 | BAUER减速机|ROSSI-MERSEN熔断器-APTECH调压阀-上海爱泽工业设备有限公司 | 背压阀|减压器|不锈钢减压器|减压阀|卫生级背压阀|单向阀|背压阀厂家-上海沃原自控阀门有限公司 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | hdpe土工膜-防渗膜-复合土工膜-长丝土工布价格-厂家直销「恒阳新材料」-山东恒阳新材料有限公司 ETFE膜结构_PTFE膜结构_空间钢结构_膜结构_张拉膜_浙江萬豪空间结构集团有限公司 | 郑州爱婴幼师学校_专业幼师培训_托育师培训_幼儿教育培训学校 | 上海防爆真空干燥箱-上海防爆冷库-上海防爆冷柜?-上海浦下防爆设备厂家? | 武汉森源蓝天环境科技工程有限公司-为环境污染治理提供协同解决方案 |