如何在Vue.js項目中使用圖片預覽插件-創(chuàng)新互聯(lián)

npm install --save vue-picture-preview-extend

import vuePicturePreview from 'vue-picture-preview'
Vue.use(vuePicturePreview)

對于所有圖片都可以使用 v-preview 指令來綁定他們的預覽功能

以上為使用方法，下面說說插件的api

原有api：

1.isTitleEnable: (boolean, optional) 設(shè)置 preview-title-enable="false" 將禁用底部標題. 默認值: true.

2.isHorizontalNavEnable: (boolean, optional) 設(shè)置 preview-nav-enable="false" 將禁用水平導航. 默認值: true

擴展版本api：

1.isCurrentAndAllTitle：(boolean,optional) 設(shè)置 preview-title-extend=false 將底部標題(當前頁/總頁數(shù))類型進行關(guān)閉(開啟時isTitleEnable)將無效。默認值：true
2.isTopTitleShow：(boolean,optional) 設(shè)置preview-top-title-tnable=false 將頂部標題禁用,默認值：true.
3.topTitle:(string,optional) 設(shè)置data-title 設(shè)置頂部標題文本，無默認值
擴展版新增功能（含修改）：

　　1. 新增底部標題類型（原有類型取alt屬性，考慮到alt可能別有用途或者就是想直接要一個index/total這樣的當前頁/總頁數(shù)的底部標題，設(shè)置了這種類型取alt的底部標題類型就不會顯示）

　　2. 新增頂部標題（通過取img上設(shè)置的data-title生成）

      3. 新增一個左右滑動切換圖片

　　4. 新增第一張的提示，最后一張的提示

關(guān)于如何在Vue.js項目中使用圖片預覽插件問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道了解更多相關(guān)知識。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。