详解基于vue-cli3快速发布一个fullpage组件

$ npm i -g @vue/cli #全局vue-cli3

#一个section块就是一个可以滚动的块<v-fullpage> <div slot="section"></div> <div slot="section"></div></v-fullpage>

├─ dist     //打包├─ public├─ src│ ├─ assets│ ├─ components  //存放所有 custom elements│   ├─ fullpage.vue //实际干活的│ ├─ App.vue  //内部demo，可以引进来我们写的fullpage组件调试│ └─ main.js  //入口文件

<div class="v-fullpage-container" ref='v-fullpage'@mousewheel='mouseWheelHandle'>//监听鼠标滚轮事件  <div class="v-slide-container" :class="direction" ref='v-slide-container' v-show='isShow'>    <slot name='section'></slot>   </div></div>

//所有datadata(){  return{    fullpage:{      //当前处于第几个div      current:1,      isScrolling: false,      // 返回鼠标滚轮的垂直滚动量      deltaY:0,    },    //显示滚动盒子    isShow:false,    //是否允许滚动    isAllowScroll:true,    api:{     setAllowScrolling:this.setAllowScrolling    }  }},mounted() {  this.initFullPage()  //窗口resize时候重新设计大小  window.addEventListener('resize',this.resizeEventHandler)},beforeDestroy() {  //组件销毁的时候remove事件监听  window.removeEventListener("resize", this.resizeEventHandler, false);},methods:{  resizeEventHandler(){    //节流,考虑效率    throttle(this.initFullPage(),300)  },  initFullPage(){    //初始化容器宽高度    this.isShow=false    let height = this.$refs['v-fullpage'].clientHeight;    let width=this.$refs['v-fullpage'].clientWidth;    //手动写容器的宽度    this.direction=='horizontal'?this.$refs['v-slide-container'].style.width=`${width*this.$slots.section.length}px`:null;    //手动设置slots里面为section的样式    this.$slots.section.forEach((item)=>{      item.elm.style.height=`${height}px`      item.elm.style.width=`${width}px`    })    //显示滚动盒子    this.isShow=true  },}

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);      }    },    move(index) {      // 为了防止滚动多次滚动，需要通过一个变量来控制是否滚动      this.fullpage.isScrolling = true;      this.directToMove(index)      this.$emit('leaveSlide',{currentIndex:this.fullpage.current})      //这里的动画是1s执行完，使用setTimeout延迟1s后解锁      setTimeout(()=>{        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'];     //位移多少     let displacement      //判断是垂直滚动还是横向滚动     if(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){//是否可以滚动       return      }      if (this.fullpage.isScrolling) {// 加锁部分        return 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    },}

"scripts": {  "build:lib": "vue-cli-service build --target lib --name v-fullpage ./src/components/index.js", },

import Vue from "vue";import fullpage from "v-fullpage";Vue.use(fullpage);

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