vue-cli3中怎么實(shí)現(xiàn)一個(gè)fullpage組件

本篇文章為大家展示了vue-cli3中怎么實(shí)現(xiàn)一個(gè)fullpage組件，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

準(zhǔn)備

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

通過(guò)查看vue-cli3官網(wǎng)了解，創(chuàng)建一個(gè)新的普通項(xiàng)目。

思考

一開(kāi)始要想別人如何調(diào)用我們寫(xiě)的組件，通過(guò)掛載vue實(shí)例方法（this.$alert）還是注冊(cè)組件。答案自然是后者。我們希望別人可以這么使用~

#一個(gè)section塊就是一個(gè)可以滾動(dòng)的塊
<v-fullpage>
 <div slot="section"></div>
 <div slot="section"></div>
</v-fullpage>

設(shè)計(jì)組件接口，prop。可以有滾動(dòng)方向（垂直還是橫向）

設(shè)計(jì)組件的回調(diào)（內(nèi)部需要暴露什么方法給外部）

希望可以主動(dòng)調(diào)用內(nèi)部方法，禁止/開(kāi)放滾動(dòng)事件

通過(guò) ref 調(diào)用組件內(nèi)部 api

目錄結(jié)構(gòu)

├─ dist     //打包
├─ public
├─ src
│ ├─ assets
│ ├─ components  //存放所有 custom elements
│   ├─ fullpage.vue //實(shí)際干活的
│ ├─ App.vue  //內(nèi)部demo，可以引進(jìn)來(lái)我們寫(xiě)的fullpage組件調(diào)試
│ └─ main.js  //入口文件

編寫(xiě)

我們?cè)趂ullpage.vue寫(xiě)邏輯，模板里需要有一個(gè)slot（放置別人的div），這個(gè)div需要有個(gè)滾動(dòng)盒子包裹（可以通過(guò)translate移動(dòng)）

<div class="v-fullpage-container" ref='v-fullpage'
@mousewheel='mouseWheelHandle'>
//監(jiān)聽(tīng)鼠標(biāo)滾輪事件
  <div class="v-slide-container" :class="direction" ref='v-slide-container' v-show='isShow'>
    <slot name='section'></slot> 
  </div>
</div>

先初始化容器寬度

//所有data
data(){
  return{
    fullpage:{
      //當(dāng)前處于第幾個(gè)div
      current:1,
      isScrolling: false,
      // 返回鼠標(biāo)滾輪的垂直滾動(dòng)量
      deltaY:0,
    },
    //顯示滾動(dòng)盒子
    isShow:false,
    //是否允許滾動(dòng)
    isAllowScroll:true,
    api:{
     setAllowScrolling:this.setAllowScrolling
    }
  }
},
mounted() {
  this.initFullPage()
  //窗口resize時(shí)候重新設(shè)計(jì)大小
  window.addEventListener('resize',this.resizeEventHandler)
},
beforeDestroy() {
  //組件銷(xiāo)毀的時(shí)候remove事件監(jiān)聽(tīng)
  window.removeEventListener("resize", this.resizeEventHandler, false);
},
methods:{
  resizeEventHandler(){
    //節(jié)流,考慮效率
    throttle(this.initFullPage(),300)
  },
  initFullPage(){
    //初始化容器寬高度
    this.isShow=false
    let height = this.$refs['v-fullpage'].clientHeight;
    let width=this.$refs['v-fullpage'].clientWidth;
    //手動(dòng)寫(xiě)容器的寬度
    this.direction=='horizontal'?this.$refs['v-slide-container'].style.width=`${width*this.$slots.section.length}px`:null;
    //手動(dòng)設(shè)置slots里面為section的樣式
    this.$slots.section.forEach((item)=>{
      item.elm.style.height=`${height}px`
      item.elm.style.width=`${width}px`
    })
    //顯示滾動(dòng)盒子
    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) {
      // 為了防止?jié)L動(dòng)多次滾動(dòng)，需要通過(guò)一個(gè)變量來(lái)控制是否滾動(dòng)
      this.fullpage.isScrolling = true;
      this.directToMove(index)
      this.$emit('leaveSlide',{currentIndex:this.fullpage.current})
      //這里的動(dòng)畫(huà)是1s執(zhí)行完，使用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 
     //判斷是垂直滾動(dòng)還是橫向滾動(dòng)
     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){//是否可以滾動(dòng)
       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
    },
}

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

打包

在package.json的scripts增加一個(gè)命令,然后執(zhí)行npm run build:lib

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

這樣我們就會(huì)打包到dist幾個(gè)文件，主要打包成了umd（瀏覽器可以引用）和commonjs模塊規(guī)范的包。
參考Vue Cli3 構(gòu)建目標(biāo)：庫(kù)

發(fā)布

pacakage.json發(fā)布到npm的字段

配置 package.json 文件中發(fā)布到 npm 的字段

name: 包名，該名字是唯一的。npm官網(wǎng)搜索一下有沒(méi)有,這里我們?nèi)-fullpage
version: 版本號(hào)，每次發(fā)布至 npm 需要修改版本號(hào)
description: 描述。
main: 入口文件，import/require的
keyword：關(guān)鍵字，以空格分離希望用戶最終搜索的詞。
author：作者
private：是否私有，需要修改為 false 才能發(fā)布到 npm

npm官網(wǎng)注冊(cè)npm賬號(hào)，有就不需要

回到我們的目錄下，npm login

發(fā)布，npm publish

需要等一下，npm官網(wǎng)搜索

使用

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>

上述內(nèi)容就是vue-cli3中怎么實(shí)現(xiàn)一個(gè)fullpage組件，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。