当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue基于viewer实现的图片查看器功能

vue基于viewer实现的图片查看器功能

2019年07月22日  | 移动技术网IT编程  | 我要评论

优梵艺术怎么样,www.hb122.org,金敏善

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

示例：

<vue-viewer style="display: inline-block"
 :thumb="image"
 :full="image">
</vue-viewer>
<script>
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',
 }
 }
}
</script>

效果展示：

 

多图片模式

props

参数 说明 类型 必须
thumb 要显示的小图列表的链接数组 array true
full 点击放大后的大图的链接数组 array true
list-ul-class 默认小图的列表外层ul的自定义class 用于自定义列表的样式，包括ul内部的slot的内容的样式都可以通过这个方式自定义 string false

scoped slot

name 说明
~ 列表中的每一个元素中除了默认图以外的内容

示例：

<vue-viewer multiple
 :thumb="imagelist"
 list-ul-class="image-list"
 :full="imagelist">
 <!--在列表中加入右上角删除按钮-->
 <template slot-scope="target">
 <span class="icon-remove" @click.stop="onremove(target.index)" style="">×</span>
 </template>
</vue-viewer>
<script>
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);
 }
 }
}
</script>
<style>
.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;
}
</style>

效果展示：


总结

以上所述是小编给大家介绍的vue基于viewer实现的图片查看器功能，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网