ls1231 / vue-preview Goto Github PK
View Code? Open in Web Editor NEWA Vue Integrated PhotoSwipe Image Preview Plugin
Home Page: https://ls1231.github.com/vue-preview/
License: MIT License
A Vue Integrated PhotoSwipe Image Preview Plugin
Home Page: https://ls1231.github.com/vue-preview/
License: MIT License
快速引入组件,不用npm可以吗?
以前是img标签,现在封装成组件了,怎么修改?
现在遇到一个问题,一张高度比较高的图片。默认是以高度100%,我想以宽度100%,需要怎么设置? 谢谢~
调用组件 会自动生成图片,怎么可以在已经做好的图片布局中点击出弹层
请问是怎么回事,不要问是否已经引入了,引入是必须引入了的
list: [{
src: 'https://placekitten.com/600/400',
w: 600,
h: 400
}, {
src: 'https://placekitten.com/1200/900',
w: 1200,
h: 900
}]
一般从网络获取图片数据源,不带 w h,删掉 w,h 又报错。是否能够全局配置?
Hbuilder 真机模拟的时候会报错,控制台显示报错undefined is not a function
build之后的文件在浏览器上跑是没有问题的,请问有解决的办法么?
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: webpack --progress --hide-modules --config build/webpack.prod.config.js
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2018-03-08T01_08_24_927Z-debug.log
请问部署好之后发现报这个错误
Vue warn]: Property or method "$preview" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
还有这个错误
index.js:50301 Uncaught TypeError: Cannot read property 'open' of undefined
然后原代码使用是
vue:
import VuePreview from 'vue-preview';
components: {
VuePreview
}
template:
数据格式也当正常,就是还多一个字段 type:img,
感觉是不支持$preview.open()这种写法,请问是什么原因
template那里,只能这样:
<img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)">
不能这样:
<img class="preview-img" v-for="(item, index) in list" :src="item.picSrc" height="100" @click="$preview.open(index, list)">
数据定义:
list: [{
src: 'https://placekitten.com/600/400', //不能是picSrc
w: 600,
h: 400
}, {
src: 'https://placekitten.com/1200/900',
w: 1200,
h: 900
}]
全局引用,两个组件内都引入标签,一个组件内的正常,另个组件内报错Cannot read property 'x' of undefined
I think it could be great if one can add thumbnail (instead of loading the whole images)
请教下那啥我用的 vue-cli 引用其他的模块用的import 都没问题,import vue-preview 就会显示 unexpected token import
➜ vue-preview git:(master) ✗ npm install photoswipe --save
npm ERR! Darwin 16.3.0
npm ERR! argv "/usr/local/Cellar/node/7.3.0/bin/node" "/usr/local/bin/npm" "install" "photoswipe" "--save"
npm ERR! node v7.3.0
npm ERR! npm v4.0.5
npm ERR! Maximum call stack size exceeded
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues
npm ERR! Please include the following file with any support request:
npm ERR! /Users/admin/Documents/vuex/vue-preview/npm-debug.log
➜ vue-preview git:(master) ✗ ll
Actually, I can not read the readme
. Readme on Github are often in english, it has a larger impact (i'm not english anyway, but I can read english). Do you think it could be translated?
在Vue2.0下出现
SyntaxError: Unexpected keyword 'import'
我的所有代码
app.vue
<template>
<div id="app">
<transition name="fade" mode="out-in">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
</div>
</template>
main.js
import Vue from 'vue'
import App from './App'
import MintUI from 'mint-ui';
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import Fastclick from 'fastclick';
import 'mint-ui/lib/style.css';
Fastclick.attach(document.body);
Vue.use(VueRouter)
Vue.use(VueResource)
Vue.use(MintUI);
import VuePreview from 'vue-preview'
Vue.use(VuePreview)
const Index = resolve => require(['./views/index'], resolve)
const router = new VueRouter({
base: __dirname,
routes: [{
path: '/',
name: 'root',
component: Index
}]
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
// 路由钩子
let indexScrollTop = 0;
router.beforeEach((to, from, next) => {
if (from.name == 'root') {
indexScrollTop = document.body.scrollTop;
window.sessionStorage.scrollTop = indexScrollTop;
}
next();
});
router.afterEach((to, from) => {});
index.vue
<template>
<div>
<img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)">
</div>
</template>
<script>
export default {
data() {
return {
list: [{
src: 'https://placekitten.com/600/400',
w: 600,
h: 400
}, {
src: 'https://placekitten.com/1200/900',
w: 1200,
h: 900
}]
}
}
}
</script>
现在缩略图和弹出来的图都是同一个路径,怎么在插件里配置达到缩略图和弹出来的图分别引用不同大小的图片路径呢
之前版本还看见有图片旋转功能,新版本为什么没了
例如我只是展示一个button,当点击这个button时我去查看某一个图片,是没有这样一个方法去调用呢?
引用方式
@import '~photoswipe/dist/photoswipe.css';
@import '~photoswipe/dist/default-skin/default-skin.css';
出错信息如下
Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.11, but postcss-partial-import uses 5.2.17. Perhaps this is the source of
the error below.
Error: Failed to find '~photoswipe/dist/photoswipe.css'
in [
/Users/haiyang/Documents/workspace/rry/case-report-web/node_modules/vue-preview/src/plugins/preview
]
at /Users/haiyang/Documents/workspace/rry/case-report-web/node_modules/postcss-import/lib/resolve-id.js:48:11
at <anonymous>
ERROR Failed to compile with 1 errors 12:41:55
error in ./node_modules/vue-preview/src/plugins/preview/preview.vue
Module build failed: Error: Failed to find '~photoswipe/dist/photoswipe.css'
in [
/Users/haiyang/Documents/workspace/rry/case-report-web/node_modules/vue-preview/src/plugins/preview
]
at /Users/haiyang/Documents/workspace/rry/case-report-web/node_modules/postcss-import/lib/resolve-id.js:48:11
at <anonymous>
@ ./node_modules/vue-style-loader!./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-66e
7134e","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./node_modules/vue-preview/src/plug
ins/preview/preview.vue 4:14-277 13:3-17:5 14:22-285
@ ./node_modules/vue-preview/src/plugins/preview/preview.vue
@ ./node_modules/vue-preview/src/plugins/preview/index.js
@ ./src/module/case/main.js
@ multi ./build/dev-client ./src/module/case/main.js
是不是可以将两个css文件,放到js文件去请求呢?
我在...preview/index.js中请求正常
import PreviewComponent from './preview.vue'
import 'photoswipe/dist/photoswipe.css';
import 'photoswipe/dist/default-skin/default-skin.css';
这里必须是点击预览上的图片和关闭才开关闭,组件外怎么能实现手动去关闭预览呢?
配置options的index:0,预览时还是从第3张开始
// main.js
import VuePreview from 'vue-preview'
Vue.use(VuePreview)
// a.vue
<vue-preview :slides="slide1" @close="handleClose"></vue-preview>
提示:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
请问这个使用了.use
后需要手动.component
进行注册吗?
望赐教
只有在滑动之前点击第一组图片列表位置是正确的,滑动后再点图片列表,整个位移已经不对了,是需要额外配置什么吗?
打开图片预览可以显示1,2,3,但是图片不出来,请问是什么原因
preview.vue?4fb2:107 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined
at Object.getThumbBoundsFn (preview.vue?4fb2:107)
at _showOrHide (photoswipe.js?84b8:2536)
at PhotoSwipe.close (photoswipe.js?84b8:993)
at HTMLDivElement.PhotoSwipeUI_Default.ui.onGlobalTap (photoswipe-ui-default.js?7f39:759)
at _dispatchTapEvent (photoswipe.js?84b8:3208)
at eval (photoswipe.js?84b8:3260)
如题,请问如何解决
我想要一个类似于微博里面点击放大图片的效果,那个预览时的大图高是自适应的,不用自己设置的,怎么弄?还有这插件支持rem单位吗?
ERROR in static/js/vendor.f73f2120f658fae51edb.js from UglifyJs
Unexpected token: name ($vm) [./~/.1.0.5@vue-preview/src/plugins/preview/index.js:2,0][static/js/vendor.f73f2120f658fae51edb.js:25187,4]
This dependency was not found:
关闭图片预览后,页面的滚动条会自动回到顶部 怎么解决?
或者是有没有关闭这样配置的选项?
定义了宽高之后,图片变形,如果图片过长,需要向下滑动查看全部,预览页会关闭
"vue-preview": "^1.1.3"
配置如下:
Vue.use(VuePreview, {
mainClass: 'pswp--minimal--dark',
barsSize: {
top: 0,
bottom: 0
},
captionEl: false,
fullscreenEl: true,
shareEl: false,
bgOpacity: 0.85,
tapToClose: false,
tapToToggleControls: false,
history: false
});
ERROR in static/js/vendor.debc40883c868827f080.js from UglifyJs
Unexpected token: name ($vm) [./~/_vue-preview@1.0.5@vue-preview/src/plugins/preview/index.js:2,0][static/js/vendor.debc40883c868827f080.js:35904,4]
Build failed with errors.
Module not found: Error: Cannot resolve 'file' or 'directory' ./default-skin.png in /node_modules/vue-preview/src/plugins/preview
引入url-loader后也不行
请问下预览后地址栏会在后面加上路由,是怎么实现的,https://ls1231.github.io/vue-preview/#&gid=1&pid=1
,就是#&gid=1&pid=1
是点击后才会加上去的。
This plugin doesn't support vue-ssr. In /vue-preview/src/plugins/preview/index.js, there is 'document' object making server side render a sad failure.
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.