Vue js 用 html 内容渲染文本

Question

我想要做的是有一个根元素，其中包含一个包含内部 html 的道具，例如：hello<b>hey</b> 但我不能使用 v-html，因为这个元素也有子元素，例如：

<template>
  <component :is="element.tag" contenteditable="true">
    <div contenteditable="false">
      <span class="delete-obj" :id="'delete'+element.id" >delete</span>
    </div>
    <RenderString :string="element.content" />
  </component>
</template>
<script>
    import Vue from "vue";
  
    Vue.component("RenderString", {
        props: {
            string: {
                required: true,
                type: String
            }
        },
        render(h) {
            const render = {
                template:  this.string ,
                methods: {
                    markComplete() {
                        console.log('the method called')
                    }
                }
            }
            return h(render)
        }
    })
    export default {
        name: "VElement",
        props: {
            element: {
                required: false,
                default: null
            },
        },
    }
 </script>

我已经尝试过上述方法，并且尝试过使用插槽。我可以使用像 element.innerText 这样的普通 JavaScript 来解决它，但我不想这样做。主要目标是当他们键入元素时元素是可编辑的，他们正在编辑将呈现的 element.content，其中的 div 是我也需要的普通 HTML。 主要问题是我想要的内部 HTML 没有根元素。 元素类似于：

{id:1,tag:"div",content:"hello<b>hey</b>"}

我希望最终结果是：

<div contenteditable="true">
    <div contenteditable="false">
        <span class="delete-obj" :id="'delete'+element.id" >delete</span>
    </div>
    hello<b>hey</b>
<div>

当我点击内部时我想编辑hello<b>hey</b>，我不希望它包裹在其他任何东西中，如果我将 v-html 放在外部 div 上，内部 div 就消失了。

Answer 1

如果您确实无法将内容包装在父元素中，也许一个好方法是编写一个呈现文本的VUE directive。

JS FIDDLE FULL DEMO

//DIRECTIVE
Vue.directive('string', {
    inserted(el, bind) {
        /** 
        * Here you can manipulate the element as you need.
        */

        el.insertAdjacentText('beforeend', bind.value); 
    }
});

//TEMPLATE
<template>
  <component :is="element.tag" contenteditable="true" v-string="element.content">
    <div contenteditable="false">
      <span>delete</span>
    </div>
  </component>
</template>

Answer 2

就像 Seblor 说的，v-html 可以处理嵌套的 html 字符串。

只需将 RenderString 组件替换为 <div v-html="element.content"/> 即可满足您的需求。

使用hello<b>hey</b> 的给定示例进行测试：

Vue.component('VElement', {
  name: "VElement",
  props: {
    element: {
      required: false,
      default: null
    },
  },
  template: '\
    <component :is="element.tag" contenteditable="true">\
      <div contenteditable="false">\
        <span class="delete-obj" :id="\'delete\'+element.id">delete</span>\
      </div>\
      <div v-html="element.content"/>\
    </component>'
})

new Vue({
  el: '#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <v-element :element="{id:1, tag:'div', content:'hello<b>hey</b>'}" />
</div>