mirari / v-viewer Goto Github PK
View Code? Open in Web Editor NEWImage 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
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
The little hand cursor appears, but I can't drag the image around if I use Firefox. Works well with Chrome.
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?
这个length的错误是从哪里来的 一直没有找到
Hello very nice lib,
I have a question can we turn off flip icons and keep all other controls?
Thank you
操作输入框时,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>
在移动端,图片缩放后点击关闭,发现关闭了图标,但是遮罩还在,没关闭掉
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?
讲真, 给个升级 API 修改提醒啊. 如果不是 vue 版的问题, 那么也在文档说出 viewerjs 在接口做出变更的提醒啊...
for initial view i set the thumbnail images but when user click on any image then i want to shown original image
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)
比如一个会话框,我重新输入会话后,会话框里面的图片才能放大,说明重新渲染了组件,那个图片放大器,才起作用,这怎么解决呢
目前在服务端渲染中v-viewer directive无法正常识别导致报错,希望能够支持下服务端渲染。例如提供延后处理的方法,把业务推迟到mounted之后。
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
当在列表中使用指令方式时,只有列表的最后一项可以显示出来,而其他的都报错,因为获取不到$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>
在我的项目中,出现的问题就是只有最后一张图片能够点击,并显示出来,其他图片点击就报错
我直接在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
require("viewerjs/dist/viewer.css")
inside compiled module crashes when running in Nuxt.js webpack environment (and possibly many others).
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' }
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>
vue.js、viewer.js等是直接引入的,但是会出现并列两个viewer-container
[Vue warn]: Error in directive viewer bind hook: "TypeError: 对象不支持此操作"
(found in )
TypeError: 对象不支持此操作
{
[functions]: ,
description: "对象不支持此操作",
message: "对象不支持此操作",
name: "TypeError",
number: -2146827843,
stack: "TypeError: 对象不支持此操作
at c (http://localhost:8088/asset/js/lib/v-viewer-92fca2ef710c.js:53:29)
at bind (http://localhost:8088/asset/js/lib/v-viewer-92fca2ef710c.js:86:60)
at callHook$1 (http://localhost:8088/asset/js/lib/vue.min-f72e90dab59c.js:6280:7)
at _update (http://localhost:8088/asset/js/lib/vue.min-f72e90dab59c.js:6202:7)
at updateDirectives (http://localhost:8088/asset/js/lib/vue.min-f72e90dab59c.js:6183:5)
at invokeCreateHooks (http://localhost:8088/asset/js/lib/vue.min-f72e90dab59c.js:5685:7)
at createElm (http://localhost:8088/asset/js/lib/vue.min-f72e90dab59c.js:5573:11)
at createChildren (http://localhost:8088/asset/js/lib/vue.min-f72e90dab59c.js:5669:9)
at createElm (http://localhost:8088/asset/js/lib/vue.min-f72e90dab59c.js:5571:9)
at createChildren (http://localhost:8088/asset/js/lib/vue.min-f72e90dab59c.js:5669:9)"
}
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!
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?
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?
<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?
应用场景:PPT或者白板直播
问题:每次切图会出现缩放
要实现的效果:切图直接替换,不要有任何效果,让用户感觉是在播放白板直播视频一样。
尝试:尝试去掉for循环,直接换图,但是src切换,组件都会重建。viewer-transition的动画也不能删除,删除后就缩放就很生硬
SSR 在 vue script里面引用 viewerjs/dist/viewer.css 报错
如题:能否封装一个图片是否在新窗口打开的开关呢?
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,
template or render function not defined
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
现在看到的效果是默认就直接显示出来了,不能关闭。需要在inlne模式下点击哪张显示哪张,或者说可以让modal 模式可以放到某个div里
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
v-viewer 标签里面有些不想显示,比如头像之类的,怎么排除呢
位置在:http://mirari.cc/v-viewer/
Component组件配置Options,侧边栏里面一个"toobar",视图下面一个"toobar"。
这个组件做得很棒,先给作者点个赞。
我在使用的过程中,感觉里面的动画过渡效果很好,比如旋转、缩放时候的动画,但是当切换图片列表上一张下一张的时候,那个从中间缩放出来的效果我不想要,但是我想保留其他的动画效果。
目前只找到一个transition属性来开关所有的动画效果,但是没有办法只去掉图片切换时候的动画。
想请教如何做到,谢谢!
i want the thumbnail to show so that when i click it loads the original image
how can that be done ??
请问一下如何设置或者修改代码能够实现点击黑色背景关闭预览窗口的功能呢?现在的左上角关闭有点不好操作,谢谢。
想在show之后的一排按钮后面添加一个下载小按钮 有什么方法可以添加
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:
Once the user rotates the file, how can I send the rotated version to my server?
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.
appreciated.
为什么vue版本的viewer不能拖拽图片了呢?之前使用jQuery版本的是可以拖拽图片的!
import 'viewerjs/dist/viewer.css'
viewer.css 找不到哦
您好,我在使用您的组件时,出现了一个小问题:当图片超过5M(甚至更大)时,会出现图片加载到一半突然全部消失,等候1s(或更久)才全部弹出的问题。之前使用viewerjs时没遇见过相同情况,不知是不是Vue渲染的问题?
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.