javascript - VueJS : How to embed the emoji component dynamically in contentEditable div

Question

如何在 div 中键入一些文本时将表情符号组件动态嵌入到 contentEditable div 中。

这是我的代码的摘录:

<picker set="emojione" @select="addEmoji" />
<div>
    {{ inputBoxValue }}
</div>

<script>
    export default {
        name: 'Some',
        components: {
            picker: Picker,
            emoji: Emoji,
        },
        data() {
            return {
                inputBoxValue: '',
            };
        },
        methods: {
            addEmoji() {
                this.inputBoxValue = ' <
                emoji emoji = "{ id: "
                heart_eyes ", skin: 2 }"
                set = "emojione"
                size = "16"
                tooltip = "true" / > ';
            }
        }
    }; 
<script>

Answer 1

您在这里对问题的思考是错误的，而不是通过字符串将组件添加到 dom 中，您需要开始使用 v-for和组件。例如，如果我们创建以下组件:

<div>
    {{emojiText}}
</div>

<script>
    export default {
       props: ['id', 'set', 'size', 'tooltip'],
        name: 'InnerEmojiHolder',
        data() {
            return {
                emojiText: '',
            };
        },
        methods: {

        },
        ready(){
         // put logic to build emoji here using props
        }
    }; 
<script>

然后可以在现有组件中使用它，如下所示:

<picker set="emojione" @select="addEmoji" />
<div>
  <template :for="emoji, index in currentInput">
    <innerEmojiHolder :id="index" :set="emoji.set" :tooltip="emoji.tooltip" :size="emoji.size" : ></innerEmojiHolder>
  </template>
</div>

<script>
    export default {
        name: 'Some',
        components: {
            picker: Picker,
            emoji: Emoji,
            innerEmojiHolder: innerEmojiHolder,
        },
        data() {
            return {
                currentInput: []
            };
        },
        methods: {
            addEmoji() {
             // Push our emoji variables into currentInput
            }
        }
    }; 

这允许我们使用 for 打印出所有表情符号，并将使用来自子级内部父级的数据。