浅谈vue 锚点指令v-anchor的使用
更新时间：2019年11月13日 15:02:26 作者：人坚不拆-世间仅有
今天小编就为大家分享一篇浅谈vue 锚点指令v-anchor的使用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如下所示：
export default {
inserted: function(el, binding) {
el.onclick = function() {
let total;
if (binding.value == 0) {
total = 0;
} else {
total = document.getElementById(`anchor-${binding.value}`).offsetTop;
}
let distance = document.documentElement.scrollTop || document.body.scrollTop;
let step = total / 50;
if (total > distance) {
(function smoothDown() {
if (distance < total) {
distance += step;
document.documentElement.scrollTop = distance;
setTimeout(smoothDown, 5);
} else {
document.documentElement.scrollTop = total;
}
})();
} else {
let newTotal = distance - total;
step = newTotal / 50;
(function smoothUp() {
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的使用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了如何使用vue-router为每个路由配置各自的title,及使用vue router的方法，需要的朋友可以参考下2018-07-07
这篇文章主要为大家介绍了Vue3从0搭建Monorepo项目组件库示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章给大家介绍了Vue.js 表单控件操作的相关知识，本文通过实例演示了input和textarea元素中使用v-model的方法，本文给大家介绍的非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-03-03
在VUE项目中经常会用到mapState和mapActions，mapState主要用于同步全局的变量或者对象，这篇文章主要介绍了VUE中的mapState和mapActions的使用,需要的朋友可以参考下2022-06-06
这篇文章主要给大家介绍了关于treeSelect树组件设置父节点禁用的相关资料,文中通过图文以及示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue--select组件的使用与禁用的实现代码，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下2018-04-04
本篇文章主要介绍了Vue.js组件，组件系统是Vue.js其中一个重要的概念，具有一定的参考价值，有需要的可以了解一下。2016-12-12
v-for指令是在模板编译的代码生成阶段实现的，当遍历数组或对象时需要使用列表渲染指令v-for。本文主要为大家介绍了v-for指令的基本用法，希望对大家有所帮助2023-04-04
wangEditor是一个轻量级web富文本编辑器,配置方便,使用简单,下面这篇文章主要给大家介绍了关于vue中wangEditor5编辑器的基本使用,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于Vue路由传参的三种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
最新评论