当前位置:首页 > 编程教程 > vue技术文章 > 详解基于vue-cli3快速发布一个fullpage组件

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

  • 发布时间:
  • 作者:码农之家
  • 点击:196

这篇文章主要知识点是关于vue-cli3、fullpage、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Spring Boot+Vue全栈开发实战
  • 类型:Spring大小:196.3 MB格式:PDF作者:王松
立即下载

Tags:vue-cli3 fullpage 

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

前言

想必大家都看过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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 揭秘vue-cli3全面配置
  • vue-cli3 相关电子书
    学习笔记
    网友NO.800723

    在vue-cli的组件模板里使用font-awesome的两种方法

    方法一: npm install font-awesome 在main.js里添加import 'font-awesome/css/font-awesome.css' 方法二: 在 官网 下载代码到本地,现在应该是font-awesome-4.7,把整个文件夹放到static文件夹中,然后在index.html中加上link rel="stylesheet" href="/static/font-awesome-4.7/css/font-awesome.min.css" rel="external nofollow" ,应该就可以了。 使用方法:i class="fa fa-home fa-lg" 主页/i 以上这篇在vue-cli的组件模板里使用font-awesome的两种方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

    网友NO.176046

    详解vue-router和vue-cli以及组件之间的传值

    首先简单介绍使用vue-router的四个基本步骤:(为了方便演示,所有代码都写在一个文件里) 1.定义组件 2.定义路由 3.创建router实例并将定义好的路由传入 4.创建和挂载根实例 再来说一下vue-cli 一、安装vue-cli脚手架工具 cnpm install vue-cli -g 二、 创建项目 vue init webpack-simple vue_webpack 使用的是webpack-simple模板,项目名为vue_webpack , webpack-simple和webpack模板区别就是少了代码检查和单元测试这些东西. 三、安装项目需要的依赖文件 进入vue_webpack项目文件夹 cnpm install 安装完成后 项目目录下会多出node_modules文件夹,所有依赖文件都在里面,现在可以测试项目是否创建成功: npm run dev ,默认8080端口,需要修改可以到 package.json中在scripts的dev后面添加--port8000。 App.vue后缀为.vue的文件基本格式为:template + script + style 三部分组成 四、项目上线 自己的项目文件都需要放到……

    网友NO.240133

    详解Vue-cli 创建的项目如何跨域请求

    问题描述: 使用 Vue-cli 创建的项目,开发地址是 localhost:8023,需要访问 localhost:9000 上的接口 分析原因: 不同域名之间的访问,需要跨域才能正确请求。跨域的方法很多,通常都需要后台配置 不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,实现跨域请求 解决方案: 接口地址原本为 /form/save,但是为了匹配代理地址,在前面加一个 /api 如果使用了 axios,可以全局配置一个 baseURL,这样就不用挨个儿修改 url 了 axios.defaults.baseURL = '/api' 在 configindex.js 的 dev 中添加配置项 proxyTable: proxyTable: { '/api': { target: 'http://127.0.0.1:9000/', changeOrigin: true, pathRewrite: { '^/api': '/' } } }, 其中 '/api' 为匹配项,target 为被请求的地址 因为在 ajax 的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的 所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/' 如果本身的……

    网友NO.991855

    vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

    项目结构,在组件文件夹(components)下新建common文件夹,所用公用组件放里面,本例包含tips和loading两个 一、loading组件 1.loading.vue组件内容如下: 代码: template div class="loading" v-show="loading" img src="./loading.gif" /div /template script export default { name: 'loading', data() { return { loading: false } }, created() { var that = this; this.bus.$on('loading', function (data) { that.loading = !!data; }) } } /script style scoped lang="scss" .loading{ display: flex; justify-content: center; flex-direction: column; align-items: center; position: fixed; left: 0; top: 0; z-index: 999; width: 100 %; height: 100 %; color: #fff; background - color: rgba(0, 0, 0, 0.8); p { padding: .15rem .15rem .2rem; color: #fff; font-size: .16rem; } img { width: .4rem; height: .4rem; } } /style 2.app.vue中设置 template div id="app" router-view/ loading/loading /div/templatescript import tips from '@/components/common/tips' import loading from '@/compon……

    <
    1
    >

    电子书 编程教程 PC软件下载 安卓软件下载

    Copyright 2018-2020 xz577.com 码农之家

    本站所有电子书资源不再提供下载地址,只分享来路

    免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

    版权投诉 / 书籍推广 / 赞助:QQ:520161757