relationShip.vue 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <!-- <div class="main-cont" ref="myElement">
  3. <div class="main-left">
  4. <img :src="devicePng" alt="" id="start" />
  5. <img :src="devicePng" alt="" />
  6. <img :src="devicePng" alt="" />
  7. </div>
  8. <div class="main-middle" ref="middleElement">
  9. <img :src="devicePng" alt="" id="end" />
  10. </div>
  11. <div class="main-right">
  12. <img :src="devicePng" alt="" /> <img :src="devicePng" alt="" /><img
  13. :src="devicePng"
  14. alt=""
  15. />
  16. </div>
  17. </div> -->
  18. <div>
  19. <div id="start">start</div>
  20. <div id="end" style="margin-left:200px">end</div>
  21. </div>
  22. </template>
  23. <script setup>
  24. import { onMounted, watch, ref, nextTick, defineEmits } from "vue";
  25. import devicePng from "@/assets/image/instruct/device.png";
  26. import LeaderLine from "../../../../public/leader-line.min.js"
  27. const props = defineProps({
  28. checkDialogData: {
  29. type: Object,
  30. default: () => {},
  31. },
  32. });
  33. const middleElement = ref(null);
  34. const myElement = ref(null);
  35. onMounted(() => {
  36. const startElement = document.getElementById('start');
  37. const endElement = document.getElementById('end');
  38. // new LeaderLine(startElement, endElement);
  39. new LeaderLine(startElement, endElement, { color: 'gray', size: 2, path: "grid" })
  40. nextTick(() => {
  41. // setTimeout(() => {
  42. // const heights = myElement.value.scrollHeight;
  43. // const eysHeigth = myElement.value.clientHeight;
  44. // if (heights > 550) {
  45. // console.log("heights", heights);
  46. // middleElement.value.style.marginTop = `${(heights - 160) / 2}px`; // 设置元素的垂直位置
  47. // } else {
  48. // middleElement.value.style.marginTop = `${heights / 3}px`; // 设置元素的垂直位置
  49. // }
  50. // }, 0);
  51. });
  52. });
  53. </script>
  54. <style scoped lang="scss">
  55. @mixin img-size {
  56. width: 150px;
  57. height: 90px;
  58. margin-bottom: 40px;
  59. }
  60. @mixin left-and-right {
  61. display: flex;
  62. flex-direction: column;
  63. }
  64. .main-cont {
  65. display: flex;
  66. justify-content: space-evenly;
  67. }
  68. .main-left {
  69. display: flex;
  70. @include left-and-right;
  71. & > img {
  72. @include img-size;
  73. }
  74. }
  75. .main-middle {
  76. box-sizing: border-box;
  77. }
  78. .main-right {
  79. display: flex;
  80. @include left-and-right;
  81. & > img {
  82. @include img-size;
  83. }
  84. }
  85. </style>