基於vue-cli3快速釋出一個fullpage元件

Yoki發表於2019-03-06
Vue元件

前言

想必大家都看過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。可以有滾動方向（垂直還是橫向）
Property Description Type Default
direction 滾動方向('vertical'或'horizontal') String 'vertical'
  • 設計元件的回撥（內部需要暴露什麼方法給外部）
Name Description
leaveSlide 滑動之後，引數是當前 index
  • 希望可以主動呼叫內部方法，禁止/開放滾動事件

通過 ref 呼叫元件內部 api

Name Description
setAllowScrolling 傳入 true/false，禁止滾動/開放滾動事件

目錄結構

├─ 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>
複製程式碼

先初始化容器寬度

//所有data
data(){
   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
       },
}
複製程式碼

寫到這裡基本就完成了，我們需要打包成別人可以用的。感謝vue-cli3，都封裝的非常好了。

打包

  • 在package.json的scripts增加一個命令,然後執行npm run build:lib
"scripts": {
   "build:lib": "vue-cli-service build --target lib --name v-fullpage ./src/components/index.js",
 },
複製程式碼

這樣我們就會打包到dist幾個檔案，主要打包成了umd（瀏覽器可以引用）和commonjs模組規範的包。 參考Vue Cli3 構建目標：庫

基於vue-cli3快速釋出一個fullpage元件

釋出

  • pacakage.json釋出到npm的欄位
配置 package.json 檔案中釋出到 npm 的欄位

name: 包名，該名字是唯一的。npm官網搜尋一下有沒有,這裡我們取v-fullpage
version: 版本號，每次釋出至 npm 需要修改版本號
description: 描述。
main: 入口檔案，import/require的
keyword：關鍵字，以空格分離希望使用者最終搜尋的詞。
author：作者
private：是否私有，需要修改為 false 才能釋出到 npm
複製程式碼
  • npm官網註冊npm賬號，有就不需要
  • 回到我們的目錄下，npm login
  • 釋出，npm publish
  • 需要等一下，npm官網搜尋

基於vue-cli3快速釋出一個fullpage元件

使用

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

Vue.use(fullpage);
複製程式碼

or

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

複製程式碼

相關文章