可定製的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做什麼，這樣做會將此PARAM冗餘。