有人逐步使用 vue-twemoji-picker 吗？ [关闭]答案

【问题标题】：Anyone have step by step using vue-twemoji-picker? [closed]有人逐步使用 vue-twemoji-picker 吗？ [关闭]
【发布时间】：2020-05-26 20:08:57
【问题描述】：

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

谢谢

【问题讨论】：

我也会检查github.com/DCzajkowski/vue-emoji-picker

标签： vue.js vue-cli

【解决方案1】：

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

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

另外，如果你不想使用文档网站，这个 Vue sn-p 应该可以按预期工作：

<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

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

【讨论】：

【解决方案2】：

使用 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>

【讨论】：