mirari / v-viewer Goto Github PK

View Code? Open in Web Editor NEW

2.4K 15.0 287.0 25.08 MB

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

Home Page: https://mirari.cc/v-viewer/

License: MIT License

JavaScript 0.18% Vue 73.16% HTML 7.54% Shell 0.41% TypeScript 18.72%

vue viewer gallery picture img image

v-viewer's People

Stargazers

Watchers

Forkers

raintao taehyunhan trendingtechnology hemuqiu jsorz imsunhao wuyoudehe pheaktratyboy guyver-dash nakalissi-zz romines moongong liujunleo aimee-zhangyamei ilyasemenov athiwatp qiujie8092916 vue-plugins sangcz altarang iunknownexist nicolas-tesla-x mishe knight-endless-love dvsmedeiros mitkovalkov nikoshi lee66 fkdl zyz954489346 taoboy linecode chenyuan8059 mengxuan763969190 dengzhineng feluxmaj guoyl6 guoxueguang diegocaldeira hanliang0916 honter joshingit 5201314999 itinnovator joey91133 larryzhaosss golden87 nahum-smith sly0312 zhukan7758258 jasenmichael zzxme theara72 lanyy longshufa name-hard meiiki ansidev web-mastery yaoshiai morningdew830 smiledingvip yangtaoxf xintianyou vihano alixbar david-kastro djkloop wiilingshe toufik17 hellosunnyhello gtdalp chanwooro unlock-lia focux averyyufull yanhong343333416 fengtongming liwanchong04719 awesome-collect shenmissing asrori7 kecheon jiaha developer2017-coder qiuzhaofeng anhnguyenpku unlimiteddream zdmission zoswing znspace kaapomarcus mozartted zhangyunsiyu louieaa gitxin aaronbank e-cloud leaf123 huangzexia

v-viewer's Issues

Not working with Nuxt.js out of the box, error: Unexpected token .

Problem

require("viewerjs/dist/viewer.css") inside compiled module crashes when running in Nuxt.js webpack environment (and possibly many others).

Steps to reproduce

This recreates full test environment completely from scratch:

mkdir viewtest
cd viewtest
yarn init .
yarn add nuxt v-viewer

create pages/index.vue:

<template>
<div v-viewer>
	<img src="https://lorempixel.com/600/400/">
	<img src="https://lorempixel.com/400/600/">
</div>
</template>

<script>
import Vue from 'vue'
import Viewer from 'v-viewer'
Vue.use(Viewer)

export default {}
</script>

Run server:

node_modules/.bin/nuxt

Open http://localhost:3000, the following error will be printed:

  nuxt:render Rendering url / +0ms
{ /Users/semenov/tmp/viewtest/node_modules/viewerjs/dist/viewer.css:11
.viewer-zoom-in::before,
^

SyntaxError: Unexpected token .
    at new Script (vm.js:51:7)
    at createScript (vm.js:136:10)
    at Object.runInThisContext (vm.js:197:10)
    at Module._compile (internal/modules/cjs/loader.js:618:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
    at Function.Module._load (internal/modules/cjs/loader.js:498:3)
    at Module.require (internal/modules/cjs/loader.js:598:17)
    at require (internal/modules/cjs/helpers.js:11:18)
    at webpackUniversalModuleDefinition (/Users/semenov/tmp/viewtest/node_modules/v-viewer/dist/v-viewer.js:3:49)
    at Object.<anonymous> (/Users/semenov/tmp/viewtest/node_modules/v-viewer/dist/v-viewer.js:10:3)
    at Module._compile (internal/modules/cjs/loader.js:654:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12) statusCode: 500, name: 'SyntaxError' }

Other notes

It is not as simple as CSS loader not being enabled. requiring css from the component script tag works fine:

<script>
require("viewerjs/dist/viewer.css")

export default {}
</script>

this works and will actually push CSS into the page.

你好~在从后台拿到数据后，数组是有更新变化的，但是视图并没有发生变化，而且数组并没有实际更新，是继续叠加，该怎么解决？

template or render function not defined

问题：PPT或者白板直播场景中：单张图片动态替换，每次切图会出现缩放，体验很不好

应用场景：PPT或者白板直播
问题：每次切图会出现缩放
要实现的效果：切图直接替换，不要有任何效果，让用户感觉是在播放白板直播视频一样。
尝试：尝试去掉for循环，直接换图，但是src切换，组件都会重建。viewer-transition的动画也不能删除，删除后就缩放就很生硬

请问下，我能不能控制的页面展示的图片和点击打开浏览的图片大小不同？

意思是这样的，我页面html展示的时候是200X200，但是，我使用你们插件浏览的时候显示是原图大小，这个能控制吗，现在是浏览和展示的大小都是200X200了

页面会重复多个弹出框

bug效果如下：
gif。。。https://i.loli.net/2018/08/10/5b6ce6e4139b7.gif

下面是代码

<el-card class="box-card" v-viewer>
    <el-collapse v-model="logActive">
      <el-collapse-item name="log">
        <template slot="title">
          <div class="header">日志记录</div>
        </template>
        <el-table :data="formatLog" stripe style="width: 100%">
          <el-table-column prop="OperationTime" label="操作时间">
          </el-table-column>
          <el-table-column prop="CreateUser" label="操作人">
          </el-table-column>
          <el-table-column prop="Remark" label="操作内容">
            <template slot-scope="scope">
              <template v-if="scope.row.TaskType === 'Log'" >
                <span>{{ scope.row.Remark }}</span>
              </template>
              <template v-if="scope.row.TaskType === 'Image'" >
                <img style="max-height: 60px;" :src="scope.row.Remark.url" :title="scope.row.Remark.name" :alt="scope.row.Remark.name"/>
              </template>
              <template v-if="scope.row.TaskType === 'File'" >
                <a :href="scope.row.Remark.url" target="_blank">{{scope.row.Remark.name}}</a>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </el-card>

import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)

Allowed formats

First of all, excellent work.
I would like to know if there is any way to show images and other types of files such as a PDF or Videos.
Greetings.

建议title后面不要跟宽高，或者可以设置是否显示宽高

如题，可自由扩展如下效果,来描述效果，或者能否增加一个参数来显示描述信息，放在title下面

Getting a "Failed to resolve directive: viewer"?

I downloaded v-viewer.js into my project and registered it using Vue.use(VueViewer). I start getting the warning whenever I use "v-viewer" in my html. I'm assuming there are additional steps to successfully register the directive?

为什么vue版本的viewer不能拖拽图片了呢？

为什么vue版本的viewer不能拖拽图片了呢？之前使用jQuery版本的是可以拖拽图片的！

electron-vue使用报语法错误 vue直接使用没问题

Uncaught SyntaxError: Unexpected token .
at createScript (vm.js:74)
at Object.runInThisContext (vm.js:116)
at Module._compile (module.js:533)
at Object.Module._extensions..js (module.js:580)
at Module.load (module.js:503)
at tryModuleLoad (module.js:466)
at Function.Module._load (module.js:458)
at Module.require (module.js:513)
at require (internal/module.js:11)
at webpackUniversalModuleDefinition (E:

how to use both the thumbnail and the original image

i want the thumbnail to show so that when i click it loads the original image
how can that be done ??

SSR import SyntaxError Unexpected token .

SSR 在 vue script里面引用 viewerjs/dist/viewer.css 报错

IE 11: Object doesn't support property or method 'assign'

Hello friend!

I'm getting this error when open the component in IE 11.

Object doesn't support property or method 'assign'

Can you help me?

Capture click even on rendered v-viewer image

I am trying to capture a click event on the image element as it is rendered by v-viewer. I have tried adding template markup using scoped slots, and extending the whole component with no luck.

Ultimately I would like to record the X and Y position of the click in order to simulate 'dropping a pin' on the image.

Do you think it is possible?

Thank you for an awesome component!

How to save the changes?

Once the user rotates the file, how can I send the rotated version to my server?

inline模式能否像modal 模式那样点击图片再显示出来吗

现在看到的效果是默认就直接显示出来了，不能关闭。需要在inlne模式下点击哪张显示哪张，或者说可以让modal 模式可以放到某个div里

Can we turn off flip options?

Hello very nice lib,

I have a question can we turn off flip icons and keep all other controls?

Thank you

希望能支持一下服务端渲染

目前在服务端渲染中v-viewer directive无法正常识别导致报错，希望能够支持下服务端渲染。例如提供延后处理的方法，把业务推迟到mounted之后。

Any way to add download button?

appreciated.

为什么要组件重新渲染后才能起作用呢

比如一个会话框，我重新输入会话后，会话框里面的图片才能放大，说明重新渲染了组件，那个图片放大器，才起作用，这怎么解决呢

怎么排除某些不想显示的图片呢

v-viewer 标签里面有些不想显示，比如头像之类的，怎么排除呢

can use slider with v-viewer

当图片超过5M时，会出现图片加载到一半突然全部消失的问题

您好，我在使用您的组件时，出现了一个小问题：当图片超过5M（甚至更大）时，会出现图片加载到一半突然全部消失，等候1s（或更久）才全部弹出的问题。之前使用viewerjs时没遇见过相同情况，不知是不是Vue渲染的问题？

viewer.view(index) not working

I've got a div element with multiple images inside.

If I do the below
var img = document.getElementById('imgdivid').$viewer; img.show(); img.view(index);

It always shows the first picture, while I want the index one to be loaded instead.

Is there any callback in show that I can use, so I can execute the view(index) once the viewer is shown?

Any idea why is that?

IE10，v-viewer.js 源码抛异常 Error in directive viewer bind hook: "TypeError: 对象不支持此操作"

[Vue warn]: Error in directive viewer bind hook: "TypeError: 对象不支持此操作"

请问，手机端是否不支持左右滑动，我在手机端使用时，第一次进入时可以向右滑动一下，然后就不能滑了。

open inline in a specific div

i want the image to open inline in a specific div so that i add more content by the side
how can i do that ? thanks

能否封装一个图片是否在新窗口打开的开关

如题：能否封装一个图片是否在新窗口打开的开关呢?

列表中循环多次指令，只能最后一个生效

当在列表中使用指令方式时，只有列表的最后一项可以显示出来，而其他的都报错，因为获取不到$viewer对象。

<template>
  <el-table
    :data="records"
    style="width: 100%"
    :border="true"
    :class="'mbaex-table'"
    :stripe="true"
  >
    <el-table-column
      prop="status"
      label="状态"
      width="125">
      <template slot-scope="scope">
        <div class="color-primary" v-if="scope.row.status == 3">
          等待确认
          <span class="inlin-block pt-15 pb-15 pr-10 pl-5 cursor-pointer" title="点击查看图片" @click="showImgViewer">查看图片</span>
          <div class="hidden viewer-box" v-viewer="{url: 'data-large', navbar: false, movable: false}">
            <img :data-large="scope.row.receiptUrl" alt="">
          </div>
        </div>
        <div class="color-primary" v-if="scope.row.status == 1">
          支付成功
          <span class="inlin-block pt-15 pb-15 pr-10 pl-5 cursor-pointer" title="点击查看图片" @click="showImgViewer">查看图片</span>
          <div class="hidden viewer-box" v-viewer="{url: 'data-large', navbar: false, movable: false}">
            <img :data-large="scope.row.receiptUrl" alt="">
          </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  export default {
    data(){
      records: [
        {
            "receiptUrl": "https://car2.autoimg.cn/cardfs/product/g2/M08/4C/52/1024x0_1_q87_autohomecar__wKgHGVttOOuAZF-3AAmEjM2FLPM352.jpg",
            "status": 1
        },
        {
            "status": 2
        },
        {
            "receiptUrl": "https://car2.autoimg.cn/cardfs/product/g2/M00/4C/52/1024x0_1_q87_autohomecar__wKgHGVttOOeAEBGPAApcgEw-noc081.jpg",
            "status": 1
        },
        {
            "receiptUrl": "https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=d49cfe51f703918fc3dc359830544df2/6159252dd42a283483209fba5bb5c9ea14cebff9.jpg",
            "status": 1
        }
      ]
    },
    methods: {
      // 点击"图片图标"显示大图
      showImgViewer(e){
        let event = e || window.event;
        this.$nextTick(() => {
          let target = event.currentTarget || event.target.parentElement,
            parent = target.parentElement;
            
          let viewer = parent.querySelector(".viewer-box").$viewer;
          console.log(parent.querySelector(".viewer-box"))
          console.log(viewer)
          viewer.show();
        });        
      }
    }
  }
</script>

在我的项目中，出现的问题就是只有最后一张图片能够点击，并显示出来，其他图片点击就报错

Component method not working!

<viewer :images="this.awardData.files">
          <img v-for="src in this.awardData.files" :src="'src'" :key="src">
        </viewer>

Hey, above is my code. I tried using component method. But nothing is shown in the browser.

Is that I should use directive method also or any of the methods(component, directives) is fine?

Bounds

Hi, Thank you for the great work.
I'd like to try to use the plugin for displaying examples but I need the option to keep image inside a container.
I mean when edges of a picture can't be moved inside a container
is there a way to set bounds to keep zoomed image inside a container?

通过接口拉取图片，然后向图片数组push新的图片，点击图片只能出现遮罩，图片不显示

Re render viewer when resize window

Hi,
Do you have any idea if I can re-render the viewer when I manipulate the window width. I've tried to re-assign the options with a dynamic minWidth param but it doesn't work.
I appreciate with some could help me out with this issue.
Regards,

请问如何点击背景关闭图片预览窗口？

请问一下如何设置或者修改代码能够实现点击黑色背景关闭预览窗口的功能呢？现在的左上角关闭有点不好操作，谢谢。

Console logs for directive

Hi Mirari,

Console logs for directive are pretty annoying. If you really need them, is it possible to pass some value {verbose : true} through options that will show them, so that they are not showing by default?

Regards,
Marin

Directive Viewer.js is closed abruptly when unrelated element updates

In a code like this:

<template>
  <div>{{ some }}</div>
  <div v-viewer><img ...></div>
</template>

When some is updated, Viewer.js added by a directive to a different element closes abruptly.

Minimal reproducible case: https://codepen.io/ilya-semenov/pen/qYBjjW

v0.3.x 升级 v1.x 直接乱

讲真, 给个升级 API 修改提醒啊. 如果不是 vue 版的问题, 那么也在文档说出 viewerjs 在接口做出变更的提醒啊...

发现一个Options字段错误小bug，toolbar写成toobar了，测了半天才发现

位置在：http://mirari.cc/v-viewer/
Component组件配置Options，侧边栏里面一个"toobar"，视图下面一个"toobar"。

how to shown the original image when user click on any image

for initial view i set the thumbnail images but when user click on any image then i want to shown original image

可以修改全局默认配置吗?

我直接在main.js里面import 和 Vue.use后,我就可以在所有路由组件使用了.可是可以修改全局默认配置吗,这样就不需要再在每个使用的地方都写一遍options.Viewer.setDefaults(options)用这个会报错
errMsg:Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_12_v_viewer___default.a.setDefaults is not a function

关闭按钮无法全部关闭

在移动端，图片缩放后点击关闭，发现关闭了图标，但是遮罩还在，没关闭掉

Uncaught TypeError: Cannot read property 'length' of undefined

这个length的错误是从哪里来的一直没有找到

inline 模式时，配合输入框，v-viewer 重复渲染

操作输入框时，v-viewer 重复渲染

<template>
  <section>
    <div class="viewer-box">
      <viewer :images="[images]" :options="options">
        <img class="viewer-image" :src="images">
      </viewer>
    </div>
    <el-input v-model="inputValue"></el-input>
  </section>
</template>
<script>
  import Viewer from 'v-viewer';
  export default {
    components: {
      Catalog,
      XforceHeader
    },
    data() {
      return {
        inputValue: '',
        options: {
          'inline': true,
          'button': false,
          'navbar': false,
          'title': false,
          'toolbar': true,
          'tooltip': false,
          'movable': true,
          'zoomable': true,
          'rotatable': true,
          'scalable': false,
          'transition': true,
          'fullscreen': false,
          'keyboard': false,
          'url': 'data-source'
        },
        images: 'https://avatars2.githubusercontent.com/u/7300964?s=88&v=4'
      }
    }
  }
</script>
<style lang="scss">
  .viewer-box {
    width: 400px;
    height: 400px;
  }
</style>