Визуализация v-html как компонентов VUE - PullRequest
Новая
       6

Визуализация v-html как компонентов VUE

0 голосов
/ 24 июня 2018

Я пытаюсь создать предварительный просмотр компонента VUE (аналогично JSFiddle / CodePen) в VUE.

Контейнер VUE, который должен показать конечному пользователю, как компонент выглядит: 

<quickpreview v-html="code"></quickpreview>

Содержимое code является необработанным HTML, например: 

<PRE-TASK>
    <STEP>
        <INSTRUCTION>
            <REF-DS>das Teleskopieren ...</REF-DS>.</INSTRUCTION>
    </STEP>
    <STEP>
        <INSTRUCTION>
            <REF-DS>Sicherheitsanweisungen ...</REF-DS>.</INSTRUCTION>
    </STEP>
    <STEP>
        <INSTRUCTION>
            <REF-DS>Den Teleskopwagen ...</REF-DS>.</INSTRUCTION>
    </STEP>
</PRE-TASK>

Оба <STEP> и <INSTRUCTION> являются допустимыми компонентами: 

components: {
  'step': Step // Step.vue exists
  'instruction': Instruction // Instruction.vue exists
}

Какой самый простой способ заставить <quickpreview> показывать html-контент в качестве компонентов VUE, которые я определил?

1 Ответ

0 голосов
/ 24 июня 2018

Вы можете использовать Vue.compile() до , чтобы скомпилировать динамический шаблон в Vue component и использовать render() в <quick-preview /> для визуализации результата.. 

// define the available components
Vue.component('steps', {...})
Vue.component('step', {...})
Vue.component('instruction', {...})

// the <quick-preview /> component
Vue.component('quick-preview', {
  props: ['code'],
  render(h){
    // render a 'container' div
    return h('div', [
      h(Vue.compile(this.code)) // compile and render 'code' string
    ])
  }
})


// then you can use it as
new Vue({
  data(){
    return {
      code: '...'
    }
  },
  template: '<quick-preview :code="code" />'
})

Пример JSFiddle

Примечание: вам нужно a полная сборка Vue.js для использования template во время выполнения, потому что уменьшил , только во время выполнения сборка не содержит компилятор!Более подробную информацию можно найти здесь

...