实时预览可自定义的HTML模板

Question

我正在构建一个应用程序，用户可以在其中应用基本模板，并且只能修改此模板的一部分。

每个模板都包含一个基本html和一个可自定义的html部分，它包含在基本模板中的某个位置。

我的模板对象：

{
    id: 1,
    name: 'Template name',
    preview: 'http://lorempixel.com/200/180/',

    template: {

        desktopTemplate: {

            html: '<div> Base html template </div>',

            modifiableHtml: '<div> modifiable html part </div>'

            css: ''

        },

    }

}

每个模板都不同，因此可自定义的部分并不总是显示在同一个地方（架构http://image.prntscr.com/image/0984fdbf945b47c39eb2330230520e25.png）

我正在尝试对用户自定义进行实时预览，但我仍然是vue的新手，我真的没有办法做到这一点。

我该如何制作这种组件？甚至可能在vue？

Answer 1

以下是一个如何运作的示例：

new Vue({
    el: '#app',
    data: {
        modifiedHtml: ''
    }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    <div v-html="modifiedHtml"></div>
    <textarea cols="30" rows="10" v-model="modifiedHtml"></textarea>
</div>

修改

使用组件构建此代码的另一个示例：

Vue.component('desktop-template', {
  props: ['parentHtml'],
  template: `
    <div>
      <p>Base html template</p>
      <div v-html="parentHtml"></div>
    </div>
  `,
  data () {
    return {
      css: '',  
    }
  },
})
              
new Vue({
    el: '#app',
    data: {
        modifiedHtml: ''
    }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    <desktop-template :parent-html="modifiedHtml"></desktop-template>
    <textarea cols="30" rows="10" v-model="modifiedHtml"></textarea>
</div>

您需要做的就是使用组件或根应用程序的模板（现在显示的两种方法）来创建您正在使用desktopTemplate.html执行的操作，这样做会使该参数变得多余。