如何将 html 模板作为道具传递给 Vue 组件

Question

我有一个textarea包含的组件，html tag我想html在这个组件中进入编辑模式。我Laravel用来生成html。<template>    <div>        <textarea                  :value="content"                  :name="name"                  :id="id">              <slot></slot>        </textarea>    </div></template>在刀片页面中，我习惯了这个组件：<my-component>   <p class="textbox">hello world</p></my-component>当我将此组件放在页面中时，请<slot></slot>在 textarea 中显示标签。我应该怎么办？你有什么解决方案可以满足我的需求吗？

Answer 1

在您的情况下，如果您想编写自己的内容编辑器，您可以使用div属性 contenteditable="true" 而不是textarea。在此之后，您可以编写文本装饰方法......生成的带有 Laravel 的 html 存储在myhtml 中，并在 vue 组件中使用。

例子：我也上传到codesandbox 【简单的Vue编辑器】

<template>

  <div>

    <button @click="getEditorCotent">Get Content</button>

    <button @click="setBold">Bold</button>

    <button @click="setItalic">Italic</button>

    <button @click="setUnderline">Underline</button>

    <button @click="setContent">Clear</button>

    <div class="myeditor" ref="myeditor" contenteditable v-html="myhtml" @input="onInput"></div>

  </div>

</template>

<script>

export default {

  name: "HelloWorld",

  props: {

    msg: String

  },

  data: () => {

    return {

      myhtml:

        "<h1>Simple editor</h1><p  style='color:red'>in vue</p><p>Hello world</p>" // from laravel server via axios call

    };

  },

  methods: {

    onInput(e) {

      // handle user input

      // e.target.innerHTML

    },

    getEditorCotent() {

      console.log(this.$refs.myeditor.innerHTML);

    },

    setBold() {

      document.execCommand("bold");

    },

    setItalic() {

      document.execCommand("italic");

    },

    setUnderline() {

      document.execCommand("underline");

    },

    setContent() {

      // that way set your html content

      this.myhtml = "<b>You cleared the editor content</b>";

    }

    // PS. Good luck!

  }

};

</script>

<style scoped>

.myeditor {

  /* text-align: left; */

  border: 2px solid gray;

  padding: 5px;

  margin: 20px;

  width: 100%;

  min-height: 50px;

}

</style>