详解基于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 相关文章推荐
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
基于canvas实现手写签名(vue)
May 21 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
Vue 同步异步存值取值实现案例
Aug 05 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
自己做矿石收音机
2021/03/02 无线电
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
python运行时间的几种方法
2016/06/17 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
使用Python的turtle模块画国旗
2019/09/24 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
焊接专业毕业生求职信
2013/10/01 职场文书
中班中秋节活动反思
2014/02/18 职场文书
党性教育心得体会
2014/09/03 职场文书
培根随笔读书笔记
2015/07/01 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android