vue-cli3中怎么实现一个fullpage组件

本篇文章为大家展示了vue-cli3中怎么实现一个fullpage组件，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联公司长期为近千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为广昌企业提供专业的成都网站设计、网站建设，广昌网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

准备

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

通过查看vue-cli3官网了解，创建一个新的普通项目。

思考

一开始要想别人如何调用我们写的组件，通过挂载vue实例方法（this.$alert）还是注册组件。答案自然是后者。我们希望别人可以这么使用~

#一个section块就是一个可以滚动的块

设计组件接口，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移动）


//监听鼠标滚轮事件

//所有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，都封装的非常好了。

这样我们就会打包到dist几个文件，主要打包成了umd（浏览器可以引用）和commonjs模块规范的包。
参考Vue Cli3 构建目标：库

上述内容就是vue-cli3中怎么实现一个fullpage组件，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

重庆分公司，新征程启航

vue-cli3中怎么实现一个fullpage组件

其他资讯