ls1231 / vue-preview Goto Github PK

快速引入组件，不用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
}]

when I import VuePreview from 'vue-preview', it has an error

全局引用，两个组件内都引入标签，一个组件内的正常，另个组件内报错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

请看下这个编译报错的问题吧。
let 没有被转成 var

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,但是图片不出来，请问是什么原因

<img class="preview-img" v-for="(item, index) in pics2" :src="item.src" height="100" @click="vm.$preview.open(index, pics2)">请问是这样调用，还是 <img class="preview-img" v-for="(item, index) in pics2" :src="item.src" height="100" @click="$preview.open(index, pics2)">这样调用的，你说的是组件实例不大明白

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)

貌似是背景图，svg加载不出来

如题，请问如何解决

我想要一个类似于微博里面点击放大图片的效果，那个预览时的大图高是自适应的，不用自己设置的，怎么弄？还有这插件支持rem单位吗？

This dependency was not found:

• vue-preview in ./src/main.js
  To install it,you can run:npm install --save vue-preview
  已经执行了cnpm install --save vue-preview
  组件库里已经有vue-preview的快捷方式到_vue-preview@1.0.5@vue-preview

关闭图片预览后，页面的滚动条会自动回到顶部 怎么解决？
或者是有没有关闭这样配置的选项？

定义了宽高之后，图片变形，如果图片过长，需要向下滑动查看全部，预览页会关闭

"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.