场景：弹窗（h:600px）中有一张图片（h:1200），点击图片，获取到对应坐标，鼠标移入图片，光标替换为印章

1. html

<div id="modal-box" class="h-[600px] overflow-x-auto">
    <img :src="imageFile" id="sign-box"
    class="border-solid border-2 border-current"
    @click="DisplayCoord"
    />
</div>

2. js

export default defineComponent({
    components: {},
    setup(){
         // 生成图片
        const imageFile = ref('');
        // base64 转换为 图片
        function changeArry(arry) {
           var outputImg = document.createElement('img');
           outputImg.src = 'data:image/png;base64,' + arry;
           return 'data:image/png;base64,' + arry;
        }
        // 请求接口
        async function getFile(){
            let res = await getdata()
            imageFile.value = changeArry(res.file)
        }
        // 获取图片坐标
          const x = ref('');
          const y = ref('');
          const getX = (obj) => {
            var parObj = obj;
            var left = obj.offsetLeft;
            while ((parObj = parObj.offsetParent)) {
              left += parObj.offsetLeft;
            }
            return left;
          };
          const getY = (obj) => {
            var parObj = obj;
            var top = obj.offsetTop;
            while ((parObj = parObj.offsetParent)) {
              top += parObj.offsetTop;
            }
            return top;
          };
          // 获取坐标
          const DisplayCoord = (event) => {
            var top, divBox, left, oDiv;
            oDiv = document.getElementById('sign-box');
            divBox = document.getElementById('modal-box');
            top = event.clientY - getY(oDiv) + document.body.scrollTop;
            left = event.clientX - getX(oDiv) + document.body.scrollLeft;
            let scrHei = oDiv?.scrollHeight; // 图片总高度
            let htmlBox = 1240 / scrHei; // 计算页面缩放比例 正常图片高度/现在获取到的高度
            let scrTop = divBox?.scrollTop; // 获取滚动高度
            let leftY = scrHei - (top + scrTop); // 以左下角为 0,0 往上计算
            y.value = leftY * htmlBox * 0.7;
            x.value = left * 0.7; // 后台像素与前台像素比
          };
    },
    return {
        imageFile
    }
})

3. css

// 使用印章图片替换原有光标样式
#sign-box {
    cursor: url('../assets/images/sign.png'), pointer;
  }