同一个课件有多个图文融合组件id问题

src/views/book/courseware/create/components/question/image_text/ImageText.vue

@@ -49,7 +49,7 @@
       </el-radio-group>
       <div
         v-if="data.image_list[0]"
-        id="selectableArea"
+        :id="'selectableArea' + randomId"
         :style="{
           width: data.image_width + 'px',
           height: data.image_height + 'px',
@@ -273,6 +273,7 @@ export default {
       showArticleFlag: false, // 校对
       showStyleFlag: false,
       styleData: null,
+      randomId: Math.random().toString(36).substring(2, 12),
     };
   },
   watch: {
@@ -323,14 +324,14 @@ export default {
     },
     startSelection(event) {
       this.isSelecting = true;
-      let clientRect = document.getElementById('selectableArea').getBoundingClientRect();
+      let clientRect = document.getElementById('selectableArea' + this.randomId).getBoundingClientRect();
 
       this.startX = event.clientX - clientRect.left;
       this.startY = event.clientY - clientRect.top;
     },
     updateSelection(event) {
       if (!this.isSelecting) return;
-      let clientRect = document.getElementById('selectableArea').getBoundingClientRect();
+      let clientRect = document.getElementById('selectableArea' + this.randomId).getBoundingClientRect();
 
       this.endX = event.clientX - clientRect.left;
       this.endY = event.clientY - clientRect.top;