(vue+element)PC端图片打点

这是小弟写的第二篇博客,废话不多说
效果图

第一步:
左边的列表是用element组件
(vue+element)PC端图片打点_第1张图片
这样能实现element的滚动条和点击选择,不是很清楚的可以先去了解一下官网的组件。
第二步
点击列表获取当前数据,勾选后禁用再勾选
(vue+element)PC端图片打点_第2张图片
(vue+element)PC端图片打点_第3张图片
把获取的对象放到另一个数组里,这个数据就是地图打点的显示的数组
第三步
在右边图片进行操作,点击图片获取top和left赋值到刚刚的对象中,在push到数组里,然后把isCheck也丢进去,实现打点完成以后,禁用打点。
(vue+element)PC端图片打点_第4张图片
我自己定义了一个全局变量noPosition,是为了防止点击多次。
第四步:
删除打点,获取点击显示的数据的对象。根据下标直接splice删除,然后isCheck改成可点击,这样就可以实现,点击打点,删除再打点。
(vue+element)PC端图片打点_第5张图片
可能描述不够明确,毕竟才刚开始写,大家多体谅,有更好建议的欢迎评论

你可能感兴趣的:(工作遇到的问题,vue.js)