什么是Picker組件

對標PC端的Select標簽, 移動端的選擇框一般是在viewPort底部彈出

Picker組件存在的問題

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

解決思路

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

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

選項解釋

• wrapper: picker函數編程參數
• props: 組件選項的選項配置
• on: 組件選項的時間綁定

解決方案

目錄劃分

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

描繪Picker容器

Picker.vue文件作用:

• 繪制Picker容器
• 利用transition內置組件結合css3的animation做動畫過渡

代碼如下:

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

創(chuàng)建Picker

思路大綱

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

Picker函數

• 調用create函數生成Picker實例
• 判斷實例是否存在
• 保留當前組件選項以及配置
• 更改Picker組件的show屬性彈出彈窗，并且安插到body下

create

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

為什么需要在requestAnimationFrame里去取動畫時間, 而不是在mounted直接可以獲取?

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

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

show

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

hide

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

為什么采用setTimeout去刪除

使用監(jiān)聽transtionend會有一個問題:

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

remove

remove函數作用是刪除真實DOM、清除延時器、將timer以及Picker實例置為null, 調用GC

updateChildrenComponent

Picker組件完成后，發(fā)現(xiàn)更改傳入組件的里的props沒有重新，所以這里寫了一個手動觸發(fā)更新組件的函數，組件vnode有4個鉤子函數，prepatch是做為update時調用，值有兩個，第一個是上一次的vnode，而第二個就是更改后的vnode，所以我們在PickerCommand函數里預暫了原先vnode以及Component，做為diff的舊vnode，調用此函數既可以更新組件

結束語

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

最新評論