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 | 3x 46x | <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 1 0 0; flex-wrap: wrap; position: absolute; transform: translate(-50%, -50%); z-index: 1; } </style> |