(vue+element)PC端图片打点

366 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。 效果图 在这里插入图片描述 第一步: 左边的列表是用element组件

image.png 这样能实现element的滚动条和点击选择,不是很清楚的可以先去了解一下官网的组件。 第二步 点击列表获取当前数据,勾选后禁用再勾选

image.png

image.png 把获取的对象放到另一个数组里,这个数据就是地图打点的显示的数组 第三步 在右边图片进行操作,点击图片获取top和left赋值到刚刚的对象中,在push到数组里,然后把isCheck也丢进去,实现打点完成以后,禁用打点。

image.png 我自己定义了一个全局变量noPosition,是为了防止点击多次。 第四步: 删除打点,获取点击显示的数据的对象。根据下标直接splice删除,然后isCheck改成可点击,这样就可以实现,点击打点,删除再打点

image.png 可能描述不够明确,毕竟才刚开始写,大家多体谅,有更好建议的欢迎评论