Vueは画像をクリックして大きい図を見て拡大して縮小して引っ張るなどの機能を実現します

今年入社したばかりでプロジェクトの练习を始めました.写真をクリックして大図を见ると、よくある机能需要だと思います.时间がきついので、任务が重いので、車輪を借りるしかありません.  一般的な関連Vueのサードパーティプラグインやvue-directive-image-previewerとv-viewerに依存するなど、総合比較に基づいて最終的にv-viewerを選択した

取付

npm install v-viewer -S

はmainです.jsにおけるグローバル導入

//         
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer)
Viewer.setDefaults({
  Options: { // Options  ，                  
  	'inline': true, 
  	'button': true, //          
  	'navbar': true, //      
  	'title': true, //            
  	'toolbar': true, //      
  	'tooltip': true, //        
  	'movable': true, //        
  	'zoomable': true, //      
  	'rotatable': true, //      
  	'scalable': true, //      
  	'transition': true, //      CSS3   
  	'fullscreen': true, //        
  	'keyboard': true, //       
  	'url': 'data-source' //        url
  }
})

statement：

属性名
デフォルト
説明
inline
false
inlineモードを有効にする
button
true
右上隅の閉じるボタンを表示
navbar
true
サムネイルナビゲーション
title
true
現在の画像のタイトルを表示するかどうか
toolbar
true
ツールバーを表示
tooltip
true
ズーム率の表示
movable
true
画像が移動可能かどうか
zoomable
true
スケーリング可能かどうか
rotatable
true
回転可能かどうか
scalable
true
反転可能かどうか
transition
true
CSS 3過剰使用の有無
fullscreen
true
全画面再生
keyboard
true
キーボードがサポートされているかどうか
url
src
大きな画像のurlを設定する

効果