优化Vue3 Typescript代码并且获取鼠标框选div参数template div div id=bottom stateBar div divtemplatescript lang=tsimport defineComponent from vue;export default defineComponent name MouseSelect data retur

<template>
  <div>
    <div id="bottom">{{ stateBar }}</div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';

export default defineComponent({
  name: 'MouseSelect',
  setup() {
    const stateBar = ref('');
    const mouseDownEvent = (e: MouseEvent) => {
      const posx = e.clientX;
      const posy = e.clientY;
      const div = document.createElement('div');
      div.className = 'tempDiv';
      div.style.left = `${e.clientX}px`;
      div.style.top = `${e.clientY}px`;
      document.body.appendChild(div);

      const mouseMoveEvent = (ev: MouseEvent) => {
        div.style.left = `${Math.min(ev.clientX, posx)}px`;
        div.style.top = `${Math.min(ev.clientY, posy)}px`;
        div.style.width = `${Math.abs(posx - ev.clientX)}px`;
        div.style.height = `${Math.abs(posy - ev.clientY)}px`;
        stateBar.value = `MouseX: ${ev.clientX} <br/> MouseY: ${ev.clientY}`;
      };
      document.addEventListener('mousemove', mouseMoveEvent);

      const mouseUpEvent = () => {
        div.parentNode?.removeChild(div);
        document.removeEventListener('mousemove', mouseMoveEvent);
        document.removeEventListener('mouseup', mouseUpEvent);
      };
      document.addEventListener('mouseup', mouseUpEvent);
    };

    onMounted(() => {
      const stateBarElem = document.getElementById('bottom');
      if (stateBarElem) {
        stateBarElem.addEventListener('mousedown', mouseDownEvent);
      }
    });

    onBeforeUnmount(() => {
      const stateBarElem = document.getElementById('bottom');
      if (stateBarElem) {
        stateBarElem.removeEventListener('mousedown', mouseDownEvent);
      }
    });

    return {
      stateBar,
    };
  },
});
</script>
<style>
* {
  padding: 0;
  margin: 0;
}

#bottom {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 40px;
  /* height: 100%; */
  border: 1px solid #000;
  background: #000;
  color: #fff;
}

.tempDiv {
  border: 1px dashed blue;
  background: #5a72f8;
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0.1;
  filter: alpha(opacity= 10);
}
</style>
<!-- 
1. 使用 setup() 替换 data() 和 methods
2. 使用 ref() 创建响应式数据 stateBar
3. 使用 onMounted() 和 onBeforeUnmount() 替换 mounted() 和 beforeUnmount()
4. 使用 addEventListener() 和 removeEventListener() 替换 onXXX() 事件绑定和解绑
5. 将 mouseDownEvent() 移至 setup() 中，使用 const 声明局部变量，避免使用 this
6. 将 onmousemove 和 onmouseup 事件绑定至 document 上，避免在组件销毁时忘记解绑
7. 使用 addEventListener() 和 removeEventListener() 替换 onXXX() 事件绑定和解绑
8. 将 stateBar.value 替换为 stateBar，因为 stateBar 是一个 ref() 对象
9. 优化其他细节，如将 mouseMoveEvent() 和 mouseUpEvent() 作为局部函数声明，避免全局污染
--