55 lines
1.3 KiB
Vue
55 lines
1.3 KiB
Vue
<template>
|
|
<div :id="id" :style="nStyle"></div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "OpenSeadreagonComponent",
|
|
props: {
|
|
id: {
|
|
type: String
|
|
},
|
|
options: {
|
|
type: Object
|
|
},
|
|
nStyle: {
|
|
type: String
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
viewer: null
|
|
}
|
|
},
|
|
updated: function () {
|
|
if (this.viewer){
|
|
this.viewer.destroy();
|
|
this.viewer = null;
|
|
}
|
|
if (this.id !== 'openseadragon_undefined')
|
|
this.setup();
|
|
},
|
|
watch: {
|
|
options: {
|
|
handler(n, o){
|
|
// Pour reload la preivew en cas d'upload d'un nouveau média
|
|
this.$forceUpdate();
|
|
},
|
|
deep: true // Pour checker dans tout l'objet si il y a un changement
|
|
}
|
|
},
|
|
methods: {
|
|
setup: function () {
|
|
if (!this.viewer && this.options) {
|
|
const _options = this.options;
|
|
_options.id = this.id;
|
|
this.viewer = new OpenSeadragon(_options)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|