在 VueJs 应用程序中实现表情符号

Question

我想为我的聊天应用程序项目设置表情符号。我真的很喜欢 slack / tweeter 中的表情符号，我想要类似的东西。

我找到了以下库：（如果有人能提出更好的库，我很乐意听到）

emojionearea

wdt-emoji-bundle

我不确定如何加载这些库并在 VueJS 应用程序中使用它们。任何人都可以协助如何加载和使用它们吗？

我想提一下我尝试使用 emoji-mart-vue 但不确定如何在运行时将组件添加到模板。

非常感谢

Answer 1

tldr; 在 JSFiddle

上查看演示和代码

这个回答分为两部分。第一部分介绍如何将所有内容 import 放入环境，第二部分介绍如何使用 Vue。

此解决方案使用 EmojiOne as the emoji provider and EmojioneArea 提供 表情符号自动完成 行为。

第 1 部分：添加库

有三种方法可以做到这一点。

使用全局 <script> 标签（不推荐用于任何严重的事情）：您可以按顺序为所有依赖项添加 <script> 标签，然后简单地开始使用全局对象。
按顺序添加这些 <script>：
1. https://code.jquery.com/jquery-3.3.1.min.js
2. https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js
3. https://cdn.jsdelivr.net/npm/emojione@3.1.6/lib/js/emojione.min.js
4. https://cdnjs.cloudflare.com/ajax/libs/jquery.textcomplete/1.8.4/jquery.textcomplete.min.js
5. https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.min.js

Using AMD modules (using require.js): 你可以使用下面的配置来加载这些模块 asynchronously using require.js

require.config({
  paths: {
    'jquery': 'https://code.jquery.com/jquery-3.3.1',
    'Vue': 'https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue',
    'emojione': 'https://cdn.jsdelivr.net/npm/emojione@3.1.6/lib/js/emojione',
    'jquery.textcomplete': 'https://cdnjs.cloudflare.com/ajax/libs/jquery.textcomplete/1.8.4/jquery.textcomplete',
    'emojionearea': 'https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea'
  },
  shim: {
    'emojione': {
      'exports': 'emojione'
    }
  }
})

然后您可以在入口点要求这些模块作为

require(['jquery', 'Vue', 'emojione'], function($, Vue, emojione){ /* ... */ })

使用webpack：以上所有库都可以通过npm获得，您可以像使用任何其他库一样安装和使用它们。无需特殊配置。

奖励： 使用 webpack 和 require.js 并将网络和缓存负载卸载到 CDN！
我经常将此设置用于我的项目，这可以提高您网站的可靠性和性能。您可以使用 webpack.externals 指示 webpack 不要捆绑任何供应商依赖项，而是您自己提供它们，方法是手动添加 <script> 标签或使用 require.js。

首先将此添加到您的 webpack.<whatever>.js

//...
output: {
  libraryTarget: 'umd'   // export app as a library
},
//...
externals: {
  'jquery': 'jquery',
  'vue': 'Vue',
  'emojione': 'emojione'
},
//...

然后，在您的 require.js 条目中，添加此

//...
map: {
  // any module requesting jquery should get shield
  "*": {
    "jquery": "jquery-shield"
  },
  // shield should get original jquery
  "jquery-shield": {
    "jquery": "jquery"
  },
  // patch plugins
  "jquery.textcomplete": {
    "jquery": "jquery"
  },
  "emojionearea": {
    "jquery": "jquery"
  }
}
//...
// define shield, require all the plugins here
define('jquery-shield', ['jquery', 'jquery-textcomplete', 'emojionearea'], function($){ return $ })

然后添加 require(...) 你的 webpack 包

第 2 部分：将 EmojiOne 与 Vue 结合使用

正如 OP 提到的 his/her 案例是在聊天应用程序中使用表情符号，我也会解释该案例的解决方案，尽管这也可以（并且应该）针对其他用例进行修改！

解决方案主要集中在两个方面。首先是 简单地 在 message 组件中显示表情符号，即不需要显示 表情符号选择器 对话框，其次是在用户输入（比如）文本区域时显示表情符号选择器对话框。

要实现第一个目标，您可以使用像这样的消息组件，

Vue.component('message', {
  props: ['content'],
  render: function(h){
    return h('div', {
      class: { 'message': true }
    }, [
      h('div', {
        class: { 'bubble': true },
        domProps: {
          innerHTML: emojione.toImage(this.content)
        }
      })
    ])
  }
})

这将创建一个 <message /> 组件，您可以将其用作

<message content="Hey :hugging:!!" />

这将呈现

<div class="message">
  <div class="bubble">
    Hey <img class="emojione" alt="" title=":hugging:" src="...">!!
  </div>
</div>

现在，要创建一个 <message-box /> 组件来显示表情符号选择器以协助 autocomplete，请执行以下操作

Vue.component('message-box', {
  template: `<div class="message-box"><textarea></textarea></div>`,
  mounted(){
    // find the input
    $(this.$el).find('textarea').emojioneArea()
  }
})

就是这样！虽然看起来很多，但解决方案的关键非常简单！只需使用 emojione.toImage(str) 得到一个 DOM string 并将其应用于 Vue 组件（您也可以使用 v-html 来执行此操作，但 IMO render() 更圆滑！）。为了显示选择器，您只需在安装组件后在 <textarea /> 上调用 $(...).emojioneArea()。

确保在 https://jsfiddle.net/riyaz_ali/5Lhex13n

查看完整的代码示例

在 VueJs 应用程序中实现表情符号

Implementing Emojis in a VueJs App

emoji

vue.js

emojione

vuejs2

twemoji

第 1 部分：添加库

第 2 部分：将 EmojiOne 与 Vue 结合使用