功能背景：
最近項(xiàng)目上遇到一個(gè)需求：在點(diǎn)擊圖片預(yù)覽時(shí)，彈出圖片和遮罩头谜，左右可切換圖片骏掀，上下為放大圖片，但重點(diǎn)是部分頁(yè)面預(yù)覽時(shí)柱告，遮罩不能為全屏截驮，要留出最左側(cè)一塊區(qū)域，在預(yù)覽圖片的同時(shí)末荐，能進(jìn)行表單編輯侧纯，大概布局：
未打開預(yù)覽頁(yè)面布局（如下圖）：
某個(gè)頁(yè)面點(diǎn)擊圖片打開預(yù)覽為四分之三屏（如下圖）：
其他頁(yè)面點(diǎn)擊圖片打開預(yù)覽為正常全屏（如下圖）：
— — — — — — — — — — — — — — — — — — — — — — — — — — —
以上就是大概的功能需求背景，接下來(lái)就是各種嘗試甲脏，最終終于找到解決方案并完成一個(gè)dome眶熬。
— — — — — — — — — — — — — — — — — — — — — — — — — — —
項(xiàng)目主框架為vue妹笆，最終應(yīng)用的圖片預(yù)覽組件為 v-viewer，此組件的屬性可以查看：https://github.com/fengyuanchen/viewerjs
第一步：安裝依賴
npm install --save v-viewer
第二步：全局引入
在main.js文件中娜氏，進(jìn)行全局引入拳缠，并初始化
第三步：在頁(yè)面組件中使用
注意：
1.全局注冊(cè)完后，只要是viewer標(biāo)簽中包裹的img標(biāo)簽贸弥，viewer會(huì)自動(dòng)去處理窟坐；
2.其中photos變量必須為數(shù)組；
3.如果圖片是異步獲取绵疲，那么viewer標(biāo)簽上必須加 images屬性哲鸳，值為photos數(shù)組
以上步驟可以應(yīng)用于全屏預(yù)覽（如上圖：正常全屏預(yù)覽狀態(tài)），如果不需要自定義預(yù)覽寬度盔憨，那么以上步驟就可以達(dá)到目的徙菠，無(wú)需以下步驟。
如果一個(gè)應(yīng)用中部分頁(yè)面需要自定義預(yù)覽寬度（如上圖：四分之三屏預(yù)覽）郁岩，部分頁(yè)面又需要全屏預(yù)覽（如上圖：正常全屏預(yù)覽狀態(tài)）婿奔，那么接下來(lái)關(guān)鍵步驟：
第四步：為viewer增加一個(gè)class
在router -> index.js 中加入下圖紅框內(nèi)的代碼：
v-viewer組件的屬性中有一個(gè)屬性為className，再和router.beforeEach全局守衛(wèi)配合來(lái)區(qū)分判斷问慎。
1.‘/about’：是需要自定義預(yù)覽寬度的頁(yè)面路徑（可根據(jù)實(shí)際情況而定）
2.‘halfBg’：是需要增加class的name（可根據(jù)實(shí)際情況而定）
第五步：為增加的class萍摊，寫入樣式
在app.vue中加入全局樣式
其中310px可按照實(shí)際情況而定，-155px為310px的二分之一
結(jié)束如叼，完成冰木。
— — — — — — — — — — — — — — — — — — — — — — — — — — —
以上五個(gè)步驟，基本已經(jīng)滿足需求薇正。如需要改變自定義預(yù)覽寬度的位置片酝，可在第五步中調(diào)整樣式即可囚衔。
— — — — — — — — — — — — — — — — — — — — — — — — — — —
希望能夠幫助到和我有類似需求的小伙伴挖腰，如有更好的方案大家可以一起探討。
