有人一步一步使用 vue-twemoji-picker 吗？

Question

我是 vue 初学者，我用 vue 开发了一个简单的聊天应用程序，需要表情符号。我找到 https://github.com/kevinfaguiar/vue-twemoji-picker，但没有完整的启动项目文档。我用的是vue-cli，有没有人可以给几个使用步骤..？

谢谢

Answer 1

使用 npm install --save vue-twemoji-picker 安装它。然后将此代码添加并编辑到您的组件 .vue 文件中：

<template>
<div>
    <coolpicker
        :emojiData="emojiDataAll"
        :emojiGroups="emojiGroups"
        :skinsSelection="true"
        @emojiUnicodeAdded="yourMethodToCatchEmojiUnicode"
        @emojiImgAdded="yourMethodToCatchEmojiImg"
    ></coolpicker>
    <coolpicker
        :emojiData="emojiDataTwoCollections"
        :emojiGroups="emojiGroups"
        :skinsSelection="true"
        @emojiUnicodeAdded="yourMethodToCatchEmojiUnicode"
        @emojiImgAdded="yourMethodToCatchEmojiImg"
    ></coolpicker>
    <cooltextarea
        :content.sync="content"
        :emojiData="emojiDataAll"
        :emojiGroups="emojiGroups"
        @enterKey="onEnterKey"
        ref="cooltextareaRef"
    ></cooltextarea>
</div>
</template>

<script>
import { CoolPicker } from 'cool-emoji-picker'
import { CoolTextArea } from 'cool-emoji-picker'
import EmojiData from '../emoji-data/{LANG}/emoji-all-groups.json'
import EmojiDataAnimalsNature from '../emoji-data/{LANG}/emoji-group-animals-nature.json'
import EmojiDataFoodDrink from '../emoji-data/{LANG}/emoji-group-food-drink.json'
import EmojiGroups from '../emoji-data/emoji-groups.json'
export default {
    name: 'App',
    data: () => ({ content }),
    components: {
        'coolpicker': CoolPicker,
        'cooltextarea': CoolTextArea
    },
    computed: {
        emojiDataAll() { return EmojiData },
        emojiDataTwoCollections() {
            const emojiData = []
            emojiData.push(EmojiDataAnimalsNature)
            emojiData.push(EmojiDataFoodDrink)
            return emojiData
        },
        emojiGroups() { return EmojiGroups }
    },
    methods: {
        onEnterKey() {},
        yourMethodToCatchEmojiUnicode() {},
        yourMethodToCatchEmojiImg() {}
    }
}
</script>

Answer 2

刚看到你的问题...我是 vue-twemoji-picker 的作者。 v^4.0.0 的文档有点……乱哈哈。

最近我将该组件更新到了一个主要版本 (v^5.0.0)，其中包括一个新的文档网站，比另一个更详细，视觉上更令人愉悦，也许它比另一个更能满足您的需求之前：https://kevinfaguiar.github.io/vue-twemoji-picker/docs/getting-started/#using-twemojipicker

此外，如果您不想使用文档网站，此 Vue 代码段应该可以按预期工作：

<template>
  <twemoji-textarea 
    :emojiData="emojiDataAll" 
    :emojiGroups="emojiGroups" 
    @enterKey="onEnterKey">
  </twemoji-textarea>
</template>

<script>
  import {
    TwemojiTextarea
  } from '@kevinfaguiar/vue-twemoji-picker';
  import EmojiAllData from '@kevinfaguiar/vue-twemoji-picker/emoji-data/en/emoji-all-groups.json';
  import EmojiGroups from '@kevinfaguiar/vue-twemoji-picker/emoji-data/emoji-groups.json';
  export default {
    name: 'App',
    components: {
      'twemoji-textarea': TwemojiTextarea
    },
    computed: {
      emojiDataAll() {
          return EmojiAllData;
      },
      emojiGroups() {
          return EmojiGroups;
      }
    },
    methods: {
      onEnterKey(e) {
        console.log("ClickedEnter", e);
      }
    }
  }
</script>

如果您觉得文档缺少某些东西，请不要犹豫，在 Github 存储库中打开一个问题：https://github.com/kevinfaguiar/vue-twemoji-picker/issues

很高兴知道人们正在使用我的项目并收到来自社区的反馈

有人一步一步使用 vue-twemoji-picker 吗？

Anyone have step by step using vue-twemoji-picker?

vue.js

vue-cli