Question

我正在为我的聊天应用项目设置表情符号。我真的很喜欢Slack /高音扬声器中的表情符号，我想要类似的东西。

我发现了以下库：（如果有人可以建议一个我想听的更好的库）

emojionearea

wdt-emoji-bundle

我不确定如何加载这些库并在VueJS应用中使用它们。谁能帮忙加载和使用它们？

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

非常感谢

Answer 1

tldr; 在JSFiddle

上签出演示和代码

此答案分为两个部分。第一部分讨论如何将所有内容import放入环境，而第二部分讨论如何使用Vue。

此解决方案使用EmojiOne作为表情符号提供者，并使用EmojioneArea提供表情符号自动完成行为。

第1部分：添加库

您可以通过三种方式来执行此操作。

使用全局<script>标记（对于任何严重的问题不建议使用）：您可以按顺序为所有依赖项添加<script>标记，并简单地开始使用Global对象。
依次添加以下<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部分：将EmojiOne与Vue一起使用

由于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上查看完整的代码示例

在VueJs App中实现表情符号

1 个答案:

第1部分：添加库

第2部分：将EmojiOne与Vue一起使用