前言

大家一定都看过fullpage.js——，这是一个非常好用的翻页插件。

Vue现在很受欢迎。是否要释放一个组件供其他人使用？

在这里，我们快速构建了一个基于vue-cli3的简单的全页面组件，供其他人使用。当然也可以发布自己感兴趣的组件给别人使用~

开源代码库

环

开始

准备好

$ npm i -g @vue/cli # global vue-cli3查看vue-cli3官方网站，创建一个新的通用项目。

思考

首先，我们应该考虑其他人如何调用我们编写的组件，无论是通过挂载vue实例方法(这。$alert)或注册组件。答案自然是后者。希望别人也能这样用~

#一个节块是一个可滚动的块v-fullpage div槽=' section'/div div槽=' section'/div/v-fullpage设计组件接口，prop。可以有滚动方向(垂直或水平)

属性描述类型的回调默认方向滚动方向(“垂直”或“水平”)字符串“垂直”设计组件(应该从内到外公开什么方法)

“名称描述”离开幻灯片后，参数是当前索引希望主动调用内部方法并禁止/打开滚动事件

通过引用调用组件内部api

由name description setallowscrolling传入True/false，禁止滚动/打开滚动事件目录结构

演示//打包公共 src 资产 组件//存储所有自定义元素fullpage.vue//actually工作 App.vue /。

我们用fullpage.vue写逻辑，模板需要有一个槽(用来放别人的div)，这个div需要包装在一个滚动的盒子里(可以通过translate来移动)

div class=' v-full page-container ' ref=' v-full page ' @ mousewheel=' mouseWheelHandle '/Monitor鼠标轮事件div class=' v-slide-container ' : class=' direction ' ref=' v-slide-container ' v-show=' is show ' slot name=' section '/slot/div/div首先初始化容器宽度

//all data data(){ return { full page : {//哪个div current33601是scrolling3360 false，//返回鼠标滚轮的垂直滚动量deltaY:0，}，//显示滚动框isShow:false。//是否允许滚动isallowscroll: true，API : { setallowscrolling 3360 this。setallowscrolling}}}，Honded(){ this。initfull page()//调整窗口大小时，重新设计窗口大小。addeventlistener ('resize ')，这。resizeeventhandler)}，BeforeDestroy() {//组件被销毁时，removeeventlistener事件监听window . removeeventlistener(' resize '，this.resizeeventhandler，false)；}，方法： { resize event handler(){//throttle，考虑效率throttle(这个。init fullpage()，300)}，init full page(){//初始化容器宽度和高度这个。isshow=false让height=this。$ refs ['v-fullpage'].让宽度=这个。$refs['v-fullpage']。clientWidth//手动写入容器的宽度。this.direction=='水平'？这个。$ refs[' v-slide-container ']. style . width=` $ { width * this。$ slots . section . length } px ` : null；//手动设置槽中截面的样式。这个。$ slots . section . foreach((item)={ item . elm . style . height=` $ { height } px ` item . elm . style . width=` $ { width } px `})//显示滚动框this。isshow=

methods : { next()}让len=这个.$插槽。部分。长度；如果((这个。整页。current 1)=len){ this。整页。电流=1；这个。移动(这个。整页。电流)；} }，pre(){ if(this。整页。current-1 0){ this。整页。电流-=1；这个。移动(这个。整页。电流)；} },移动（索引){ //为了防止滚动多次滚动，需要通过一个变量来控制是否滚动这个。整页。crolling=truethis.directToMove(索引)此$emit('leaveSlide '，{ current exx : this。整页。当前})//这里的动画是1s执行完，使用定时器延迟1s后解锁setTimeout(()={ this。整页。isscrolling=false}, 1010);}，directToMove(索引){ 0让高度=这个.$refs['v-fullpage'].客户端高度让宽度=这个$refs['v-fullpage'].clientWidth让$scroll=这个$ refs[' v-slide-container ']；//位移多少让位移/判断是垂直滚动还是横向滚动if(this.direction=='垂直){位移=-(索引-1)*高度' px '；$卷轴。风格。transform=` translatey($ { displacement })` } else { displacement=-(index-1)* width ' px '；$卷轴。风格。transform=` translatex($ { displacement })` } this。整页。current=index }，mouseWheelHandle(事件){ if(！这个。isallowsol){//是否可以滚动return } if(这个。整页。is crolling){//加锁部分返回false}让e=event . originalevent | | event this。整页。Y=e .Y；如果(这个。整页。deltaY 0){这。next()；} else if(这个。整页。deltaY 0){这。pre()；} }，setAllowScrolling(ISallow){ this。ISallowscroll=ISallow }，}写到这里基本就完成了，我们需要打包成别人可以用的。感谢vue-cli3，都封装的非常好了。

打包

在package.json的剧本增加一个命令，然后执行新公共管理运行构建：lib

脚本： { ' build : lib ' : ' vue-CLI-服务构建-目标lib-name v-完整页面./src/components/index.js '，}，这样我们就会打包到距离几个文件，主要打包成了umd(浏览器可以引用)和模块模块规范的包。参考Vue Cli3构建目标：库

发布

pacakage.json发布到新公共管理的字段

配置package.json文件中发布到新公共管理的字段

名称：包名，该名字是唯一的国家预防机制。官网搜索一下有没有，这里我们取v-fullpageversion:版本号，每次发布至新公共管理需要修改版本号描述：描述main:入口文件，导入/要求的关键词：关键字，以空格分离希望用户最终搜索的词作者：作者私人：是否私有，需要修改为错误的才能发布到新公共管理

新公共管理官网注册新公共管理账号，有就不需要

回到我们的目录下国家预防机制登录

发布国家预防机制发布

需要等一下国家预防机制官网搜索

使用

从“Vue”导入Vue从" v-整页"导入整页；Vue.use(整页);或者

脚本src=' http : vue。量滴js '/脚本！-必须将此行放在vue。js-script src=' http :v-整页。UMD。量滴js '/脚本之后以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。