preface

You’ve all seen fullpage.js — it’s a great page-turning plugin.

Now that VUE is very popular, would you like to release a component for others to use?

Here we based on vuE-CLI3 quickly build a simple fullpage component for others to use, of course you can also do you interested in the component published to others

GITHUB

link

start

To prepare

$ npm i -g @vue/cli # global vue - cli3
Copy the code

Check the VUE-CLI3 website to find out how to create a new generic project.

thinking

  • The first step is to figure out how others will call the component we wrote, either by mounting the vue instance method (this.$alert) or registering the component. The answer, of course, is the latter. We want others to use it this way
A section block is a block that can be scrolled<v-fullpage>
 <div slot="section"></div>
 <div slot="section"></div>
</v-fullpage>
Copy the code
  • Design component interface, Prop. Can have a rolling direction (vertical or horizontal)
Property Description Type Default
direction Rolling direction (‘vertical’ or ‘horizontal’) String ‘vertical’
  • Design component callbacks (what methods need to be exposed internally to the outside)
Name Description
leaveSlide After sliding, the argument is the current index
  • You want to proactively call internal methods to disable/enable rolling events

Call the component’s internal API through ref

Name Description
setAllowScrolling Pass true/false to disallow scrolling/enable scrolling events

The directory structure

├─ Public ├─ SRC │ ├─ Assets │ ├─ Components │ ├─ Vue │ ├─ vue │ ├ ─ main.js │ ├ ─ main.js //Copy the code

write

We’ll write the logic in fullpage.vue. We’ll need a slot in the template. This div will need a scroll box wrapped around it.

<div class="v-fullpage-container" ref='v-fullpage'
@mousewheel='mouseWheelHandle'>// Listen for mouse wheel events<div class="v-slide-container" :class="direction" ref='v-slide-container' v-show='isShow'>
       <slot name='section'></slot>  
   </div>
</div>
Copy the code

Initialize the container width first

/ / all the data
data(){
   return{
       fullpage: {// Which div is currently in
           current:1.isScrolling: false.// Returns the vertical scrolling of the mouse wheel
           deltaY:0,},// Displays scroll boxes
       isShow:false.// Whether scrolling is allowed
       isAllowScroll:true.api: {setAllowScrolling:this.setAllowScrolling
       }
   }
},
mounted() {
   this.initFullPage()
   // Resize the window
   window.addEventListener('resize'.this.resizeEventHandler)
},
beforeDestroy() {
   // The remove event listens when the component is destroyed
   window.removeEventListener("resize".this.resizeEventHandler, false);
},
methods:{
   resizeEventHandler(){
       // Throttling, consider efficiency
       throttle(this.initFullPage(),300)
   },
   initFullPage(){
       // Initialize the container width height
       this.isShow=false
       let height = this.$refs['v-fullpage'].clientHeight;
       let width=this.$refs['v-fullpage'].clientWidth;
       // Write the container width manually
       this.direction=='horizontal'?this.$refs['v-slide-container'].style.width=`${width*this.$slots.section.length}px`:null;
       // Manually set the styles of sections in slots
       this.$slots.section.forEach((item) = >{
           item.elm.style.height=`${height}px`
           item.elm.style.width=`${width}px`
       })
       // Displays scroll boxes
       this.isShow=true}},Copy the code

Wheel events

methods:{
    next() {
           let len = this.$slots.section.length;
           if((this.fullpage.current + 1) <= len) { this.fullpage.current += 1; this.move(this.fullpage.current); }},pre() {
           if(this.fullpage.current -1 > 0) { this.fullpage.current -= 1; this.move(this.fullpage.current); }}, a move (index) {/ / in order to prevent rolling rolling for many times, need to pass a variable to control whether the scroll enclosing fullpage. IsScrolling =true;
           this.directToMove(index)
           this.$emit('leaveSlide', {currentIndex: this. Fullpage. Current}) / / the animation here is 1 s performed, usesetTimeout The account will be unlocked after 1ssetTimeout(()=>{
               this.fullpage.isScrolling = false;
           }, 1010);
       },
       directToMove(index){
         let height = this.$refs['v-fullpage'].clientHeight;
         let width=this.$refs['v-fullpage'].clientWidth;
         let $scroll = this.$refs['v-slide-container']; // What is the displacementletDisplacement // Determine whether to scroll vertically or horizontallyif(this.direction=='vertical'){
           displacement = -(index-1)*height + 'px';
           $scroll.style.transform=`translateY(${displacement})`
         }else{
           displacement = -(index-1)*width + 'px';
           $scroll.style.transform=`translateX(${displacement})`
         }
         this.fullpage.current = index
       },
       mouseWheelHandle (event) {
           if(! This. isAllowScroll){// Whether to scrollreturn
           }
           if(this. Fullpage. IsScrolling) {/ / lock partsreturn false;
           }
           let e = event.originalEvent || event;
           this.fullpage.deltaY = e.deltaY;
           if (this.fullpage.deltaY > 0) {
               this.next();
           } else if(this.fullpage.deltaY < 0) { this.pre(); }},setAllowScrolling(isAllow){
         this.isAllowScroll=isAllow
       },
}
Copy the code

So that’s pretty much it, we need to pack it into something that someone else can use. Thanks to VUE-CLI3, it’s all packaged very well.

packaging

  • Add a command to the package.json scripts and run NPM run build:lib
"scripts": {
   "build:lib": "vue-cli-service build --target lib --name v-fullpage ./src/components/index.js",},Copy the code

We then packaged several files into dist, mainly umD (which browsers can reference) and commonJS module specifications. Reference Vue Cli3 build target: library

release

  • Pacakage. json published to the NPM field
Configure the package.json file to publish to NPM field name: package name, which is unique. Here we take v-fullpage version: version number, each time published to NPM needs to change the version number description: description. Main: the entry file, import/require keyword, separated by Spaces from the final word that you want the user to search for. Author: author private: Indicates whether the parameter is private. You need to change it tofalseBefore publishing to NPMCopy the code
  • NPM official website register NPM account, there is no need
  • Let’s go back to our directory, NPM login
  • Publish, NPM publish
  • Need to wait, NPM official website search

use

import Vue from "vue";
import fullpage from "v-fullpage";

Vue.use(fullpage);
Copy the code

or

<script src="vue.min.js"></script>
<! -- must place this line after vue.js -->
<script src="v-fullpage.umd.min.js"></script>

Copy the code