无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 行业新闻 >

微信免费小程序_详解基于vue

时间:2021-01-07 15:16来源:微信免费小程序 作者:jianzhan 点击:
详细说明根据vue-cli3迅速公布一个fullpage部件 本文关键详细介绍了详细说明根据vue-cli3迅速公布一个fullpage部件,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。一起追
详解基于vue-cli3快速发布一个fullpage组件       这篇文章主要介绍了详解基于vue-cli3快速发布一个fullpage组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

想必大家都看过——这是一款非常好用的翻页插件。

现在vue非常流行,大家想不想发布一个组件给别人使用呢?

这里我们基于快速搭建一个简单的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。可以有滚动方向(垂直还是横向)


│ ├─ fullpage.vue //实际干活的 │ ├─ App.vue //内部demo,可以引进来我们写的fullpage组件调试 │ └─ main.js //入口文件

编写

我们在fullpage.vue写逻辑,模板里需要有一个slot(放置别人的div),这个div需要有个滚动盒子包裹(可以通过translate移动)

 div ref='v-fullpage'
@mousewheel='mouseWheelHandle' 
//监听鼠标滚轮事件
 div : 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 ./ponents/index.js",

这样我们就会打包到dist几个文件,主要打包成了umd(浏览器可以引用)和commonjs模块规范的包。
参考

发布

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官网搜索

使用

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 

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


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信