什么是Picker組件

對(duì)標(biāo)PC端的Select標(biāo)簽, 移動(dòng)端的選擇框一般是在viewPort底部彈出

Picker組件存在的問(wèn)題

• Picker通常以fixed布局，但是我們?cè)趯慞icker組件時(shí)有遇到過(guò)該組件無(wú)法在viewport的底部彈出，而是在組件內(nèi)部彈出，導(dǎo)致樣式混淆，不符合C端審美，造成以上問(wèn)題的原因是因?yàn)閇層疊上下文]的原因，fixed布局并不是基于viewport為底板，而是當(dāng)前的層疊上下文
• Picker若是放置在根組件下的話會(huì)造成數(shù)據(jù)流流向出現(xiàn)混淆，嵌套過(guò)深層級(jí)的組件無(wú)法很便利的觸發(fā)Picker的顯示與隱藏，需要結(jié)合狀態(tài)管理vuex來(lái)做處理或者通過(guò)透?jìng)?listeners，這在一定程度上增加了開發(fā)者的心智負(fù)擔(dān)

解決思路

利用聲明式編程將Picker放置在Body下去使用, 可以較好的規(guī)避以上的兩個(gè)問(wèn)題，例如利用以下方式調(diào)用picker的顯示與隱藏

 this.$picker(組件選項(xiàng), {
 wrapper: {
  props: {},
  on: {}
 },
 props: {},
 on: {}
 })

選項(xiàng)解釋

• wrapper: picker函數(shù)編程參數(shù)
• props: 組件選項(xiàng)的選項(xiàng)配置
• on: 組件選項(xiàng)的時(shí)間綁定

解決方案

目錄劃分

 - Components
  - BaseUsedComponents
   - Picker
    - Picker.vue
    - index.js
 - main.js

描繪Picker容器

Picker.vue文件作用:

• 繪制Picker容器
• 利用transition內(nèi)置組件結(jié)合css3的animation做動(dòng)畫過(guò)渡

代碼如下:

 <transition name="slideup">
 <div class="picker" v-if="show">
  <slot></slot>
  <div class="mask"></div>
 </div>
 </transition>

創(chuàng)建Picker

思路大綱

• 定義一個(gè)Picker函數(shù), 該函數(shù)需要做以下幾點(diǎn):
  • 生成Picker的實(shí)例PickerInstance
  • 將PickerInstance.show置為true
  • 將Picker容器放入到body底部
• Picker組件生成需要使用防抖措施，不能在連續(xù)點(diǎn)擊下
• 將傳入的組件選項(xiàng)根據(jù)props與on屬性生成vnode，并且放置到默認(rèn)插槽內(nèi)
• 點(diǎn)擊mask元素會(huì)將Picker隱藏，這里需要再定義一個(gè)hide方法
• hide方法需要做以下幾個(gè)問(wèn)題
  • 將實(shí)例下show屬性置為false
  • 刪除body下的安插Picker容器
  • 將實(shí)例置為Null，調(diào)用GC

Picker函數(shù)

• 調(diào)用create函數(shù)生成Picker實(shí)例
• 判斷實(shí)例是否存在
• 保留當(dāng)前組件選項(xiàng)以及配置
• 更改Picker組件的show屬性彈出彈窗，并且安插到body下

create

• 創(chuàng)建一個(gè)el作為Picker的容器，安插到body下
• 在render函數(shù)里，Picker將之前傳入的組件選項(xiàng)作為默認(rèn)插槽放置到內(nèi)部，并且自身作為當(dāng)前實(shí)例的子組件充當(dāng)根元素
• mounted函數(shù)里獲取對(duì)應(yīng)的transition時(shí)間作為之后hide時(shí)觸發(fā)實(shí)際

為什么需要在requestAnimationFrame里去取動(dòng)畫時(shí)間, 而不是在mounted直接可以獲取?

組件的mounted函數(shù)是在初始化渲染后就會(huì)調(diào)用,而Toast組件通過(guò)設(shè)置showStatus去觸發(fā)transition的enter函數(shù)(雖然Toast組件mounted在之前就會(huì)被調(diào)用，但此時(shí)toast dom上不存在transition class)，此時(shí)由于觸發(fā)的是data.setter函數(shù)，從而對(duì)Watcher進(jìn)行派發(fā)更新，導(dǎo)致所有的操作都在nextTick(也就是微任務(wù))里執(zhí)行, 所以調(diào)用順序是這樣的:

Toast組件Mounted -> 父組件Mounted(也就是現(xiàn)在所處的Mounted函數(shù), 注意此時(shí)因?yàn)閠oast里的transition沒(méi)有攜帶appear屬性，導(dǎo)致transition enter函數(shù)不會(huì)觸發(fā)，從而transition class不會(huì)被添加) -> nextTick() -> Toast組件update(v-show) -> transition(v-show觸發(fā)enter函數(shù)) -> toast dom增加了transition類名 -> window.getComputedStyle(toast)獲取toastDuration,我們也可以在nextTick里獲取，介于transition active在動(dòng)畫全過(guò)程都會(huì)有，并且requestAnimationFrame屬于瀏覽器重繪（painter）鉤子函數(shù)，比微任務(wù)還要靠后執(zhí)行，所以在這里獲取

show

• 獲取Picker的實(shí)例，Picker是作為該實(shí)例的根元素
• 標(biāo)記Mounted屬性，表示已經(jīng)安插
• 監(jiān)聽show屬性，在show置為false時(shí)調(diào)用hide函數(shù)
• 安插到body下

hide

• 重置Mounted屬性為false
• 將show函數(shù)里的定義的teardown監(jiān)聽函數(shù)刪除掉，釋放內(nèi)存
• 設(shè)置延時(shí)器作為刪除真實(shí)DOM的鉤子函數(shù)

為什么采用setTimeout去刪除

使用監(jiān)聽transtionend會(huì)有一個(gè)問(wèn)題:

 Vue本身在transition組件子節(jié)點(diǎn)里監(jiān)聽了transitionend(或者animationend)
 動(dòng)畫完成后就會(huì)刪除掉transition class, 那么此時(shí)transition-property就會(huì)消失掉
 根據(jù)文檔顯示, transition-property消失后將不觸發(fā)transition鉤子函數(shù)，繼而無(wú)法觸發(fā)
 transitionend函數(shù)，導(dǎo)致remove可能會(huì)無(wú)法調(diào)用，留下之前的ToastConainer

remove

remove函數(shù)作用是刪除真實(shí)DOM、清除延時(shí)器、將timer以及Picker實(shí)例置為null, 調(diào)用GC

updateChildrenComponent

Picker組件完成后，發(fā)現(xiàn)更改傳入組件的里的props沒(méi)有重新，所以這里寫了一個(gè)手動(dòng)觸發(fā)更新組件的函數(shù)，組件vnode有4個(gè)鉤子函數(shù)，prepatch是做為update時(shí)調(diào)用，值有兩個(gè)，第一個(gè)是上一次的vnode，而第二個(gè)就是更改后的vnode，所以我們?cè)赑ickerCommand函數(shù)里預(yù)暫了原先vnode以及Component，做為diff的舊vnode，調(diào)用此函數(shù)既可以更新組件

結(jié)束語(yǔ)

Picker組件只是一個(gè)例子，還可以使用更多方法去實(shí)現(xiàn)。到此這篇關(guān)于移動(dòng)端Vue2.x Picker的全局調(diào)用實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue2.x Picker全局調(diào)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！