標籤:save line col 預設值 ext int 就是 optional 頁面
vue-picture-preview-extend
vue-picture-preview的擴充版本,本文中外掛程式是由其他大神開發,我做了一些擴充,原文連結:https://segmentfault.com/u/x_logic。
預覽(原文章的預覽,非擴充後的)
安裝
npm install --save vue-picture-preview-extend
使用
首先在項目的入口檔案中引入, 調用 Vue.use 安裝。
import vuePicturePreview from ‘vue-picture-preview‘Vue.use(vuePicturePreview)
在根組件添加 lg-preview 組件的位置
<!-- Vue root compoment template --><div id="app"> <router-view></router-view> <lg-preview></lg-preview></div>
對於所有圖片都可以使用 v-preview 指令來綁定他們的預覽功能
<img v-for="(img,index) in imgs" v-preview="img.url" :src="img.url" :alt="img.title" :key="index" preview-title-enable="true" preview-nav-enable="true"
preview-top-title-tnable="true"
preview-title-extend="false"
data-title="這裡是頂部標題"
>
以上為使用方法,下面說說外掛程式的api
原有api:
- isTitleEnable: (boolean, optional) 設定 preview-title-enable="false" 將禁用底部標題. 預設值: true.
- isHorizontalNavEnable: (boolean, optional) 設定 preview-nav-enable="false" 將禁用水平導航. 預設值: true
擴充版本api:
- isCurrentAndAllTitle:(boolean,optional) 設定 preview-title-extend=false 將底部標題(當前頁/總頁數)類型進行關閉(開啟時isTitleEnable)將無效。預設值:true
- isTopTitleShow:(boolean,optional) 設定preview-top-title-tnable=false 將頂部標題禁用,預設值:true.
- topTitle:(string,optional) 設定data-title 設定頂部標題文本,無預設值
擴充版新增功能(含修改):
1. 新增底部標題類型(原有類型取alt屬性,考慮到alt可能別有用途或者就是想直接要一個index/total這樣的當前頁/總頁數的底部標題,設定了這種類型取alt的底部標題類型就不會顯示)
2. 新增頂部標題(通過取img上設定的data-title產生)
3. 新增一個左右滑動切換圖片
4. 新增第一張的提示,最後一張的提示
其他想說:
1. 本來想給大家做分組(就是同一個頁面上大家想預覽的圖片可能是好多組,所以外掛程式可能不滿足)。但是因為公司時間緊,沒有做,思路就是增加一個欄位比如data-group 然後對list進行分組然後具體思路,如果有大佬想擴充的話 我可以無條件奉上我現有擴充的代碼,
2. 本外掛程式取自vue-picture-preview,原文連結:1190000009060116
3. 本人qq:421217189 15274527 歡迎加我一起討論前端技術
Vue.js圖片預覽外掛程式