Question

我在Vue项目中使用twemoji。我已经包含了twemoji软件包，并且一切正常。

我有这样的指令：

import twemoji from 'twemoji'

Vue.directive('emoji', {
  inserted (el) {
    el.innerHTML = twemoji.parse(el.innerHTML)
  }
})

我这样使用它：

<template>
  <div v-emoji class="hello">
    Hello there!✨??
  </div>
</template>

这一切都很好。但是默认的twemoji扩展名是PNG，在手机上会有点模糊。我想改用SVG选项。

官方twemoji文档说我可以使用SVG：

Object as parameter
Here's the list of properties accepted by the optional object that can be passed to the parse function.

  {
    callback: Function,   // default the common replacer
    attributes: Function, // default returns {}
    base: string,         // default MaxCDN
    ext: string,          // default ".png"
    className: string,    // default "emoji"
    size: string|number,  // default "36x36"
    folder: string        // in case it's specified
                          // it replaces .size info, if any
  }

但是我在定义指令时不知道如何声明这些选项。

这里是一个小提琴：https://codepen.io/tdkn/pen/yEmazB

谢谢！

Answer 1

通过具有属性size和ext的可选对象为我完成了窍门。这将生成svg URL

import twemoji from 'twemoji'

Vue.directive('emoji', {
  inserted (el) {
    el.innerHTML = twemoji.parse(el.innerHTML, {  size: 'svg', ext: '.svg' })
  }
})

如何在Vue中使用Twemoji的SVG版本？

1 个答案: