viewer vue 文档_vue基于viewer实现的图片查看器
vue2-viewer
vue2-viewer 是一款強大的圖像瀏覽插件，可以實現圖像的放大預覽，旋轉，任意比例放大和縮小等功能
vue2-viewer 是viewer.js vue的實現，效果以及樣式完全移植自viewer.js關于viewer.js可以參考鏈接
[http://fengyuanchen.github.io...]
插件中所有的效果均大量地使用了css3的新特性替換了viewer.js中的js動畫，所以vue2-viewer主要實用場景是現代瀏覽器中。
使用文檔
安裝
npm install --save vue2-viewer
在main.js中引入并使用插件
import ImageViewer from 'vue2-viewer';
Vue.use(ImageViewer);
插件會在全局注冊vue-viewer組件
使用組件
vue2-viewer 提供兩種使用模式，單圖片模式和多圖列表模式。
單圖片模式
props
參數
說明
類型
必須
thumb
要顯示的小圖的鏈接
string
true
full
點擊放大后的大圖鏈接
string
true
示例：
:thumb="image"
:full="image">
export default {
name: 'app',
data () {
return {
msg: 'vue2-viewer-test',
image: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3427452369,2586833644&fm=173&app=25&f=JPEG?w=580&h=347&s=908FF35A050626E2428C001E030090D6',
}
}
}
效果展示：
多圖片模式
props
參數
說明
類型
必須
thumb
要顯示的小圖列表的鏈接數組
array
true
full
點擊放大后的大圖的鏈接數組
array
true
list-ul-class
默認小圖的列表外層ul的自定義class 用于自定義列表的樣式，包括ul內部的slot的內容的樣式都可以通過這個方式自定義
string
false
Scoped Slot
name
說明
~
列表中的每一個元素中除了默認圖以外的內容
示例：
:thumb="imageList"
list-ul-class="image-list"
:full="imageList">
×
export default {
name: 'app',
data () {
return {
msg: 'vue2-viewer-test',
imageList: [
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550224739247&di=512032866bea6329b1e46c735d50ac8b&imgtype=0&src=http%3A%2F%2Fimglf2.ph.126.net%2FdHH6OM2rD8JucPGAotUfag%3D%3D%2F6608219914074710297.jpg',
'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=488030022,1694816207&fm=173&app=25&f=JPEG?w=580&h=347&s=A08FB35A5E0616C664F5631C030010D6',
'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2574767313,3929397124&fm=173&app=25&f=JPEG?w=580&h=868&s=B784EEA3460236E17A1F137F0300A058'
]
}
},
methods: {
onRemove(index) {
alert(index);
}
}
}
.image-list{
margin: 0; padding: 0
}
.image-list li {
display: inline-block;
margin: 0 10px;
list-style: none;
position: relative;
}
.image-list li img {
box-shadow: 0 0 5px #333;
}
.icon-remove{
width: 20px; height:20px;
text-align: center; line-height: 20px;
background:#f33;
position:absolute; top:-10px; right:-10px;
border-radius: 10px;
cursor: pointer;
color:#fff;
}
a {
color: #42b983;
}
效果展示：
總結
以上是生活随笔為你收集整理的viewer vue 文档_vue基于viewer实现的图片查看器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hadoop元数据合并过程_Hadoop
- 下一篇： 【WebPack】引入Vue；认识Plu