preface

When developing a project using VUE, it is common to consider custom instructions for low-level manipulation of common DOM elements. But, for those of you who haven’t used this amazing and easy feature yet, here’s a simple example: Go back to the top, to help you quickly learn.

Note: If you haven’t learned about custom commands, be sure to go to the official website first.

case

Function is introduced

Click to go back to the top and buttons can be shown or hidden.

parameter

parameter instructions type value
id Add an ID to the parent element (note: fixed height and scrollable content) to partially return to the top String optional
num Offset distance value, used to show or hide Number Will choose

use

Mode one whole scroll

<div v-backtop="100"> at the top of the1 </div>
Copy the code

Mode two: local roll

<div v-backtop:wu="50"> at the top of the2 </div>
Copy the code

The source code

vbacktop.js

Define the instruction function. For ease of management, a module is a file that defines only one instruction.

export default {
  mounted(el, binding) {
    const ele = document.getElementById(binding.arg);
    const target = ele || window;
    const type = ele ? 1 : 2;

    // Click listen
    el.addEventListener('click'.() = > {
      if (ele) {
        smooth(target);
      } else {
        target.scrollTo({
          top: 0.behavior: 'smooth'}); }});// Scroll listener
    target.addEventListener('scroll'.(e) = > {
      const doc = type === 1 ? (e.target || e.srcElement) : 
            (e.target.documentElement || e.srcElement.documentElement);
      
      if (doc.scrollTop > binding.value) {
        el.style.visibility = 'unset';
      } else {
        el.style.visibility = 'hidden'; }}); el.style.visibility ='hidden'; // Hide by default
  },
  unmounted(el, binding) {
    const target = binding.arg ? document.getElementById(binding.arg) : window;
    target.removeEventListener('scroll');
    el.removeEventListener('click'); }}// Smooth movement, the values inside can be passed in as parameters. I'm going to write it as a fixed value.
function smooth(ele) {
  let distance = ele.scrollTop;
  const step = (distance / 300) * 10;
  const timer = setInterval(() = > {
    distance = distance - step;
    if (distance <= 0) {
      clearInterval(timer);
      ele.scrollTop = 0;
      return false;
    }
    ele.scrollTop = distance;
  }, 10);
}
Copy the code

index.js

Registration instructions

import backtop from './vbacktop' // Import instruction

const directives = { // The instruction object
    backtop
}

export default {
    install(app) {
      Object.keys(directives).forEach((key) = >{ app.directive(key, directives[key]) }); }}Copy the code

main.js

Import and call. Note that VUe3.0 has some changes compared to 2.0. If not, check the official documentation.

import { createApp } from 'vue';
import App from './App.vue';
import directives from './directives/index';

const app = createApp(App);
app.use(directives) // Invoke the install directive

app.mount('#app');
Copy the code

Use instruction

show

Scroll through the document

Scroll through the contents of the parent element (parent must have a fixed height)