将 Vue 组件加载为简码

Posted 2023-02-23

【中文标题】将 Vue 组件加载为简码

【英文标题】：Loading Vue components as shortcodes

【发布时间】：2021-11-28 12:38:21

【问题描述】：

我对 Vue 比较陌生，一直在使用 vue 创建 CMS。

我从 CMS 获取 html 内容以显示在页面上，而有时可能会在该 html 内容中加载动态内容。

例如我想接收像这样的html内容：

<div><p>Lorem Ipsum</p>[ProjectList]<p>Some more content</p></div>

所以我想动态更改内容并将“[ProjectList]”替换为模板以从组件本身显示。

不确定是否可以使用 vue，但看起来很方便。

提前致谢。

【参考方案1】：

是的，您可以使用 v-html 更改动态内容并替换 CMS 中的 html 内容以显示您的 vue 组件

第 1 步：创建一个html 模板

<template>
  <div id="app">
    <div v-html="projectlist" />
  </div>

</template>

第 2 步：创建model 数据

data() 
    return 
      projectlist: `<div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
        <h2 class="u-custom-font u-text u-text-palette-1-base u-text-1">Limited-Time Offers</h2>
        <div class="u-expanded-width u-list u-repeater u-list-1">
          <div class="u-container-style u-list-item u-palette-2-light-3 u-repeater-item u-video-cover u-list-item-1">
            <div class="u-container-layout u-similar-container u-valign-top u-container-layout-1">
              <img  class="u-expanded-width u-image u-image-default u-image-1" src="//images03.nicepage.com/c461c07a441a5d220e8feb1a/12f6f82cb14d52aea02f8984/r-min.jpg">
              <div class="u-align-center u-container-style u-expanded-width u-group u-group-1">
                <div class="u-container-layout u-valign-top u-container-layout-2">
                  <h4 class="u-custom-font u-font-oswald u-text u-text-2">Modern T-Shirt</h4>
                  <h6 class="u-text u-text-3">$20.00</h6>
                  <a href="https://nicepage.com" class="u-btn u-btn-rectangle u-button-style u-none u-text-palette-1-base u-btn-1">add to cart</a>
                </div>
              </div>
            </div>
          </div>
          <div class="u-align-center u-container-style u-list-item u-palette-2-light-3 u-repeater-item u-video-cover u-list-item-2">
            <div class="u-container-layout u-similar-container u-valign-top u-container-layout-3">
              <img  class="u-expanded-width u-image u-image-default u-image-2" src="//images03.nicepage.com/c461c07a441a5d220e8feb1a/76fd3428e82f5e0eaf8de69b/t.jpg">
              <div class="u-align-center u-container-style u-expanded-width u-group u-video-cover u-group-2">
                <div class="u-container-layout u-valign-top u-container-layout-4">
                  <h4 class="u-custom-font u-font-oswald u-text u-text-4">Women Dress</h4>
                  <h6 class="u-text u-text-5">$60.00</h6>
                  <a href="https://nicepage.com" class="u-btn u-btn-rectangle u-button-style u-none u-text-palette-1-base u-btn-2">add to cart</a>
                </div>
              </div>
            </div>
          </div>
          <div class="u-align-center u-container-style u-list-item u-palette-2-light-3 u-repeater-item u-video-cover u-list-item-3">
            <div class="u-container-layout u-similar-container u-valign-top u-container-layout-5">
              <img  class="u-expanded-width u-image u-image-default u-image-3" src="//images03.nicepage.com/c461c07a441a5d220e8feb1a/3d2df233df16571295fd0b1a/sdsee.jpg">
              <div class="u-align-center u-container-style u-expanded-width u-group u-video-cover u-group-3">
                <div class="u-container-layout u-valign-top u-container-layout-6">
                  <h4 class="u-custom-font u-font-oswald u-text u-text-6">Women Cotton Top</h4>
                  <h6 class="u-text u-text-7">$17.00</h6>
                  <a href="https://nicepage.com" class="u-btn u-btn-rectangle u-button-style u-none u-text-palette-1-base u-btn-3">add to cart</a>
                </div>
              </div>
            </div>
          </div>
          <div class="u-align-center u-container-style u-list-item u-palette-2-light-3 u-repeater-item u-video-cover u-list-item-4">
            <div class="u-container-layout u-similar-container u-valign-top u-container-layout-7">
              <img  class="u-expanded-width u-image u-image-default u-image-4" src="//images03.nicepage.com/c461c07a441a5d220e8feb1a/decde24fe9235e328b8de453/erw.jpg">
              <div class="u-align-center u-container-style u-expanded-width u-group u-video-cover u-group-4">
                <div class="u-container-layout u-valign-top u-container-layout-8">
                  <h4 class="u-custom-font u-font-oswald u-text u-text-default u-text-8">Summer Dress</h4>
                  <h6 class="u-text u-text-9">$23.00</h6>
                  <a href="https://nicepage.com" class="u-btn u-btn-rectangle u-button-style u-none u-text-palette-1-base u-btn-4">add to cart</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>`,
    ;
 

我用模拟数据创建了一个示例。同样，在您的应用程序中，您可以使用 axios 从 REST API 调用加载数据并在 vue 组件中呈现您的 CMS 代码

DEMO

【讨论】：

我的问题是我想从我将收到的 CMS 数据中加载一个组件。所以在这个问题的例子中，我来自 cms 的 html 内容将是：code

@HBV 您可以返回 json 响应，而不是返回 CMS html 模板，并根据 json 值加载动态组件。请参考storyblok.com/tp/vue-dynamic-component-from-json。希望对您有所帮助。

数据将来自管理员/编辑器使用 HTML 编辑器的输入，因此管理员/编辑器可以在短代码周围添加 html 内容。我想要类似于 wordpress 短代码所做的事情。