实现内容
需要实现点击图片标记红点,主要实现了两种方式:
只要鼠标点击,就进行标记,可标记多个点,再次点击已标记的点,就取消勾选
鼠标多次点击界面只存在一个点
一、只要鼠标点击,就进行标记,可标记多个点,再次点击已标记的点,就取消标记
实现效果
实现代码
@click="clickMarkPoint($event)">
{{ markData.xAxis }}
{{ markData.yAxis }}
export default {
name: "markPointPage",
data() {
return {
// 标记图坐标显示
markData: {
xAxis: 0,
yAxis: 0,
rowIndex: 0,
imageUrl: ''
},
// 红点数
index: 0
}
},
methods: {
clickMarkPoint(e) {
// e.offsetX 相对于图片的X坐标
// e.offsetY 相对于图片的Y坐标
this.markPoint(e.offsetX, e.offsetY);
this.markData.xAxis = e.offsetX;
this.markData.yAxis = e.offsetY;
},
markPoint(offsetX, offsetY) {
var nameIndex=this.index++;
// 点击多个点,生成多个值
var div = document.createElement("div"+nameIndex);
div.className = "marker";
div.id = "marker"+nameIndex;
// 红点的宽
div.style.width = "45px";
// 红点的高
div.style.height = "45px";
// 红点颜色
div.style.backgroundColor = "red";
div.style.left = offsetX + "px";
div.style.top = offsetY + "px";
div.style.position = "absolute";
// 边框半径百分比
div.style.borderRadius = "50%";
div.innerHTML = "谢主隆恩";
document.getElementById("block").appendChild(div);
// 添加点击事件,再次点击标记点,则移除红点
document.getElementById("marker"+nameIndex).addEventListener("click", function(){
// 移除点
console.log(nameIndex)
var markPointAxis = document.getElementById("marker"+nameIndex);
markPointAxis.remove(markPointAxis);
});
}
}
}
二、鼠标多次点击界面只存在一个点
实现效果
实现代码
@click="clickMarkPoint($event)">
{{ markData.xAxis }}
{{ markData.yAxis }}
export default {
name: "markPointPage",
data() {
return {
// 标记图坐标显示
markData: {
xAxis: 0,
yAxis: 0,
rowIndex: 0,
imageUrl: ''
},
// 红点数
index: 0
}
},
methods: {
clickMarkPoint(e) {
// e.offsetX 相对于图片的X坐标
// e.offsetY 相对于图片的Y坐标
this.markPoint(e.offsetX, e.offsetY);
this.markData.xAxis = e.offsetX;
this.markData.yAxis = e.offsetY;
},
markPoint(offsetX, offsetY) {
// 页面只有一个点,再次移除marker
if (document.getElementsByClassName("marker").length > 0) {
// 移除点
var markPointAxis = document.getElementById("marker");
markPointAxis.remove(markPointAxis);
}
var div = document.createElement("div");
div.className = "marker";
div.id = "marker";
// 红点的宽
div.style.width = "45px";
// 红点的高
div.style.height = "45px";
// 红点颜色
div.style.backgroundColor = "red";
div.style.left = offsetX + "px";
div.style.top = offsetY + "px";
div.style.position = "absolute";
// 边框半径百分比
div.style.borderRadius = "50%";
div.innerHTML = "谢主隆恩";
document.getElementById("block").appendChild(div);
}
}
}
如果对您有帮助,点个赞,O(∩_∩)O哈哈~
好文链接
发表评论