vue中 一个div盒子 四个角 用伪元素写圆点

可以使用以下 CSS 代码实现：

.box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

.box::before, .box::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #000;
}

.box::before {
  top: 0;
  left: 0;
}

.box::after {
  top: 0;
  right: 0;
}

.box::before + span {
  bottom: 0;
  left: 0;
}

.box::after + span {
  bottom: 0;
  right: 0;
}

其中，`.box` 是需要添加四个圆点的 div 盒子。使用 `::before` 与 `::after` 伪元素分别在左上角和右上角添加圆点，使用 `+` 兄弟选择器添加一个 `span` 标签，然后在 `span` 中添加另外两个圆点，分别在左下角和右下角。使用 `position: absolute` 将伪元素定位在盒子的四个角上，并使用 `border-radius: 50%` 将元素变成圆形。

相关问题

写一个在vue3中拖拽div边框可以调整盒子大小的代码

好的，我可以为您提供示例代码。以下是一个在vue3中实现拖拽div边框调整盒子大小的示例代码：

<template>
  <div class="resize-container" @mousedown="startResize">
    <div ref="box" class="resize-box"></div>
    <div class="resize-handler"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isResizing: false,
      startX: null,
      startWidth: null
    };
  },
  methods: {
    startResize(e) {
      this.isResizing = true;
      this.startX = e.clientX;
      this.startWidth = this.$refs.box.offsetWidth;
      document.addEventListener("mousemove", this.resize);
      document.addEventListener("mouseup", this.stopResize);
    },
    resize(e) {
      if (!this.isResizing) return;
      const width = this.startWidth + (e.clientX - this.startX);
      this.$refs.box.style.width = `${width}px`;
    },
    stopResize() {
      this.isResizing = false;
      document.removeEventListener("mousemove", this.resize);
      document.removeEventListener("mouseup", this.stopResize);
    }
  }
};
</script>

<style>
.resize-container {
  position: relative;
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
}

.resize-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f8f8f8;
}

.resize-handler {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: #ccc;
  cursor: se-resize;
}
</style>

您可以将以上代码复制到您的vue组件中，并根据需要进行修改。希望能帮助到您！

一个div盒子平均分为左右两个小div盒子 用vue技术

可以使用Vue的计算属性来计算左右两个小div盒子的样式。

首先，在Vue的template中，使用一个父div包含左右两个小div，然后设置父div的样式为flex，这样子div就可以平均分为左右两个小div。

然后，定义一个计算属性来计算左右两个小div的样式，具体实现如下：

<template>
  <div class="parent-box">
    <div class="left-box" :style="{width: leftBoxWidth}"></div>
    <div class="right-box" :style="{width: rightBoxWidth}"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentBoxWidth: 600, // 父div的宽度
      leftBoxWidthRatio: 0.5, // 左div占比
    }
  },
  computed: {
    leftBoxWidth() {
      return `${this.parentBoxWidth * this.leftBoxWidthRatio}px`;
    },
    rightBoxWidth() {
      return `${this.parentBoxWidth * (1 - this.leftBoxWidthRatio)}px`;
    }
  }
}
</script>

在上面的代码中，我们定义了一个父div的宽度，和左div的占比，然后通过计算属性来计算左右两个小div的宽度，并将宽度作为样式设置给左右两个小div。

这样就可以实现将一个div平均分为左右两个小div的效果了。