详解基于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 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
关于js类的定义
Jun 28 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
js分页代码分享
Apr 28 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
vue实现打地鼠小游戏
Aug 21 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实现的发送带附件邮件类实例
2014/09/22 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
python中正则表达式的使用详解
2014/10/17 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
Django保护敏感信息的方法示例
2019/05/09 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
给校长的建议书300字
2014/05/16 职场文书
食品工程专业求职信
2014/06/15 职场文书
大学生学年个人总结
2015/02/15 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫