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_classaddIten() {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的divdeleteItem() {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>