前言

想必大家都看過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  },}