详解基于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。可以有滚动方向(垂直还是横向)
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 构建目标:库
发布
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官网搜索
使用
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。