(vue)将dify和ragflow页面嵌入到vue3项目

(vue)将dify和ragflow页面嵌入到vue3项目

---

dify:

ragflow：

---

代码：

<template>
  <div class="dify-container">
    <iframe
      :src="`https://dify.dev.tudb.work/apps`" //ragflow地址：https://ragflow19.prod.tudb.work/
      frameborder="0"
      width="100%"
      :height="data.height"
    ></iframe>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, reactive } from 'vue';
const data = reactive({
  height: 0,
  email: '...@admin.com',
  password: '...@2025'
})

onMounted(() => {
  const dom = document.querySelector('.app-main');
  const height = dom ? dom.offsetHeight : 0;
  data.height = height;

  window.addEventListener('message', handleMessage);
});

onUnmounted(() => {
  window.removeEventListener('message', handleMessage);
});

const handleMessage = (event) => {
  const { isLoad, isLogin, isFailed } = event.data;
  if(isLoad){
    postToIframe();
    return
  }

  if(isLogin){//登录成功
    console.log('登录成功')
    return 
  }

  if(isFailed){//登录失败
    return
    console.log('登录失败')
  }
}

const postToIframe = () => {
  const iFrame = document.querySelector('iframe')
  if (iFrame) {
    iFrame.contentWindow?.postMessage({
      email: data.email,
      password: data.password,
    }, '*')
  }
}
</script>

<style lang="scss" scoped>
.dify-container {
  height: 100%;
}
</style>