Быстро опубликуйте полностраничный компонент на основе vue-cli3.

Vue.js

предисловие

Все, должно быть, видели этоfullpage.js- Это очень полезный плагин для перелистывания страниц.

Vue сейчас очень популярен, вы хотите опубликовать компонент для использования другими?

Здесь мы опираемсяvue-cli3Быстро создайте простой полностраничный компонент для использования другими, конечно, вы также можете создавать интересующие вас компоненты и публиковать их для использования другими ~

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>
  • Интерфейс компонента дизайна, проп. Может иметь направление прокрутки (вертикальное или альбомное)
Property Description Type Default
direction направление прокрутки («вертикальное» или «горизонтальное») String 'vertical'
  • Спроектируйте обратный вызов компонента (какие методы должны быть открыты внутри снаружи)
Name Description
leaveSlide После скольжения параметр является текущим индексом
  • Есть надежда, что внутренний метод можно будет активно вызывать, чтобы запретить/открыть событие прокрутки.

Вызов внутреннего API компонента через ref

Name Description
setAllowScrolling Передайте true/false, чтобы отключить прокрутку/открыть события прокрутки.

Структура каталогов

├─ dist         //打包
├─ public
├─ src
│  ├─ assets
│  ├─ components    //存放所有 custom elements
│     ├─ fullpage.vue  //实际干活的
│  ├─ App.vue    //内部demo，可以引进来我们写的fullpage组件调试
│  └─ main.js    //入口文件

записывать

Пишем логику в fullpage.vue, в шаблоне должен быть слот (где размещаются чужие дивы), и этот див нужно оборачивать в скроллбокс (который можно двигать через транслейт)

<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 и выполните 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: библиотека

выпускать

  • поле package.json, опубликованное в npm
配置 package.json 文件中发布到 npm 的字段

name: 包名，该名字是唯一的。npm官网搜索一下有没有,这里我们取v-fullpage
version: 版本号，每次发布至 npm 需要修改版本号
description: 描述。
main: 入口文件，import/require的
keyword：关键字，以空格分离希望用户最终搜索的词。
author：作者
private：是否私有，需要修改为 false 才能发布到 npm
  • Зарегистрируйте учетную запись npm на официальном сайте npm, она вам не нужна.
  • Возвращаемся в наш каталог, логин npm
  • публиковать, публиковать npm
  • Нужно немного подождать, поиск по официальному сайту 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>
Категории