All files / src/components Label.vue

100% Statements 2/2
100% Branches 0/0
100% Functions 1/1
100% Lines 2/2
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                                    2x         23x                                      
<template>
    <div
        :style="position"
        @click="$emit('click')"
        v-text="text" />
</template>
 
<script>
 
export default {
    name: 'Label',
    props: {
        text: {
            type: String,
            required: true,
        },
        anchor: {
            type: Object,
            default: () => ({ x: 0, y: 0 }),
        },
    },
    computed: {
        position() {
            return {
                top: this.anchor.y + 'px',
                left: this.anchor.x + 'px',
            };
 
        },
    },
};
</script>
<style lang="scss" scoped>
div {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 1;
}
 
</style>