vue3 naive ui 内嵌网页 自适应大小

在Vue3中使用Naive UI内嵌网页并实现自适应大小，可以通过使用动态绑定样式的方式来实现。

首先，你需要在Vue项目中安装Naive UI和Vue Router：

npm install naive-ui vue-router

然后，在你的Vue组件中，引入Naive UI的样式和组件：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { NLayout, NLayoutContent } from 'naive-ui'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 定义你的路由
  ]
})

const app = createApp({})
app.use(router)
app.use(NLayout)
app.use(NLayoutContent)
app.mount('#app')

接下来，你可以使用router-view组件来渲染你的路由组件，并使用NLayoutContent组件作为容器来包裹router-view组件，并设置宽度和高度为100%：

<template>
  <NLayout>
    <NLayoutContent style="width: 100%; height: 100%;">
      <router-view></router-view>
    </NLayoutContent>
  </NLayout>
</template>

最后，你可以在你的路由组件中进行网页的嵌入，并使用CSS的iframe属性来实现自适应大小：

<template>
  <div style="width: 100%; height: 100%;">
    <iframe src="https://example.com" style="width: 100%; height: 100%;"></iframe>
  </div>
</template>

通过设置iframe的宽度和高度为100%，它将自适应父容器的大小。

这样，你就可以在Vue3中使用Naive UI内嵌网页并实现自适应大小了