simulateFrame.vue 816 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <!-- 模拟节点拖动效果 -->
  2. <template>
  3. <g
  4. :transform="`translate(${dragFrame.posX}, ${dragFrame.posY})`"
  5. class="dragFrame">
  6. <foreignObject width="180" height="30" >
  7. <body style="margin: 0" xmlns="http://www.w3.org/1999/xhtml">
  8. <div
  9. class="dragFrameArea">
  10. </div>
  11. </body>
  12. </foreignObject>
  13. </g>
  14. </template>
  15. <script>
  16. export default {
  17. props: {
  18. dragFrame: {
  19. type: Object
  20. }
  21. },
  22. methods: {}
  23. };
  24. </script>
  25. <style scoped>
  26. .dragFrame {
  27. z-index: -10;
  28. }
  29. .dragFrame .dragFrameArea {
  30. width: 180px;
  31. height: 30px;
  32. background-color: hsla(0, 0%, 100%, 0.9);
  33. border: 1px dashed black;
  34. border-radius: 15px;
  35. font-size: 12px;
  36. -webkit-transition: background-color 0.2s;
  37. transition: background-color 0.2s;
  38. box-sizing: border-box;
  39. }
  40. </style>