Vue 前端加框 给div加红色框框 js实现

实现方式：用getElementsByClassName、createElement、appendChild实现在原有div上添加一个新的div，从而达到框选效果

<template>
  <div>
    <el-button @click="addIten">添加</el-button>
    <el-button @click="deleteItem">删除</el-button>
    <div class="testDemo"></div>
  </div>
</template>

<script>
export default {
  methods: {
    // 添加div，设置统一类名temporary_class
    addIten() {
      var domList = document.getElementsByClassName("testDemo");
      for (let i = 0; i < domList.length; i++) {
        var dom = domList[i];
        dom.style.position = "relative";
        let divEle = document.createElement("div");
        divEle.classList.add("temporary_class");
        divEle.style.position = "absolute";
        divEle.style.width = 100 + "px";
        divEle.style.height = 100 + "px";
        divEle.style.left = 50 + "px";
        divEle.style.top = 50 + "px";
        divEle.style.border = "1px solid red";
        dom.appendChild(divEle);
      }
    },
    // 删除所有类名为temporary_class的div
    deleteItem() {
      let domLength = document.getElementsByClassName("temporary_class");
      while (true) {
        if (domLength.length > 0) {
          document.getElementsByClassName("temporary_class")[0].remove();
        } else {
          break;
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.testDemo {
  width: 200px;
  height: 200px;
  background-color: #000;
}
</style>