详解基于vue-cli3快速发布一个fullpage组件


Posted in Javascript onMarch 08, 2019

前言

想必大家都看过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 构建目标:库

详解基于vue-cli3快速发布一个fullpage组件

发布

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官网搜索

详解基于vue-cli3快速发布一个fullpage组件

使用

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
Firefox outerHTML实现代码
Jun 04 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
树结构之JavaScript
Jan 24 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 #Javascript
详解JavaScript 的变量
Mar 08 #Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 #Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 #Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 #Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 #Javascript
详解小程序循环require之坑
Mar 08 #Javascript
You might like
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
PHP微信红包API接口
2015/12/05 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
js类的静态属性和实例属性的理解
2009/10/01 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
详解React 元素渲染
2020/07/07 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
python连接mysql调用存储过程示例
2014/03/05 Python
python如何生成各种随机分布图
2018/08/27 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
python 如何快速复制序列
2020/09/07 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
网络工程师个人的自我评价范文
2013/10/01 职场文书
优秀交警事迹材料
2014/01/26 职场文书
行政专员的岗位职责
2014/03/10 职场文书
公司岗位说明书
2015/10/08 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS