详解基于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中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
Vuex提升学习篇
Jan 11 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
vue+express+jwt持久化登录的方法
Jun 14 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
jquery 选项卡效果 新手代码
2011/07/08 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
bootstrap table小案例
2016/10/21 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
详解Python使用tensorflow入门指南
2018/02/09 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
利用python实现AR教程
2019/11/20 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
Python无损压缩图片的示例代码
2020/08/06 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
某同学的自我鉴定范文
2013/12/26 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS