twemoji 在 .vue 组件中不起作用

Posted 2023-02-23

【中文标题】twemoji 在 .vue 组件中不起作用

【英文标题】：twemoji not working in .vue component

【发布时间】：2017-06-28 03:54:19

【问题描述】：

我正在尝试在我的 nuxt.js 入门项目中使用 twemoji。但它不起作用。

组件：

<template>
  <section class="container">
      ♠️  &#x1F3C1 ♥️
  </section>
</template>

<script>
var yyy = require ('static/app.js')
yyy.xxx()
</script>

<style scoped>
img.emoji 
  margin: 0px !important;
  display: inline !important;

</style>

app.js

module.exports = 
  xxx: function () 
    twemoji.size = '16x16'
    twemoji.parse(document.body)
  

头部还包含 twemoji CDN。

但出现错误：

Vue.js error

ReferenceError: twemoji is not defined
    at Object.xxx (__vue_s-s-r_bundle__:4382:5)
    at Object.<anonymous> (__vue_s-s-r_bundle__:2094:5)
    at __webpack_require__ (__vue_s-s-r_bundle__:21:30)
    at Object.<anonymous> (__vue_s-s-r_bundle__:3845:3)
    at __webpack_require__ (__vue_s-s-r_bundle__:21:30)
    at Object.module.exports.Object.defineProperty.value (__vue_s-s-r_bundle__:1616:5)
    at __webpack_require__ (__vue_s-s-r_bundle__:21:30)
    at Object.<anonymous> (__vue_s-s-r_bundle__:1117:69)
    at __webpack_require__ (__vue_s-s-r_bundle__:21:30)
    at Object.<anonymous> (__vue_s-s-r_bundle__:4233:65)

【参考方案1】：

来自 nuxt.js 的人的解决方案。

首先需要从npm安装twemoji，然后在.vue模板中：

```

import twemoji from 'twemoji'
var em = function () 
  if (process.BROWSER_BUILD) 
   const twemoji = require('twemoji')
    twemoji.size = '72x72'
    window.onNuxtReady(() => 
      twemoji.parse(document.body)
    )
  

em()

```