All files / src/components/u-iframe.vue index.vue

65% Statements 13/20
20% Branches 2/10
25% Functions 1/4
68.42% Lines 13/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63      7x   7x     7x                                                                                                         7x 7x
<template>
<div :class="$style.root">
    <u-loading size="large" v-if="!loaded" :class="$style.loading"></u-loading>
    <iframe v-if="src"
        v-else
        @load="onLoad($event)"
        v-bind="$attrs"
        allowfullscreen
        :src="src" frameborder="0"></iframe>
</div>
</template>
 
<script>
 
import ULoading from '../u-loading.vue';
export default {
    name: 'u-iframe',
    components: { ULoading },
    props: {
        src: {
            type: String,
            default: '',
            required: true,
        },
    },
    data() {
        return {
            loaded: false,
        };
    },
    methods: {
        onLoad(event) {
            this.loaded = true;
            this.$emit('load');
        },
    },
};
</script>
 
<style module >
.root {
    position: relative;
}
.root iframe{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
 
.root .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
 
}
</style>