Element Ui為el-image組件帶了圖片預(yù)覽功能，只需添加參數(shù):preview-src-list="srcList"即可實(shí)現(xiàn)绣硝，但靈活性欠缺。
比如我的項(xiàng)目中要為每個(gè)el-image元素實(shí)現(xiàn)左鍵點(diǎn)擊選中撑刺，因?yàn)閳D片預(yù)覽功能默認(rèn)是鼠標(biāo)左鍵鹉胖，沖突了。
使用方法：
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
components : { ElImageViewer }
<el-image-viewer
v-if="showViewer"
:on-close="closeViewer"
:url-list="viewerUrlList" />
// 必須用v-if够傍，如用v-show會(huì)出現(xiàn)二次打開后鍵盤事件無法觸發(fā)（個(gè)人猜測(cè)焦點(diǎn)問題甫菠，還需看源碼才能確認(rèn)）
// 每次colseViewer時(shí)如將 viewerUrlList=[] 會(huì)報(bào)錯(cuò)。
當(dāng)預(yù)覽一些列圖片的時(shí)候冕屯，如何保證點(diǎn)擊的那個(gè)圖出現(xiàn)在預(yù)覽界面的第一個(gè)呢寂诱？
<el-image class="imgBlock"
v-for="(url, index) in urls"
:key="index"
:src="url"
fit="contain"
lazy
@contextmenu.prevent="openImgViewer(index)"> // 此處可以獲取到index
methods:{
openImgViewer(index){
// 將index的那個(gè)圖片放在第一位
this.viewerUrlList=this.urls.slice(index).concat(this.urls.slice(0, index))
// 顯示預(yù)覽組件
this.showViewer = true
}
}
