网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/6 浏览:3 次 )

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"text-align: center"> vue基于viewer实现的图片查看器功能

多图片模式

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="">&times;</span>
 </template>
</vue-viewer>
<script>
export default {
 name: 'app',
 data () {
 return {
  msg: 'vue2-viewer-test',
  imageList: [
  'https://timgsa.baidu.com/timg"text-align: center">vue基于viewer实现的图片查看器功能

总结

以上所述是小编给大家介绍的vue基于viewer实现的图片查看器功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

上一篇:微信小程序template模版的使用方法
下一篇:js form表单input框限制20个字符,10个汉字代码实例