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