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和组件。例如，如果我们创建以下组件：

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

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

1 个答案: