浅谈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(distancetotal){
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的使用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。