vue获取div四个角坐标

可以通过以下代码获取一个div元素的四个角坐标：

var element = document.getElementById("yourDivId");
var rect = element.getBoundingClientRect();

var x1 = rect.left;
var y1 = rect.top;

var x2 = rect.right;
var y2 = rect.top;

var x3 = rect.left;
var y3 = rect.bottom;

var x4 = rect.right;
var y4 = rect.bottom;

其中 `x1, y1` 是左上角坐标，`x2, y2` 是右上角坐标，`x3, y3` 是左下角坐标，`x4, y4` 是右下角坐标。

相关问题

vue 获取div光标位置

要在Vue中获取`div`元素的光标位置，可以使用`Selection`对象和`Range`对象。下面是一个示例：

首先，在Vue组件的模板中，给`div`元素添加一个`ref`属性：

<template>
  <div ref="myDiv" contenteditable="true" @mouseup="handleMouseUp"></div>
</template>

然后，在Vue组件的方法中，定义一个`handleMouseUp`方法来处理鼠标抬起事件。在该方法中，可以通过`window.getSelection()`获取光标的位置，并使用`Range`对象获取光标相对于`div`元素的偏移量：

<script>
export default {
  methods: {
    handleMouseUp() {
      const selection = window.getSelection();
      const range = selection.getRangeAt(0);
      const divOffset = this.$refs.myDiv.getBoundingClientRect();

      const { top, left } = range.getBoundingClientRect();
      const cursorOffset = {
        top: top - divOffset.top,
        left: left - divOffset.left
      };

      console.log('光标位置：', cursorOffset);
    }
  }
}
</script>

在上述示例中，当鼠标在`div`元素上抬起时，会触发`handleMouseUp`方法。该方法获取当前光标位置的`Range`对象，并计算光标相对于`div`元素的偏移量。最后，将光标位置输出到控制台。

请注意，上述示例仅适用于在鼠标抬起时获取光标位置。如果需要实时追踪光标位置的变化，可能需要在其他事件（如键盘事件、鼠标移动事件）中监听并更新光标位置。另外，还需要考虑光标在不同元素之间移动时的情况。

如果需要在特定的时机获取光标位置，可以根据具体需求调整事件和方法的绑定方式。

vue获取div总高度

您可以通过以下方法获取div的总高度：

1. 使用原生JavaScript：

var div = document.getElementById('divId');
var height = div.offsetHeight;

2. 使用Vue中的ref属性：

在模板中添加ref属性：

<div ref="myDiv"></div>

在Vue实例中获取div的高度：

var height = this.$refs.myDiv.offsetHeight;

请注意，以上方法获取的是div的可见高度（包括padding、但不包括border和margin），如果需要获取包括border和padding的总高度，可以使用`clientHeight`属性。如果需要获取包括margin在内的总高度，可以使用`offsetHeight`属性。