xlogiccc / vue-picture-preview Goto Github PK
View Code? Open in Web Editor NEW移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe.
License: MIT License
移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe.
License: MIT License
别人官方可是有直接可以打开图片预览,不用点击也是可以的
应该算是个bug
现在好像最大缩放的大小比较小, transform时scale只有1.33。。不知道有options里有没有选项?
修改 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">
这样写会报错
<img src="../../assets/school/640.jpg" alt="图片" v-preview="../../assets/school/640.jpg" preview-title-enable="true" preview-nav-enable="true">
这个功能比较常用,但是目前貌似vue这方面的组件没有支持的
// import 的时候 用babel-loader处理下。
import vuePicturePreview from 'babel-loader!vue-picture-preview';
滚轮缩放怎么设置的,看文档设置无效,好像有什么出入
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文件后发现没有报错了。
本地用的 好好的! 但是打包发线上! 点击预览就出现空白!
本地怎么调试都没问题! 线上就无法预览!
按照你的例子使用神一样的没有任何反应,哥哥你是害人的吗
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时,预览图片会包含上一个页面的内容
目前我的解决办法是在全局的路由监听时置空list参数,但是回到上一个页面时,因为置空的原因,预览图片就不能左右滑动了
watch: {
$route(to, from) {
if(this.$refs['imgpreview']){
this.$refs['imgpreview'].preview.list = [];
}
}
在android 4.4不兼容
Failed to resolve directive: preview
My Code:
this.$refs.previewer.show(index);
TypeError: this.$refs.previewer.show is not a function
chorme 下面报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object '#'
看了源码指令,
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);
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.