vue基于viewer实现的图片查看器功能
程序员文章站
2022-03-21 17:06:55
vue2-viewer
vue2-viewer 是一款强大的图像浏览插件,可以实现图像的放大预览,旋转,任意比例放大和缩小等功能
vue2-viewer 是vi...
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实现的图片查看器功能,希望对大家有所帮助
上一篇: 即补锌又补钙,锌钙食物有哪些
下一篇: Android 日期选择框 简洁常用
推荐阅读