嗨大家我是vue.js的新手,我正在尝试使用npm模块实现图像缩放,旋转,缩放和其他一些功能：npm viewerjs模块.
遵循以下步骤： Github repo.我收到的问题如下：
遵循以下步骤： Github repo.我收到的问题如下：
研究了github问题并在此找到了答案：Github issue link
.@ fengyuanchen说：
have to initialize
Viewer.jsin themountedhook function.
请建议我如何初始化已安装的viewer.js.
提前致谢.
解决方法
TommyF的反应非常好.但是我建议将查看器用作动态Vue数据,这样您就可以在Vue组件中使用Viewer库方法,事件及其所有功能.
const app = new Vue({
el: '#app',data() {
return {
viewer: null,mode: 'modal',}
},created() {
},methods: {
zoom(value) {
this.viewer.zoom(value);
},close() {
this.viewer.exit();
},toggleMode(newmode) {
if (newmode != this.mode) {
this.mode = newmode;
this.viewer.destroy();
this.viewer = new Viewer(this.$refs.gallery,{
inline: (this.mode === 'inline'),url: 'data-original',});
}
}
},mounted() {
this.viewer = new Viewer(this.$refs.gallery,{
inline: false,});
}
})
见下面的例子：
const app = new Vue({
el: '#app',data() {
return {
viewer: null,}
},created() {
},methods: {
zoom(value) {
this.viewer.zoom(value);
},close() {
this.viewer.exit();
},toggleMode(newmode) {
if (newmode != this.mode) {
this.mode = newmode;
this.viewer.destroy();
this.viewer = new Viewer(this.$refs.gallery,{
inline: (this.mode === 'inline'),});
}
}
},mounted() {
this.viewer = new Viewer(this.$refs.gallery,{
inline: false,});
}
})
<link rel="stylesheet" href="https://fengyuanchen.github.io/viewerjs/css/viewer.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://fengyuanchen.github.io/viewerjs/js/viewer.js"></script>
<style>
.grid {
display: grid;
grid-template-columns: repeat(6,1fr);
grid-auto-rows: 1fr;
}
.grid::before {
content: '';
width: 0;
padding-bottom: 100%;
grid-row: 1 / 1;
grid-column: 1 / 1;
}
.grid>*:first-child {
grid-row: 1 / 1;
grid-column: 1 / 1;
}
.grid img {
width: 100%;
height: 100%;
}
</style>
<div id="app">
<button @click="zoom(0.1)"> zoom + </button>
<button @click="zoom(-0.1)"> zoom - </button>
<button @click="close()"> close </button>
<button @click="toggleMode('inline')"> inline </button>
<button @click="toggleMode('modal')"> modal </button>
<div>
<div ref="gallery" class="grid">
<img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-1.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-1.jpg" alt="Cuo Na Lake">
<img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-2.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-2.jpg" alt="Tibetan Plateau">
<img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-3.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-3.jpg" alt="Jokhang Temple">
<img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-4.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-4.jpg" alt="Potala Palace 1">
<img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-5.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-5.jpg" alt="Potala Palace 2">
<img data-original="https://fengyuanchen.github.io/viewerjs/images/tibet-6.jpg" src="https://fengyuanchen.github.io/viewerjs/images/tibet-6.jpg" alt="Potala Palace 3">
</div>
</div>
</div>
