vue.js - 在 VueJs 应用程序中实现表情符号

Question

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

我找到了以下库:(如果有人能推荐一个更好的库，我很乐意听到)

emojionearea

wdt-emoji-bundle

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

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

非常感谢

Answer 1

tldr; 在 JSFiddle 上结帐演示和代码

---

这个答案分为两部分。第一部分涉及如何 import所有的东西都进入环境，而第二部分处理如何使用 Vue。

此解决方案使用 EmojiOne作为表情符号提供者和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

• 使用 AMD 模块(使用 require.js ):您可以使用以下配置使用 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 部分:在 Vue 中使用 EmojiOne

由于 OP 提到他/她的案例是在聊天应用程序中使用表情符号，我也会解释该案例的解决方案，尽管这也可以(并且应该)针对其他用例进行修改!

解决方案主要集中在两个方面。首先是简单地在 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() 更时尚一些!)。为了显示选择器，您只需调用 $(...).emojioneArea()在 <textarea /> 上一旦安装了组件。

确保在 https://jsfiddle.net/riyaz_ali/5Lhex13n 查看完整的代码示例