vue鼠标点击指定区域创建dom元素与编辑删除元素的思路

vue鼠标点击指定区域创建dom元素与编辑删除元素的思路
话不多说有思路直接干

一. 鼠标点击页面灰色背景创建红色元素

二. 点击已经创建的红色元素则是编辑或者删除

1. 根据点击元素的类名来判断是属于创建元素还是编辑或者删除元素
   e.target.className == “元素类名”
   

2. 点击创建一个元素就给当前元素添加一个自定义属性及id，方便后续匹配删除及编辑操作
   

3. 上代码

<template>
  <div>
    <!--编辑删除 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <p>确定编辑或删除当前元素？</p>
      <el-button type="warning" @click="editFn">编辑</el-button>
      <el-button type="danger" @click="deleteFn">删除</el-button>
    </el-dialog>
    <!--编辑删除 -->
    <div class="wrap" ref="wrap" @click.stop="createDom"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      wrap: null, //创建元素的父元素
      boxDom: null, //创建的元素
      boxLeft: null, //创建元素的左边距
      boxTop: null, //创建元素的上边距
      boxId: 0, //创建元素的id,标识
      dialogVisible: false,
    };
  },
  methods: {
    initDom() {
      //初始化获取盒子父级
      this.wrap = this.$refs.wrap;
    },
    // 点击生成元素
    createDom(e) {
      this.domData = null;
      if (e.target.className == "wrap") {
        this.boxId++;
        //需要传递的标识
        let boxData = {
          id: this.boxId,
          name: `实验的元素${this.boxId}`,
        };
        this.boxLeft = e.offsetX;
        this.boxTop = e.offsetY;
        let boxDom = document.createElement("div");
        boxDom.classList.add("boxDom");
        boxDom.style.cssText = `left:${this.boxLeft}px;top:${this.boxTop}px`;
        boxDom.dataset["boxData"] = JSON.stringify(boxData);
        this.wrap.appendChild(boxDom);
      } else {
        if (e.target.className == "boxDom") {
          this.domData = JSON.parse(e.target.dataset["boxData"]);
          this.dialogVisible = true;
        }
      }
    },

    //编辑
    editFn() {
      let domAll = document.querySelectorAll(".boxDom");
      if (domAll.length > 0) {
        domAll.forEach((item, index) => {
          let childDom = JSON.parse(item.dataset["boxData"]);
          if (this.domData.id == childDom.id) {
            let editDom = JSON.parse(item.dataset["boxData"]);
            editDom["name"] = "55555555";
            item.dataset["boxData"] = JSON.stringify(editDom);
          }
        });
      }
    },
    //删除
    deleteFn() {
      let domAll = document.querySelectorAll(".boxDom");
      if (domAll.length > 0) {
        domAll.forEach((item, index) => {
          let childDom = JSON.parse(item.dataset["boxData"]);
          if (this.domData.id == childDom.id) {
            this.wrap.removeChild(item);
            this.dialogVisible = false;
          }
        });
      }
    },
  },
  mounted() {
    this.initDom();
  },
  created() {},
};
</script>

<style >

.wrap {
  position: relative;
  width: 800px;
  height: 660px;
  background-color: gray;
  margin-left: 200px;
}

.boxDom {
  width: 40px;
  height: 40px;
  background: red;
  position: absolute;
}
</style>

编辑与删除方法还有很大的优化空间，这里就先不说了