vueピクチャ表示コントロールv-viewer使用
依存パッケージnpm install v-viewer--saveコンポーネントコードimgShow.vueをインストールし、表示のみの機能を実現
<template>
<div class="display-none">
<viewer ref="viewer" :images="images" @inited="inited">
<img width="100%" v-for="src in images" :src="src" :key="src" alt="" fit="scale-down" />
</viewer>
</div>
</template>
<script>
import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer/src/component.vue';
export default {
name: 'imgSelect',
components: {
Viewer
},
props: {
images: {
type: Array,
default: () => []
}
},
data: function() {
return {
dialogVisible: false
};
},
created: function() {
var vueObj = this;
this.$on('show-dialog', function(dataList, afterSelect) {
vueObj.$viewer.view(0);
});
},
methods: {
inited (viewer) {
this.$viewer = viewer;
},
closeImgPreview() {
this.dialogVisible = false;
}
}
};
</script>