1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- <template>
- <!-- <div class="main-cont" ref="myElement">
- <div class="main-left">
- <img :src="devicePng" alt="" id="start" />
- <img :src="devicePng" alt="" />
- <img :src="devicePng" alt="" />
- </div>
- <div class="main-middle" ref="middleElement">
- <img :src="devicePng" alt="" id="end" />
- </div>
- <div class="main-right">
- <img :src="devicePng" alt="" /> <img :src="devicePng" alt="" /><img
- :src="devicePng"
- alt=""
- />
- </div>
- </div> -->
- <div>
- <div id="start">start</div>
- <div id="end" style="margin-left:200px">end</div>
- </div>
- </template>
- <script setup>
- import { onMounted, watch, ref, nextTick, defineEmits } from "vue";
- import devicePng from "@/assets/image/instruct/device.png";
- import LeaderLine from "../../../../public/leader-line.min.js"
- const props = defineProps({
- checkDialogData: {
- type: Object,
- default: () => {},
- },
- });
- const middleElement = ref(null);
- const myElement = ref(null);
- onMounted(() => {
- const startElement = document.getElementById('start');
- const endElement = document.getElementById('end');
- // new LeaderLine(startElement, endElement);
- new LeaderLine(startElement, endElement, { color: 'gray', size: 2, path: "grid" })
- nextTick(() => {
-
- // setTimeout(() => {
- // const heights = myElement.value.scrollHeight;
- // const eysHeigth = myElement.value.clientHeight;
- // if (heights > 550) {
- // console.log("heights", heights);
- // middleElement.value.style.marginTop = `${(heights - 160) / 2}px`; // 设置元素的垂直位置
- // } else {
- // middleElement.value.style.marginTop = `${heights / 3}px`; // 设置元素的垂直位置
- // }
- // }, 0);
- });
- });
- </script>
- <style scoped lang="scss">
- @mixin img-size {
- width: 150px;
- height: 90px;
- margin-bottom: 40px;
- }
- @mixin left-and-right {
- display: flex;
- flex-direction: column;
- }
- .main-cont {
- display: flex;
- justify-content: space-evenly;
- }
- .main-left {
- display: flex;
- @include left-and-right;
- & > img {
- @include img-size;
- }
- }
- .main-middle {
- box-sizing: border-box;
- }
- .main-right {
- display: flex;
- @include left-and-right;
- & > img {
- @include img-size;
- }
- }
- </style>
|