GithubHelp home page GithubHelp logo

xlogiccc / vue-picture-preview Goto Github PK

View Code? Open in Web Editor NEW
226.0 226.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 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

被你坑惨了

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

一直在加载

修改 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">

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

编译时报错

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

无法绑定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"

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

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

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

在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,图片就能显示了,请问有更好的解决方法吗

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

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);
			});

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.