Intégrer dans Vue

Si vous cherchez à utiliser des composants Vue comme composants personnalisés, consultez cette section.

Avant d’intégrer Univer dans un projet Vue, consultez l’installation et les premiers pas et familiarisez-vous avec les composants Vue et leurs hooks de cycle de vie.

Vue 3.x

Remarques avant l’intégration

Évitez de créer des proxys pour les instances Univer et FUniver, car cela peut entraîner des erreurs imprévisibles ou des problèmes de performances.

Étapes d’intégration

Initialisez Univer dans le hook onMounted
Détruisez Univer dans le hook onBeforeUnmount

Exemple

Vue

<script lang="ts" setup>import type { Univer } from '@univerjs/presets'import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import { onBeforeUnmount, onMounted, ref } from 'vue'import '@univerjs/preset-docs-core/lib/index.css'const container = ref<HTMLElement | null>(null)let univerInstance: Univer | null = nullonMounted(() => {  const { univer, univerAPI } = createUniver({    locale: LocaleType.EN_US,    locales: {      [LocaleType.EN_US]: mergeLocales(        UniverPresetDocsCoreEnUS,      ),    },    presets: [      UniverDocsCorePreset({        container: container.value as HTMLElement,      }),    ],  })  univerAPI.createDocument({})  univerInstance = univer})onBeforeUnmount(() => {  univerInstance?.dispose()  univerInstance = null})</script><template>  <div ref="container" style="height: 600px" /></template>

Vue 2.x

Remarques avant l’intégration

Lorsque vous installez @univerjs/presets avec pnpm, vous devrez peut-être installer manuellement react et react-dom.
Si l’avertissement « ResizeObserver loop limit exceeded » s’affiche dans l’environnement de développement, vous pouvez l’ignorer ou utiliser l’extrait de code ci-dessous pour le résoudre :

TypeScript

if (process.env.NODE_ENV === 'development') {  const _ResizeObserver = window.ResizeObserver  function debounce(fn, delay) {    let timer = null    return function () {      if (timer) {        clearTimeout(timer)      }      timer = setTimeout(() => {        fn.apply(this, arguments)      }, delay)    }  }  window.ResizeObserver = class ResizeObserver extends _ResizeObserver {    constructor(callback) {      callback = debounce(callback, 50)      super(callback)    }  }}

Étapes d’intégration

Initialisez Univer dans le hook mounted
Détruisez Univer dans le hook beforeDestroy

Exemple

Vue

<script>import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-core/lib/index.css'export default {  mounted() {    const { univer, univerAPI } = createUniver({      locale: LocaleType.EN_US,      locales: {        [LocaleType.EN_US]: mergeLocales(          UniverPresetDocsCoreEnUS,        ),      },      presets: [        UniverDocsCorePreset({          container: this.$refs.container,        }),      ],    })    univerAPI.createDocument({})    this.univerInstance = univer  },  beforeDestroy() {    this.univerInstance?.dispose()    this.univerInstance = null  },}</script><template>  <div ref="container" style="height: 600px" /></template>

Que pensez-vous de ce guide ?