vue 图片选点 定位

<div style="padding: 20px;">    <div class="case_img" @mousedown="show_coords">        <img  alt="" style="width: 100%;"             :src="formState.highlightimg.indexOf('http') > -1                   ? formState.highlightimg                   : getBaseImgUrl(formState.highlightimg)"             >        <h5 v-for="(itme, i) in formState.dataList" :key="itme.id"            @click="onEditClick(itme,'edit')"            @mousedown.stop            :style="{                    left: get_100(itme.leftpx),                    top: get_100(itme.toppx)                    }">            {{ i + 1 }}</h5>    </div></div>  // 设置百分比const  get_100 = (val:any) => {  // 如果 val 是字符串，且以百分号结尾  if (typeof val === 'string' && val.endsWith('%')) {    // 去掉百分号并转换为数字    return val; // 直接返回原始百分比  }  // 如果 val 是数字，转换为百分比  if (typeof val === 'number') {    return  ((val / 10000) * 100).toFixed(2) + '%' ;  }  // 如果输入的 val 既不是数字也不是以百分号结尾的字符串，返回空字符串或者处理错误  return '';}const show_coords = (e: any) => {  // 获取当前点击元素（假设它是图片）  const obj = e.target;  // 获取当前点击场景的上间距  const rect = obj.getBoundingClientRect();  const mt = rect.top + window.scrollY;  // 图片顶部的偏移量（包含页面滚动）  // 获取当前点击场景的左间距  const ml = rect.left + window.scrollX;  // 图片左侧的偏移量（包含页面滚动）  // 获取当前点击场景的宽度  const mainWidth = rect.width;  // 获取当前点击场景的高度  const mainHeight = rect.height;  // 计算出当前点击位置距离所在场景的左间隔（百分比）  const x = ((e.clientX - ml) / mainWidth * 100).toFixed(2) + "%";  // 计算出当前点击位置距离所在场景的上间隔（百分比）  const y = ((e.clientY - mt) / mainHeight * 100).toFixed(2) + "%";  // 创建新的参数并加入到数据列表  let parameter = {    id: generateRandomId(),    title: '',    imgurl: '',    info: '',    leftpx: x,   // 使用 x 作为 leftpx    toppx: y,    // 使用 y 作为 toppx  };  // 将新参数加入到数据列表  console.log('parameter',parameter);  onEditClick(parameter,'add');};// 唯一idfunction generateRandomId() {  const timestamp = new Date().getTime(); // 获取当前时间戳  const randomNum = Math.floor(Math.random() * 1000); // 生成一个0-999之间的随机数  return `id_${timestamp}_${randomNum}`; // 返回拼接后的ID字符串}