yanick/vue-svg-pan-zoom
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

fixed scoped style interpretation

Browse Source
This commit is contained in:
Alessio Carrafa 2019-09-26 17:50:31 +02:00
parent 96d4def6cf
commit 7165a1feff
1 changed files with 38 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/Scope.vue
View File

@ -4,8 +4,29 @@
</svg> </svg>
</template> </template>
<script> <style scoped>
.scope {
fill: red;
fill-opacity: 0.1;
stroke: red;
stroke-width: 2px;
}
svg.thumbViewClass {
border: 1px solid black;
position: absolute;
bottom: 5px;
left: 5px;
width: 20%;
height: 30%;
margin: 3px;
padding: 3px;
overflow: hidden;
z-index: 120;
}
</style>
<script>
function updateScope(){ function updateScope(){
let main = this.mainSPZ; let main = this.mainSPZ;
let thumb = this.thumbnailSPZ; let thumb = this.thumbnailSPZ;
@ -67,35 +88,11 @@ export default {
}, },
mounted() { mounted() {
const up = updateScope.bind(this); const up = updateScope.bind(this);
[ 'mainZoom', 'mainPan', 'thumbnailCreated' ].forEach( event => this.bus.$on( event, up ) [ 'mainZoom', 'mainPan', 'thumbnailCreated' ].forEach( event => this.bus.$on( event, up ) );
);
up(); up();
}, },
methods: { methods: {
updateMainViewPan updateMainViewPan
} }
}; };
</script> </script>
<style scoped>
.scope {
fill: red;
fill-opacity: 0.1;
stroke: red;
stroke-width: 2px;
}
svg.thumbViewClass {
border: 1px solid black;
position: absolute;
bottom: 5px;
left: 5px;
width: 20%;
height: 30%;
margin: 3px;
padding: 3px;
overflow: hidden;
z-index: 120;
}
</style>