详解基于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 相关文章推荐
jquery text()要注意啦
Oct 30 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
javascript对象的相关操作小结
May 16 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
express.js中间件说明详解
Mar 19 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 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代码
2016/10/08 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
js 学习笔记(三)
2009/12/29 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
python动态加载变量示例分享
2014/02/17 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
python中p-value的实现方式
2019/12/16 Python
python基于event实现线程间通信控制
2020/01/13 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
小学音乐教学反思
2014/02/05 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
爱的教育读书笔记
2015/06/26 职场文书
sass 常用备忘案例详解
2021/09/15 HTML / CSS