GithubHelp home page GithubHelp logo

xlogiccc / vue-picture-preview Goto Github PK

View Code? Open in Web Editor NEW
226.0 3.0 61.0 2.74 MB

移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe.

License: MIT License

JavaScript 29.02% Vue 70.98%

vue-picture-preview's Introduction

vue-picture-preview

移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe.

Github Github Github

License vue-picture-preview NPM downloads NPM downloads

demo

安装

npm install --save vue-picture-preview

使用

入口文件中全局引入

import Vue from 'vue'
import vuePicturePreview from 'vue-picture-preview';

Vue.component('Previewer', vuePicturePreview);

按需局部引入

import vuePicturePreview from 'vue-picture-preview';

export default {
  components: {
    Previewer: vuePicturePreview
  }
}

示例

<div>
    <img
        class="previewer-demo-img"
        v-for="(item, index) in list"
        :src="item.src"
        width="100"
        @click="show(index)"
        :key="index"
      />
      <previewer ref="previewer" :list="list" :options="options"> </previewer>
</div>
export default {
  data() {
    return {
      list: [
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg',
          w: 600,
          h: 400
        },
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg',
          w: 600,
          h: 400
        },
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg',
          w: 600,
          h: 400
        }
      ],
      options: {
        getThumbBoundsFn(index) {
          // find thumbnail element
          let thumbnail = document.querySelectorAll('.previewer-demo-img')[
            index
          ];
          // get window scroll Y
          let pageYScroll =
            window.pageYOffset || document.documentElement.scrollTop;
          // optionally get horizontal scroll
          // get position of element relative to viewport
          let rect = thumbnail.getBoundingClientRect();
          // w = width
          return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        }
      }
    };
  },
  methods: {
    show(index) {
      // 显示特定index的图片,使用ref
      this.$refs.previewer.show(index);
    }
  }
};

属性

名字 类型 默认值 说明 版本要求
list array 图片列表 2.0.1
options object PhotoSwipe的配置 2.0.1

事件

名字 参数 说明 版本要求
@on-close - 关闭时触发 2.0.1
@on-index-change - 切换图片后触发(首次打开不会触发) 2.0.1

插槽

名字 说明 版本要求
button-after 操作按钮之后,可以添加自定义图标 2.0.1
button-before 操作按钮之前,可以添加自定义图标 2.0.1

方法

名字 参数 说明 版本要求
goTo index 跳转到特定图片 2.0.1
prev - 跳转到上一张 2.0.1
next - 跳转到下一张 2.0.1
getCurrentIndex - 获取当前图片索引 2.0.1

重要提示

  • 注意避免使用过大图片: 否则可能会出现卡顿黑屏的情况(尤其是在 Android 机子上)
  • 建议为所有图片定义尺寸: PhotoSwipe 本身要求设置宽高,本组件会尝试对没有设置宽高的图片先加载再显示,可能会造成性能问题或者宽带浪费。

vue-picture-preview's People

Contributors

dependabot[bot] avatar ryanwangtian avatar xlogiccc avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

vue-picture-preview's Issues

无法绑定src与alt属性,导致了一些意象不到的情况

index.js文件的55行和58行没有绑定el元素属性,导致了一些意象不到的情况,是不是写漏了什么
源文件
var previewItem = {
title: '',
el: el,
index: 0,
src: ''
}
建议改为
var previewItem = {
title: el.alt || '',
el: el,
index: 0,
src: el.src || ''
}

被你坑惨了

别人官方可是有直接可以打开图片预览,不用点击也是可以的

不支持异步数据

使用异步数据报错

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'w' of undefined"

在web端点击图片会一直显示loading

看了源码指令,
Vue.directive('preview', {
bind: function (el) {
var previewItem = {
title: '',
el: el,
index: 0,
src: ''
}
在bind的时候赋值src为空,然后在update状态下更新src,会造成数据更新延迟,目前个人把bind的时候赋值的src改成src: el.src,图片就能显示了,请问有更好的解决方法吗

webpack打包时报了错,怎么解决

ERROR in static/js/vendor.7bb08cc826e7230b8ea5.js from UglifyJs
Unexpected token: punc (() [./~/vue-picture-preview/index.js:7,0][static/js/vendor.7bb08cc826e7230b8ea5.js:27354,16

动态改变图片预览数组时初次点击会报错

Cannot read property 'w' of undefined

<previewer ref="previewer" :list="previewList" :options="options" @inited="inited"> </previewer>

computed:{
		options: {
			getThumbBoundsFn(index) {
				let thumbnail = document.querySelectorAll('.previewer-'+this.previewType+'-img')[
					index
				];
				let pageYScroll =
					window.pageYOffset || document.documentElement.scrollTop;
				let rect = thumbnail.getBoundingClientRect();
				return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
			}
		}
	},



this.$nextTick(function(){
				this.$refs.previewer.show(index);
			});

一直在加载

修改 node_modules/vue-picture-preview/index.js:53 开始

bind: function (el, binding) {
    var previewItem = {
        title: el.alt || '',
        el: el,
        index: 0,
        src: binding.value || ''
    }
    // ......
}

调用的地方

<img
    :src="p.thumImage"
    v-preview="p.originalImage"
    v-for="p in picture"
    :key="p.pictureId">

存在keep-alive时,预览图片会包含上一个页面的内容

存在keep-alive时,预览图片会包含上一个页面的内容
目前我的解决办法是在全局的路由监听时置空list参数,但是回到上一个页面时,因为置空的原因,预览图片就不能左右滑动了

watch: {
$route(to, from) {
if(this.$refs['imgpreview']){
this.$refs['imgpreview'].preview.list = [];
}
}

编译时报错

用vue-cli脚手架生成的项目在npm run build的时候会报错,初步排除发现是你的index.js中的es6语法没被转译,手动修改你的index.js文件后发现没有报错了。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.