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

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

这个答案分为两部分。第一部分处理如何将import所有东西放入环境中，而第二部分处理如何使用 Vue。

此解决方案使用EmojiOne作为 emoji 提供者和EmojioneArea提供emoji 自动完成行为。

第 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)获取 aDOM string并将其应用于 Vue 组件（您也可以使用它v-html来执行此操作，但 IMOrender()更时尚一点！）。对于显示选择器，您只需$(...).emojioneArea()在<textarea />安装组件后调用。

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

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

问题描述

解决方案

第 1 部分：添加库

第 2 部分：在 Vue 中使用 EmojiOne

推荐阅读