国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue中使用viewerjs

sarva / 1251人閱讀

摘要：項目創建安裝刪掉生成的項目里面的修改路由創建一個代碼圖片描述相關配置項詳情見下面鍵盤事件僅在下可用鍵退出全屏關閉退出停止播放鍵停止播放鍵查看上一張圖片鍵查看下一張圖片鍵放大圖片鍵縮小圖片組合鍵縮小到初始大小組合鍵放大到原始大小配置參

項目創建 
vue init webpack mytest001
安裝viewerjs 
npm install viewerjs

刪掉生成的項目里面的helloWord.vue 修改路由 創建一個index.vue

index.vue代碼:
鍵盤事件

僅在modal mode下可用
ESC 鍵: 退出全屏/關閉/退出/停止播放;
Space 鍵: 停止/播放;
←鍵: 查看上一張圖片;
→鍵: 查看下一張圖片;
↑鍵: 放大圖片;
↓鍵: 縮小圖片;
Ctrl + 0 組合鍵: 縮小到初始大小;
Ctrl + 1 組合鍵: 放大到原始大小;

配置參數

如果要更改全局默認選項，可以使用view . setdefaults(選項)

參數名稱 參數類型 默認值 說明
initialViewIndex Number 0 定義用于查看的圖像的初始索引
inline Boolean false 支持 inline mode
button Boolean true 是否顯示查看圖片時右上角的關閉按鈕
navbar Boolean / Number true 是否顯示底部導航欄
0 或者 false :不顯示
1 或者 true :顯示
2 :當屏幕寬度大于768px時顯示
3 :當屏幕寬度大于992px時顯示
4 :當屏幕寬度大于1200px時顯示
title Boolean / Number /
Function / Array		 true 0 或者 false 時不顯示
1或者true或者function或者array時顯示
2 :當屏幕寬度大于768px時顯示
3 :當屏幕寬度大于992px時顯示
4 :當屏幕寬度大于1200px時顯示
function 在函數體內返回標題
array 第一個參數表示可見性(0-4) 第二個參數就是標題
toolbar Boolean / Number / Object true 標題欄是否顯示和布局
0 或者 false 時不顯示
1或者true或者時顯示
2 :當屏幕寬度大于768px時顯示
3 :當屏幕寬度大于992px時顯示
4 :當屏幕寬度大于1200px時顯示
Object : Object類型詳解
tooltip Boolean true 放大或縮小時顯示的百分比的文字提示
true : 顯示
false : 不顯示
movable Boolean true 是否可以拖動圖片
zoomable Boolean true 是否可以縮放圖片
rotatable Boolean true 是否可以旋轉圖片
scalable Boolean true 是否可以縮放圖片
transition Boolean true 為一些特殊元素啟用CSS3轉換。
fullscreen Boolean true 允許全屏播放
keyboard Boolean true 啟用鍵盤支持
backdrop Boolean / String true 啟用 modal 為false的時候不支持點擊背景關閉
loading Boolean true 加載圖片的時候的loading圖標
loop Boolean true 是否可以循環查看圖片
interval Number 5000 定義圖片查看器的最小的寬度
minWidth Number 200 定義圖片查看器的最小的高度
minHeight Number 100 播放圖片時 距離下一張圖片的間隔時間
zoomRatio Number 0.1 利用鼠標滾輪縮放圖片時的比例
minZoomRatio Number 0.01 縮小圖片的最小比例
maxZoomRatio Number 100 放大圖片的放大比例
zIndex Number 2015 定義查看器的CSS z-index值 modal 模式下
zIndexInline Number 0 定義查看器的CSS z-index值 inline 模式下
url String / Function src 原始圖像URL
如果是一個字符串，應該圖像元素的屬性之一
如果是一個函數，應該返回一個有效的圖像URL
container Element / String body 將查看器置于modal模式的容器
只有在 inline為 false的時候才可以使用
filter Function null 過濾圖像以便查看(如果圖像是可見的，應該返回true)
toggleOnDblclick Boolean true 當你放大或者縮小圖片時 雙擊還原
ready Function null 當查看圖片時被觸發的函數 只會觸發一次
show Function null 當查看圖片時被觸發的函數 每次查看都會觸發
shown Function null 當查看圖片時被觸發的函數 每次查看都會觸發 在show之后
hide Function null 當關閉圖片查看器時被觸發的函數 每次關閉都會觸發
hidden Function null 當關閉圖片查看器時被觸發的函數 每次關閉都會觸發 在hide之后
view Function null 當查看圖片時被觸發的函數 每次查看都會觸發 在shown之后
viewed Function null 當查看圖片時被觸發的函數 每次查看都會觸發 在view之后
zoom Function null 在圖片縮放時觸發
zoomed Function null 在圖片縮放時觸發 在 zoom之后
toolbar Object詳解

key值列表: "zoomIn", "zoomOut", "oneToOne", "reset", "prev", "play", "next", "rotateLeft", "rotateRight", "flipHorizontal", "flipVertical"

key值名稱 說明
zoomIn 放大圖片的按鈕
zoomOut 縮小圖片的按鈕
reset 重置圖片大小的按鈕
prev 查看上一張圖片的按鈕
next 查看上一張圖片的按鈕
play 播放圖片的按鈕
rotateLeft 向左旋轉圖片的按鈕
rotateRight 向右旋轉圖片的按鈕
flipHorizontal 圖片左右翻轉的按鈕
flipVertical 圖片上下翻轉的按鈕

{key:number|Boolean} 顯示或者隱藏對應key的按鈕 為Number的時候為可見性
{key: String } 自定義按鈕的大小
{ key: Function } 自定義按鈕點擊的處理
{ key: { show: Boolean | Number, size: String, click: Function } 自定義按鈕的每個屬性

size的取值范圍: small medium default large

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/29485.html

相關文章

  • vue中使用viewerjs

    摘要：項目創建安裝刪掉生成的項目里面的修改路由創建一個代碼圖片描述相關配置項詳情見下面鍵盤事件僅在下可用鍵退出全屏關閉退出停止播放鍵停止播放鍵查看上一張圖片鍵查看下一張圖片鍵放大圖片鍵縮小圖片組合鍵縮小到初始大小組合鍵放大到原始大小配置參 項目創建 vue init webpack mytest001 安裝viewerjs npm install viewerjs 刪掉生成的項目里面的hel...

    rose 評論0 收藏0

  • 推薦輕量高效無依賴的開源JS插件和庫

    摘要：彈出層是一個輕量級的庫用于管理工具提示和彈窗效果。一個帶有的跨瀏覽器富文本編輯器。由制作，適用于每天寫作的富文本編輯器。輕量的操作庫。是一個快速簡單輕量級的瀏覽器功能檢測庫。它沒有任何的依賴，并且壓縮后僅有。極小跨平臺的全屏插件。 在這里維持一個持續更新的地方 圖片 baguetteBox.js - 是一個簡單易用的響應式圖像燈箱效果腳本。demo Lightgallery.js -...

    AlphaWallet 評論0 收藏0

  • 推薦輕量高效無依賴的開源JS插件和庫

    摘要：彈出層是一個輕量級的庫用于管理工具提示和彈窗效果。一個帶有的跨瀏覽器富文本編輯器。由制作，適用于每天寫作的富文本編輯器。輕量的操作庫。是一個快速簡單輕量級的瀏覽器功能檢測庫。它沒有任何的依賴，并且壓縮后僅有。極小跨平臺的全屏插件。 在這里維持一個持續更新的地方 圖片 baguetteBox.js - 是一個簡單易用的響應式圖像燈箱效果腳本。demo Lightgallery.js -...

    lushan 評論0 收藏0

  • 推薦輕量高效無依賴的開源JS插件和庫

    摘要：彈出層是一個輕量級的庫用于管理工具提示和彈窗效果。一個帶有的跨瀏覽器富文本編輯器。由制作，適用于每天寫作的富文本編輯器。輕量的操作庫。是一個快速簡單輕量級的瀏覽器功能檢測庫。它沒有任何的依賴，并且壓縮后僅有。極小跨平臺的全屏插件。 在這里維持一個持續更新的地方 圖片 baguetteBox.js - 是一個簡單易用的響應式圖像燈箱效果腳本。demo Lightgallery.js -...

    shuibo 評論0 收藏0

發表評論

0條評論

sarva

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<