怎么在vue项目中使用v-anchor锚点指令

怎么在vue项目中使用v-anchor锚点指令？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

如下所示：

exportdefault{
inserted:function(el,binding){
el.onclick=function(){
lettotal;
if(binding.value==0){
total=0;
}else{

total=document.getElementById(`anchor-${binding.value}`).offsetTop;
}
letdistance=document.documentElement.scrollTop||document.body.scrollTop;
letstep=total/50;
if(total>distance){
(functionsmoothDown(){
if(distance<total){
distance+=step;
document.documentElement.scrollTop=distance;
setTimeout(smoothDown,5);
}else{
document.documentElement.scrollTop=total;
}
})();
}else{
letnewTotal=distance-total;
step=newTotal/50;
(functionsmoothUp(){
if(distance>total){
distance-=step;
document.documentElement.scrollTop=distance;
setTimeout(smoothUp,5);
}else{
document.documentElement.scrollTop=total;
}
})();
}

}
}
}

1、封装一个anchor.js

2、在入口文件中定义

//定义锚点跳转
Vue.directive(‘anchor',anchorFunc);

3、页面中使用方式

v-anchor=“传入的value”

使用例子：

看完上述内容，你们掌握怎么在vue项目中使用v-anchor锚点指令的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注恰卡编程网行业资讯频道，感谢各位的阅读！