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

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

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

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

根据点击元素的类名来判断是属于创建元素还是编辑或者删除元素
e.target.className == “元素类名”
点击创建一个元素就给当前元素添加一个自定义属性及id，方便后续匹配删除及编辑操作
上代码

<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>

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

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

input点击指定区域不失焦
input点击指定区域不失焦场景做需求时碰到了一个问题,就是input失去焦点会触发请求接口操作,而点击旁边的按钮不触发这个操作.这个问题困扰了挺长时间,通过查阅资料找到了解决方案,记录一下. 1 ...
vue 鼠标点击特效动画（css3动画），水波纹动画效果
效果展示思路要点通过向数组 waves push操作插入水波纹相关数据,使用 vue v-for 动态更新 waves 生成水波纹数据水波纹使用fixed定位通过点击事件的 clientX 和 ...
html点击按钮清空元素,jQuery怎么删除元素节点
jquery删除元素节点的方法非常简单,我们可以直接通过remove()方法来进行删除节点操作. 下面我们就结合简单的代码示例,给大家详细介绍jquery删除节点元素的方法. 代码实例如下: jque ...
php根据键值去除数组中的某个元素_php数组删除元素删除指定键值元素
这个属于PHP操作数组的基本应用,但是小应用有大用途,而且一不留心操作错了,还可能给你造出意想不到的bug. 最近写程序的时候要拼装一个检索数组,要求每个栏目的检索条件还不一样,于是乎将获取到的检索条 ...
java vector删除指定元素_C++ vector删除元素（数据）详解
正像所说的那样,只能通过容器的成员函数来删除元素.可以通过使用 vector 的成员函数 clear() 来删除所有的元素.例如: std::vector data(100, 99);// Conta ...
vue 鼠标点击事件_VBA代码解决方案第115讲：点击鼠标实现精准控制触发事件的VBA代码第二方案...
大家好,我们今日继续讲解VBA代码解决方案的第115讲内容:工作表事件中,根据Target参数不同,实现精准控制触发事件的VBA代码第二方案.在上一讲中我们讲了利用Address的属性实现控制触发事件 ...
jsp js 鼠标移动到指定区域显示选项卡示例,离开时不显示
-1.右侧弹出导航菜单完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
vue 鼠标点击图片做红点标记
实现内容需要实现点击图片标记红点,主要实现了两种方式: 只要鼠标点击,就进行标记,可标记多个点,再次点击已标记的点,就取消勾选鼠标多次点击界面只存在一个点一.只要鼠标点击,就进行标记,可标记多个 ...
地图点击区域高亮 vue_这个Excel技巧很强大，鼠标点击即高亮显示数据区域
单于吹落山头月.漫漫江上沙如雪.谁唱缕金衣.水寒船舫稀.芦花枫叶浦.忆抱琵琶语.身未发长沙.梦魂先到家. ------[宋]王观<菩萨蛮·单于吹落山头月> 之前给大家分享过,当我们根据 ...

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

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

最新文章

热门文章