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

前言

想必大家都看过fullpage.js——这是一款非常好用的翻页插件。

现在vue非常流行，大家想不想发布一个组件给别人使用呢？

这里我们基于vue-cli3快速搭建一个简单的fullpage组件给别人使用，当然你也可以做你感兴趣的组件发布给别人用~

GITHUB

链接

开始

准备

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

通过查看vue-cli3官网了解，创建一个新的普通项目。

思考

一开始要想别人如何调用我们写的组件，通过挂载vue实例方法（this.$alert）还是注册组件。答案自然是后者。我们希望别人可以这么使用~

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

设计组件接口，prop。可以有滚动方向（垂直还是横向）

设计组件的回调（内部需要暴露什么方法给外部）

希望可以主动调用内部方法，禁止/开放滚动事件

通过 ref 调用组件内部 api

目录结构

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

编写

我们在fullpage.vue写逻辑，模板里需要有一个slot（放置别人的div），这个div需要有个滚动盒子包裹（可以通过translate移动）

<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  },}