JSPM – vue3-observer@0.1.0

Package Exports

vue3-observer

Readme

vue3-observer组件

介绍

vue3-observer组件基于自定义事件构建的一个事件触发器，通过某个元素在可见视窗范围的关系触发某个事件。

使用简介

1. 组件注册

对组件进行注册，并且可以传递配置内容，配置项包含：

字段	默认值	含义
eventEnterName	observerEnter	观察组件即将进入交叉视口时执行的自定义事件名称，当自定义事件名称冲突时，可更换为其他名称
eventLeaveName	observerLeave	观察组件即将离开交叉视口时执行的自定义事件名称，当自定义事件名称冲突时，可更换为其他名称
loadingComponent	-	默认展示的占位DOM样式，一般是用一个包含加载中文字的视窗高度的80%的div元素

注册组件：

import App from './App.vue'
// 引入交叉视口观察插件
import { intersection } from 'vue3-observer'

const app = createApp(App)
app.use(intersection)

2. 使用方式

注意，组件是监听DOM与视口的交叉情况，所以在观察某个DOM节点时，必须满足：

让该节点存在于DOM树中；
该节点必须属于观察视口的子DOM。

3. 方法介绍

注意：使用观察组件组件前，请注册插件

on 对某个节点添加观察

import { useIntersection } from 'vue3-observer'

// useIntersection().on(target, function() {})
const { on } = useIntersection()
on(target, listener)

target 需要观察的目标节点 listener 满足条件时的监听事件或者事件配置对象，监听事件会在即将准备进入和即将完全离开时触发。

事件配置对象包含：

enter 即将准备进入的触发的事件
leave 即将完全离开时触发的事件

回调参数：

自定义事件，其中的detail对象指向为交叉视口触发时的详细信息注：使用on绑定的观察元素，请在组件卸载时移除观察，详情见```off``方法

示例：

import { getCurrentInstance, onMounted } from 'vue'
import { useIntersection } from 'vue3-observer'

setup() {
  const _this = getCurrentInstance()
  const cell = ref(null)
  const { on } = useIntersection()
  function cellBack (e) {
    // todo...
  }
  onMounted(() => {
    cell.value = _this.proxy.$refs.cell
    on(cell.value, cellBack)
  })
}

once 对某个节点添加一次观察（即将进入视窗范围时），使用方式同 on

注意，事件是一次注册的，触发之后自动移除，无须手动移除观察

示例：

import { getCurrentInstance, onMounted } from 'vue'
import { useIntersection } from 'vue3-observer'

setup() {
  const _this = getCurrentInstance()
  const cell = ref(null)
  const { once } = useIntersection()
  function cellBack (e) {
    // todo...
  }
  onMounted(() => {
    cell.value = _this.proxy.$refs.cell
    once(cell.value, cellBack)
  })
}

off 对某个节点取消观察

示例：

import { getCurrentInstance, onMounted, onUnmounted } from 'vue'
import { useIntersection } from 'vue3-observer'

setup() {
  const _this = getCurrentInstance()
  const cell = ref(null)
  const { on } = useIntersection()
  function cellBack (e) {
    // todo...
  }
  onMounted(() => {
    cell.value = _this.proxy.$refs.cell
    on(cell.value, cellBack)
  })
  onUnmounted(() => {
    $observer.off(cell.value, cellBack)
  })
}

observe-component 观察组件

观察组件默认的内容会在即将被视图查看到时才会渲染，如果使用的是组件，组件也只会在这个时候才会渲染，当然，你也可以注册异步组件，来达到一种“触底”加载组件的既视感。在写组件模版时，也可以传递一个loading插槽内容，覆盖全局设置的loading内容，用以组件在没有渲染时的占位

<template>
  <!-- 直接使用观察组件包裹 -->
  <observe-component>
    <my-component />
  </observe-component>
  <observe-component>
    <custom-component />
    <!-- 添加默认组件在没有显示前的内容样式 -->
    <template v-slot:loading>
      <div class="loading">loading...</div>
    </template>
  </observe-component>
</template>

<script>
import { defineAsyncComponent } from 'vue'
import MyComponent from './component/MyComponent'

export default {
  components: {
    MyComponent,
    CustomComponent: defineAsyncComponent({
      loader: () => import('./src/CustomComponent.vue')
    })
  }
}
</script>