동기

만들지 않았기 때문에가상 사용자 정의 명령 도전해보세요

어렵게 하면 TypeScript

로

어렵게 하면 유형은 안전하다(하지만 최고

힘들게 하면 npm에서 공개

만든 물건

Vue Intersect Directive ( NPM / GitHub )
브라우저의 뷰포트에 요소(어셈블리)가 있는지 확인하고 이 정보에 따라 스타일을 적용하거나 콜백 함수를 호출합니다.그것은 점성 실현에 도움이 될 수 있다.

<div v-intersect="{ true: ['visible'] }">Hello</div>

프레젠테이션

Vue.directive 인터페이스 확인

사용Vue.directive API, Vue.directive('vue-intersect', IntersectDirective)처럼 호출할 수 있는 형식을 목표로 한다.
일단 Vue.dierective API의 유형 정의를 확인합니다.
node_modules/vue/types/vue.d.ts

directive(
  id: string,
  definition?: DirectiveOptions | DirectiveFunction
): DirectiveOptions;

node_modules/vue/types/options.d.ts

export interface DirectiveOptions {
  bind?: DirectiveFunction;
  inserted?: DirectiveFunction;
  update?: DirectiveFunction;
  componentUpdated?: DirectiveFunction;
  unbind?: DirectiveFunction;
}

export type DirectiveFunction = (
  el: HTMLElement,
  binding: DirectiveBinding,
  vnode: VNode,
  oldVnode: VNode
) => void;

사용자 정의 명령 개발

이번에는 요소가 뷰포트에 존재하는지 판별하기 위해 사용했다IntersectionObserver.
bind 갈고리 함수에서 IntersectionObserver를 생성하고 원소를 감시하는 기능도 있는 것 같지만 unbind 갈고리에서 IntersectionObserver 감시를 끝내는 실현도 준비되어 있다.
대체적인 틀은 다음과 같다.
저는 디테일한 것을 좋아하지 않기 때문에 관심 있는 유형은 GitHub의 출처를 보십시오.
src/intersect-directive.ts

import { DirectiveOptions, DirectiveFunction, VNode } from 'vue'
import { DirectiveBinding } from 'vue/types/options'

/**
 *
 */
const bind: DirectiveFunction = (el: HTMLElement, binding: DirectiveBinding, vnode: VNode, oldVnode: VNode) => {
  // 具体的な実装
}

/**
 *
 */
const unbind: DirectiveFunction = (el: HTMLElement, binding: DirectiveBinding, vnode: VNode, oldVnode: VNode) => {
  // 具体的な実装
}

/**
 *
 */
const IntersectDirective: DirectiveOptions = {
  bind,
  unbind,
}

export default IntersectDirective

플러그인화

그리고 사용Vue.use API, Vue.use(VueIntersect)도 사용할 수 있습니다. 하지만 솔직히 말하면 이곳의 모델이 이렇게 정확한지 모르겠습니다...
Vue가 아니라 _Vue 참조라고 쓰여 있는 것도 있지만사이트 의도는 잘 모르겠어요.
src/index.ts

import IntersectDirective from './intersect-directive'
import Vue, { PluginObject, PluginFunction } from 'vue'

// window.Vue を TS に認識してもらってます。
declare global {
  interface Window {
    Vue: Vue | undefined
  }
}

const install: PluginFunction<never> = () => {
  Vue.directive('intersect', IntersectDirective)
}

const VueIntersect: PluginObject<never> = {
  install,
}

// import ではなく、<script> タグの読み込みの場合の処理です。
if (window.Vue) {
  Vue.use(VueIntersect.install)
}

export { IntersectDirective } // IntersectDirective をエクスポート 
export default VueIntersect   // PluginFunction をデフォルトエクスポート

경품(NPM에 공개될 때까지)

사용자 정의 지령 개발보다 이 절차에 따라 조사를 하기 때문에 적어야 한다.

모듈 형식 정보

배포할 모듈은 UMD, ESM, 브라우저 세 개(iife)를 컴파일한 RollupJS입니다.
각각구성 파일 준비, 브라우저 버전 패키지에 미니 파일 처리가 추가되었습니다.

유형 스크립트의 유형 정의 파일 내보내기

*.d.ts의 내보내기는 tsconfig.json에서 declaration (와declarationDir 속성을 설정하면 되지만 이번에는 Rollup이 묶는 데 미친 영향인지 구축 처리에서 출력 형식 정의 파일이 없습니다.
어쩔 수 없어, 패키지.json 구축 형식 정의 파일에 대한 명령을 준비했습니다.

"build:dts": "tsc src/index.ts -d --emitDeclarationOnly --declarationDir dist/types"

여기서 마치겠습니다.