淺談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、在入口文件中定義
//定義錨點跳轉(zhuǎn) Vue.directive(‘a(chǎn)nchor', anchorFunc);
3、頁面中使用方式
v-anchor = “傳入的value”
使用例子：
以上這篇淺談vue 錨點指令v-anchor的使用就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何使用vue-router為每個路由配置各自的title,及使用vue router的方法，需要的朋友可以參考下2018-07-07
這篇文章主要為大家介紹了Vue3從0搭建Monorepo項目組件庫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章給大家介紹了Vue.js 表單控件操作的相關(guān)知識，本文通過實例演示了input和textarea元素中使用v-model的方法，本文給大家介紹的非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03
在VUE項目中經(jīng)常會用到mapState和mapActions，mapState主要用于同步全局的變量或者對象，這篇文章主要介紹了VUE中的mapState和mapActions的使用,需要的朋友可以參考下2022-06-06
treeSelect樹組件設(shè)置父節(jié)點禁用的方法實例
這篇文章主要給大家介紹了關(guān)于treeSelect樹組件設(shè)置父節(jié)點禁用的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue--select組件的使用與禁用的實現(xiàn)代碼，非常不錯，具有參考借鑒價值 ,需要的朋友可以參考下2018-04-04
本篇文章主要介紹了Vue.js組件，組件系統(tǒng)是Vue.js其中一個重要的概念，具有一定的參考價值，有需要的可以了解一下。2016-12-12
v-for指令是在模板編譯的代碼生成階段實現(xiàn)的，當(dāng)遍歷數(shù)組或?qū)ο髸r需要使用列表渲染指令v-for。本文主要為大家介紹了v-for指令的基本用法，希望對大家有所幫助2023-04-04
wangEditor是一個輕量級web富文本編輯器,配置方便,使用簡單,下面這篇文章主要給大家介紹了關(guān)于vue中wangEditor5編輯器的基本使用,文中通過圖文以及實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
vue路由傳參的使用場景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時,攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue路由傳參的三種方式,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01