哈喽哈喽，这里是小菜不拖延博主
打卡day13~
首先，我们直接上效果！
<template>
<div class="pic_container">
<div
:class="['point','point-'+(value)]"
v-for="value in count"
:key="value">
</div>
<div class="card">
<div class="button">
<el-button type="text" @click="startTap">开始标点</el-button>
<el-button type="text" @click="endTap">结束标点</el-button>
</div>
<div class="img" @click="handle" >
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg">
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
count:0,
ifstart:false,
}
},
methods:{
handle(e){
let that=this
if(this.ifstart){
that.count=that.count+1
this.$nextTick(()=>{
var pointList=document.getElementsByClassName('point')
pointList[pointList.length-1].style.top=e.pageY+'px'
pointList[pointList.length-1].style.left=e.pageX+'px'
})
}
},
startTap(){
this.ifstart=true
},
endTap(){
this.ifstart=false
this.count=0
}
},
mounted(){
}
}
</script>
<style lang="scss" scoped>
*{
margin:0px;
padding:0px;
}
.point{
background-color: #000000;
width:8px;
height:8px;
border-radius: 50%;
position:absolute;
}
.pic_container{
z-index:0;
-moz-user-select:none; /*火狐*/
-webkit-user-select:none; /*webkit浏览器*/
-ms-user-select:none; /*IE10*/
-khtml-user-select:none; /*早期浏览器*/
user-select:none;
min-width:100%;
min-height:100%;
background-color: #c9dcd9;
display:flex;
justify-content: center;
padding-top:100px;
padding-bottom:50px;
.card{
min-width:100px;
min-height:200px;
padding:20px 20px;
border-radius: 8px;
background-color: rgb(255,255,255,0.5);
// position:relative;
top:100px;
left:100px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
}
img::before{
filter:blur(5px);
}
}
.img{
z-index:2px;
// margin:10px auto;
// display:flex;
// justify-content: center;
}
.button{
height:30px;
}
</style>
工具提示
也就是写一个盒子，然后利用visiblity，hidden/visible进行隐藏和出现
实现一个获取相对于图片的位置坐标
screenX、clientX、pageX, offsetX的区别
阅读于：图解事件坐标screenX、clientX、pageX, offsetX的区别_@Demi的博客-CSDN博客
简单来说，offset相对于当前元素，client相对于当前页面，page相当于整个页面，screen相对于整个屏幕（就是说，网页缩放不会影响，因为我是相当于整个屏幕）
1、screenX 和screenY
参照点：电脑屏幕左上角 screenX：鼠标点击位置相对于电脑屏幕左上角的水平偏移量 screenY：鼠标点击位置相对于电脑屏幕左上角的垂直偏移量 2、clientX和clientY
参照点：浏览器内容区域左上角 clientX：鼠标点击位置相对于浏览器可视区域的水平偏移量（不会计算水平滚动的距离） clientY：鼠标点击位置相对于浏览器可视区域的垂直偏移量（不会计算垂直滚动条的距离） 3、pageX和pageY
参照点：网页的左上角 pageX：鼠标点击位置相对于网页左上角的水平偏移量，也就是clientX加上水平滚动条的距离 pageY：鼠标点击位置相对于网页左上角的垂直平偏移量，也就是clientY加上垂直滚动条的距离 4、offsetX和offsetY
offsetX：鼠标点击位置相对于触发事件对象的水平距离 offsetY：鼠标点击位置相对于触发事件对象的垂直距离
报错解决
Cannot read properties of undefined (reading 'protocol')
at isURLSameOrigin (isURLSa
解决：不能使用Vue.use(axios),要使用Vue.prototype.axios
dom更新问题
html
解决：问题出在，我的dom没有更新，然后我就去获取了dom元素，导致我的点数组会出问题，所以这里要用$nextTick，在dom更新之后我再获取元素
handle(e){
let that=this
if(this.ifstart){
that.count=that.count+1
this.$nextTick(()=>{
var pointList=document.getElementsByClassName('point')
pointList[pointList.length-1].style.top=e.pageY+'px'
pointList[pointList.length-1].style.left=e.pageX+'px'
})
}
},
