VueJS：如何将emoji表情组件动态嵌入到contentEditable div中

Question

如何在div中键入一些文本的同时将emoji表情组件动态嵌入到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和component。 例如，如果我们创建以下组件：

<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打印所有表情符号，并将使用子代内部的数据。