精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
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，都封装的非常好了。
打包
在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
上述内容就是vue-cli3中怎么实现一个fullpage组件，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
本文名称：vue-cli3中怎么实现一个fullpage组件
网站URL：http://www.cdkjz.cn/article/ghoodh.html
