simulateSelArea.vue 787 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. <template>
  2. <g>
  3. <foreignObject width="100%" height="100%" style="position: abolute">
  4. <body xmlns="http://www.w3.org/1999/xhtml" :style="getSimulateSelArea()" id="simulate_sel_area">
  5. </body>
  6. </foreignObject>
  7. </g>
  8. </template>
  9. <script>
  10. export default {
  11. props: {
  12. simulate_sel_area: {
  13. type: Object,
  14. default: () => {
  15. return {
  16. left: 0,
  17. top: 0,
  18. width: 0,
  19. height: 0
  20. };
  21. }
  22. }
  23. },
  24. methods: {
  25. getSimulateSelArea() {
  26. const { left, top, width, height } = this.simulate_sel_area;
  27. return `width: ${width}px; height: ${height}px; left: ${left}px; top: ${top}px; border: 3px dashed #289de9;position: absolute;`;
  28. }
  29. }
  30. };
  31. </script>
  32. <style scoped>
  33. </style>