Блог

 <template>
    <div class="main-component"> 
        <app-loading-spinner v-if="loading"></app-loading-spinner>
        <app-main-grid>
            <template #col-one>
                <div id="openseadragon" width="9472px" height="12416px"></div>
            </template>
            <template #col-two>

            </template>
        </app-main-grid>
    </div>
</template>

<script>
    import MainGrid from './components/MainGrid.vue';
    import LoadingSpinner from './components/LoadingSpinner.vue';
    import OpenSeaDragon from 'openseadragon';

    export default {
        name: 'app', 
        components: {
            'app-main-grid': MainGrid, 
            'app-loading-spinner': LoadingSpinner
        }, 
        data: () => ({
            viewer: null, 
            loading: false
        }),
        methods: {
            loadOpenSeaDragon(){
                const duomo = {
                    Image: {
                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
                        Url: "//openseadragon.github.io/example-images/duomo/duomo_files/",
                        Format: "jpg",
                        Overlap: "2",
                        TileSize: "256",
                        Size: {
                            Width:  "13920",
                            Height: "10200"
                        }
                    }
                };

                new OpenSeaDragon({
                    id: 'openseadragon', 
                    prefixUrl: "//openseadragon.github.io/openseadragon/images/",
                    tileSources: duomo
                });
            }
        }, 
        mounted(){
            this.loadOpenSeaDragon();
        }
    }
</script> 

<style lang="scss"> 

  @import url('https://fonts.googleapis.com/css2?family=Special Eliteamp;display=swap');

    *,*::before,*::after{
        margin:0;
        padding:0;
        box-sizing:inherit;
    }

    html{
        box-sizing:border-box;
        font-size:62.5%;
        height:100vh;
    }

    body{
        height:100vh;
    }

    button, select {
        cursor:pointer;
    }
</style>