vue-photo-preview是一個(gè)移動(dòng)端多圖預(yù)覽插件,網(wǎng)上很多它的使用方法盏浇,這里簡單記錄下它的一些常用配置
默認(rèn)大圖點(diǎn)開后如下
(上面圖片是瀏覽器模擬手機(jī)打開的頁面嬉愧,當(dāng)檢測到有鼠標(biāo)時(shí)才會(huì)顯示左右箭頭曼氛,手機(jī)上不會(huì)出現(xiàn)這個(gè)箭頭)
例如衙解,有個(gè)默認(rèn)配置讓我覺得用起來不是很方便阳柔,關(guān)閉預(yù)覽大圖的時(shí)候要點(diǎn)擊右上角關(guān)閉按鈕或者垂直下拉才能關(guān)閉,設(shè)置tapToClose這個(gè)屬性為true可實(shí)現(xiàn)點(diǎn)擊大圖關(guān)閉預(yù)覽蚓峦。
let options = {
fullscreenEl: false, //控制是否顯示右上角全屏按鈕
closeEl: false, //控制是否顯示右上角關(guān)閉按鈕
tapToClose: true, //點(diǎn)擊滑動(dòng)區(qū)域應(yīng)關(guān)閉圖庫
shareEl: false, //控制是否顯示分享按鈕
zoomEl: false, //控制是否顯示放大縮小按鈕
counterEl: false, //控制是否顯示左上角圖片數(shù)量按鈕
arrowEl: true, //控制如圖的左右箭頭(pc瀏覽器模擬手機(jī)時(shí))
tapToToggleControls: true, //點(diǎn)擊應(yīng)切換控件的可見性
clickToCloseNonZoomable: true //點(diǎn)擊圖片應(yīng)關(guān)閉圖庫舌剂,僅當(dāng)圖像小于視口的大小時(shí)
};
補(bǔ)充一點(diǎn),圖片如果是異步獲取枫匾,那么在獲取之后要使用this.$previewRefresh()來重置一下架诞,不然不生效。
不是很全干茉,陸續(xù)補(bǔ)充,有錯(cuò)誤地方請(qǐng)指正很泊。