@ codatum/embed-vue

Vue 3 为已签名的 Codatum Embed 进行整合。 提供将SDK核心包裹在一起的单一组件. 全体人员 @ codatum/ 嵌入 被再导出,这样您就可以将这个软件包作为单一的切入点(一个版本,不拆分).

选项、类型、事件和方案 API 详情见 @ codatum/ 嵌入。 。 。 .

安装

pnpm add @codatum/embed-vue
# or
npm install @codatum/embed-vue

要求数 第3组 (同类依赖).

使用量

<script setup lang="ts">
import { EmbedVue } from "@codatum/embed-vue";

const embedUrl = "https://app.codatum.com/protected/workspace/xxx/notebook/yyy";
const tokenProvider = async () => {
  const res = await fetch("/api/embed-token", { method: "POST" });
  const data = await res.json();
  return { token: data.token };
}
</script>

<template>
  <EmbedVue
    :embedUrl="embedUrl"
    :tokenProvider="tokenProvider"
    :iframeOptions="{ theme: 'LIGHT', locale: 'ja' }"
    @statusChanged="(e) => console.log('Status', e.status)"
    @paramChanged="(e) => console.log('Params', e.params)"
    @executeSqlsTriggered="(e) => console.log('Execute', e.params)"
    @error="(e) => console.error(e)"
  />
</template>

通话 reload 从父母那里

使用模板校对并呼叫已曝光 reload() 方法。 它回来了 true 成功和 false 故障(通过 @error它不会抛出.

<script setup lang="ts">
import { ref } from "vue";
import { EmbedVue } from "@codatum/embed-vue";

const embedRef = ref<InstanceType<typeof EmbedVue> | null>(null);

async function onFilterChange() {
  const ok = await embedRef.value?.reload();
  if (!ok) console.warn("reload failed — see @error");
}
</script>

<template>
  <EmbedVue ref="embedRef" :embedUrl="..." :tokenProvider="..." @error="handleError" />
</template>

运行时更改道具

道具一上山就读取. 应用新值(例如: embedUrl 或者说 iframeOptions),使用时 :key 强制重载 :

<EmbedVue :key="embedUrl" :embedUrl="embedUrl" :tokenProvider="tokenProvider" />

自定义装入 UI (E)#loading (插槽)

当你通过 #loading 插槽, 组件在加载时隐藏 Iframe( init, 重新加载, 重新刷新等) , 并显示您的自定义 UI 。 使用 showLoadingOn 以控制哪个状态显示覆盖(默认 ): ['INITIALIZING', 'RELOADING', 'REFRESHING']) (中文(简体) ). 没有槽,内置的iframe加载行为不变.

<!-- Spinner for all loading states -->
<EmbedVue :embedUrl="embedUrl" :tokenProvider="tokenProvider">
  <template #loading>
    <MySpinner />
  </template>
</EmbedVue>

<!-- Only on first load -->
<EmbedVue
  :embedUrl="embedUrl"
  :tokenProvider="tokenProvider"
  :showLoadingOn="['INITIALIZING']"
>
  <template #loading>
    <MySpinner />
  </template>
</EmbedVue>

<!-- Branch by status -->
<EmbedVue :embedUrl="embedUrl" :tokenProvider="tokenProvider">
  <template #loading="{ status }">
    <FullPageLoader v-if="status === 'INITIALIZING'" />
    <SubtleBar v-else />
  </template>
</EmbedVue>

API 密码

选项类型和行为(例如:. iframeOptions, (中文(简体) ), tokenOptions, (中文(简体) ), displayOptions, (中文(简体) ), devOptions) 与在 @ codatum/ 嵌入该组件使用根元件作为iframe容器(无) container (原始内容存档于2013-10-12). prop.

道具

槽数

活动

展览( ref)

需要自定义容器还是完全控制? 使用 createEmbed() 从此套件( 或 @ codatum/ 嵌入(单位:千美元) onMounted 财务报告和审定财务报表 instance.destroy() 内 onUnmounted。 。 。 .

另见

• 版本和更改日志数字 : 版本
• 安保和部署数字 : 安保和部署
• 支持的环境数字 : 支持的环境