img.vue 861 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <img
  3. :src="oriUrl || item.src"
  4. class="componenet_img"
  5. @click.stop="editorFunc"
  6. :style="outStyle()"
  7. />
  8. </template>
  9. <script setup>
  10. import { defineProps, ref, inject } from 'vue';
  11. const starEditorFormwork = inject("starEditorFormwork");
  12. const props = defineProps({
  13. item: Object,
  14. index: String
  15. });
  16. const oriUrl = ref('');
  17. const outStyle = () => {
  18. const width = {
  19. '100%': true,
  20. '100vh': true,
  21. };
  22. const styleClass = JSON.parse(JSON.stringify(props.item.style));
  23. if (width[props.item.style.width]) {
  24. styleClass.width = '375px';
  25. }
  26. return styleClass;
  27. };
  28. const editorFunc = () => {
  29. const p = {
  30. ...props.item,
  31. leftEle: true
  32. }
  33. if(oriUrl.value) p.src = oriUrl.value;
  34. starEditorFormwork(p, props.index);
  35. };
  36. </script>
  37. <style scoped>
  38. .componenet_img {
  39. cursor: pointer;
  40. }
  41. </style>