时间戳

首页 > 解决方案 > 在 vue 应用程序中显示 HTML 模板的实时预览

javascript - 在 vue 应用程序中显示 HTML 模板的实时预览

问题描述

我有一个返回 HTML 代码的 POST 端点。这是一个动态生成的登录页面，其 UI 基于该 POST 请求中提供的参数。例如：

axios.post('/api/preview', {headerColor: 'green', footerColor: 'blue'}); // returns the HTML page with styles built based on the request body params

我想在 400 像素的窗口中实时预览那个 HTML 页面。如果页面调整到 400px 宽度，并且具有可滚动的高度，那就太好了。

我在想两种方法：

  1. iframe，但我无法将 POST 请求的内容传递给 iframe。

  2. v-html，但是我无法强制内容调整到我的 400px 容器宽度，并且它在没有任何 iframe 的情况下将HEADand元素添加到网站 DOM 中，因此它会污染全局事物。script

最好的方法是什么？

标签： javascripthtmlvue.jsiframe

解决方案

也许您可以将来自 API 的这些属性存储在 data() 属性中，然后使用 v-bind 动态绑定样式/类。

您能否发布更多使用 API 数据的登录页面的代码？

推荐阅读