Vue.js圖片預覽外掛程式

來源:互聯網
上載者:User

標籤: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:

  1. isTitleEnable: (boolean, optional) 設定 preview-title-enable="false" 將禁用底部標題. 預設值: true.
  2. isHorizontalNavEnable: (boolean, optional) 設定 preview-nav-enable="false" 將禁用水平導航. 預設值: true

擴充版本api:

  1. isCurrentAndAllTitle:(boolean,optional) 設定 preview-title-extend=false 將底部標題(當前頁/總頁數)類型進行關閉(開啟時isTitleEnable)將無效。預設值:true
  2. isTopTitleShow:(boolean,optional) 設定preview-top-title-tnable=false 將頂部標題禁用,預設值:true.
  3. 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圖片預覽外掛程式

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.