2021laravelconftwslides9

Hunter Liu @ Laravel x Vue 2021
2021/10/17
Modal window 最佳實踐
x
Vue 3 useModal hook

Front-End Developer
Creator of vue-ﬁnal-modal
Manager of Vue.js Taiwan

hunterliu.tw
@hunterliu1003
Hunter Liu

⼤綱
Modal Window 最佳實踐

定義
“ 模態視窗－創建⼀個禁⽤主視窗的模式，
並使主視窗和⼦視窗可⾒。⽤⼾必須先與模態
視窗進⾏交互後才能對主視窗進⾏操作。
標題
遮罩
內容
按鈕
關閉

Modal 是UI 問題的優雅解決⽅案
簡化界⾯、節省空間
⽴刻吸引使⽤者注意⼒
限制操作流程
警告、提示、通知使⽤者
請求使⽤者輸⼊必要資訊
重複確認不可逆的重要操作
特點

⼀⾔不合就Modal
變成了RD 的夢魘
關閉彈窗更成為使⽤者的本能
“ 是時候重新審視這個UI 模式了
但...

常⾒的名詞
Dialog
Fullscreen Modal
Overlay
Lightbox
Modal
Non-modal
Popups
Conﬁrm
Toast
Spinner
Notiﬁcation
Mode
Alert
Window
Panel
Drawer
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

Source: https://www.nngroup.com/articles/popups/
象限

分類
Lightbox
存在遮罩
Non-lightbox
不存在遮罩
Modal
不能對背景操作
Dialog
Conﬁrm
Spinner
Fullscreen Modal
Panel
Drawer
Non-modal
能對背景操作
X Toast
Notiﬁcation
Alert

決策樹
需抓住使⽤者的注意⼒？
使⽤者是否從⼀⼩部分選項中進⾏選擇？
是否必要提供額外的內容或功能⽽不丟失主⾴⾯？
在使⽤者繼續之前，是否必要先收集少量信息？
內容是否緊急？
Yes No
Page

使⽤者是否想要將內容添加到書籤或分享內容？
內容是否主要⽤於⾏動裝置？
使⽤者離開當前⼯作流程後，預計不會返回？
是否有不同的操作相互作⽤，並且複雜？
未來是否會擴充其他操作、任務或內容？
Yes No
Page

畫⾯設計中是否會塞⼊⼤量元素？
內容⾼度是否超過裝置最⼤⾼度？
內容是否需要滾動？
設計的內容是否超過兩個以上的操作需要使⽤者完成？
設計的解決⽅案是否需要使⽤者完成⼀項以上的任務？
Yes No
Page

使⽤者是否需要經常在功能之前來回移動？
使⽤者與功能的交互是否單⼀？
內容只是暫時的？
之後使⽤者的關注點需要回到主⾴⾯？
有充分的理由說明應該使⽤Modal ⽽不是⾴⾯？
內容是否簡短？
內容是否出現在該使⽤流程結構中的最深層？
Yes No
Page

內容是否需要使⽤者⽴刻注意到？
如果你將使⽤者注意⼒從當前⾴⾯或任務上移開，
此任務會更容易完成？
當前任務是否對接下來的流程是必要的？
要求使⽤者完成的任務是否明顯節省使⽤者接下來
的操作
該任務有明確的起點與終點？
Yes No
Non-modal

內容是否為成功或錯誤訊息？
Yes No
Non-modal

你需要搜集使⽤者訊息？
你在確認使⽤者的操作？
此操作是否造成嚴重後果或不可逆轉？
使⽤者是填寫表單或做決定？
內容是防⽌或避免嚴重錯誤的警告？
Yes No
Dialog
Bottom Sheet
Nav Drawer
Panel
...

⼩結
利⽤決策樹減少⾮必要的Modal
思考怎樣對使⽤者最好，⽽不是開發最簡單
所以你是不是想累死RD？

Why create VFM
沒找到⾜夠彈性的Modal 元件
只好⾃⼰做⼀個！
Dialog
Fullscreen Modal
Overlay
Lightbox
Modal
Non-modal
Popups
Conﬁrm
Toast
Spinner
Notiﬁcation
Mode
Alert
Window
Panel
Drawer

借鑒
LockScroll
BootstrapVue
Stackable
zIndex
zIndexBase
Element UI
Attach
Vuetify
API: this.$modal.show
Dynamic Modal
Transition
FocusTrap
vue-js-modal
Vue 3 有Teleport

What is VFM
Styleless / Renderless 元件
客製化樣式，Windi CSS, Tailwind CSS
⽀援Vue 3, Vue 2, Nuxt.js
功能包含：
拖曳
縮放
巢狀
過度動畫
動態模態視窗
...更多

Props
classes
styles
transition
clickToClose
escToClose
focusTrap
overlay-class
overlay-style
overlay-transition
hide-overlay
content-class
content-style
drag
drag-selector
resize
resize-directions
ﬁt-parant
keep-changed-style
min-width
max-width
min-height
max-height
z-index-auto
z-index-base
z-index
name
modelValue
displayDirective
lockScoll
nonModal
attach

Events
@before-open
@opened
@before-close
@closed
@click-outside
@drag:start
@drag:move
@drag:end
@resize:start
@resize:move
@resize:end

API
“ $vfm.show(name) 開啟指定modal
“ $vfm.hide(name) 關閉指定modal
“ $vfm.hideAll() 關閉所有modal
“ $vfm.toggle(name, show) 切換指定modal
“ $vfm.modals 回傳所有modal 實例陣列
“ $vfm.openedModals 回傳所有開啟中的modal 實例陣列
“ $vfm.dynamicModals 回傳所有動態modal 實例陣列

Dynamic Modal
通常放在App.vue 或Layout 元件

Use cases
Fullscreen Modal
Conﬁrm Dialog
Toast
Custom Transition
Panel (Bottom sheet)

Roadmap
以Typescript 重寫
開箱即⽤，提供主題樣式內建元件：
Fullscreen Modal
Conﬁrm dialog
Toast
Panel
... more

“ 歡迎到Github 許願
hunterliu1003
https://vue-ﬁnal-modal.org

2021laravelconftwslides9

Recommended

More Related Content

Similar to 2021laravelconftwslides9 (9)

More from LiviaLiaoFontech (7)

2021laravelconftwslides9