透過超過 100 個提示的集合來學習 Nuxt！
55.5K

twemoji
nuxt-twemoji

Nuxt 的 Twemoji 模組。將表情符號渲染為 SVG 元素或 PNG 圖片。
631 次下載
8 個星
v3.6.2
yizackyizack

nuxt-twemoji

nuxt-twemoji

npm version npm downloads License Tests Nuxt Modules

Nuxt 的 Twemoji 模組。將表情符號渲染為 SVG 元素或 PNG 圖片

目錄

功能

  • Nuxt 3 已就緒
  • 支援 Emoji 15.1
  • 依字元渲染表情符號
  • 依碼位渲染表情符號
  • 依定義物件渲染表情符號
  • 預設使用 SVG 渲染
  • 使用 localStorage 快取 SVG
  • PNG 圖片渲染選項
  • 來自原始前 Twitter 作者的 Twitter 表情符號資源（jdecked/twemoji）fork 版本庫
  • 來自 jsDelivr CDN 的資源
  • 多種使用方式

快速設定

  1. 將 nuxt-twemoji 依賴項新增至您的專案
npx nuxi@latest module add twemoji
  1. 將 nuxt-twemoji 新增至 nuxt.config.ts 的 modules 區段
export default defineNuxtConfig({
  modules: [
    'nuxt-twemoji'
  ]
})

就這樣！您現在可以在您的 Nuxt 應用程式中使用 nuxt-twemoji ✨

模組配置

您可以透過將 twemoji 屬性新增至 nuxt.config.ts 檔案來配置模組。以下是預設配置

export default defineNuxtConfig({
  twemoji: {
    expiresIn: 3.154e+7 // SVG cache expiration time in seconds (1 year)
  }
})

元件

您可以根據您的 Nuxt 應用程式需求來使用這些可用的元件。

名稱描述SSR
Twemoji依表情符號字元、碼位或定義來渲染 Twemoji。✔️
Twemojify剖析文字並將所有表情符號字元取代為 Twemoji svg 元素或 png 圖片。✔️
TwemojiParse使用此元件包裝元素，它將剖析找到的所有表情符號字元，並以 Twemoji svg 或 png 圖片元素取代。❌

用法 (Twemoji)

  1. 從建議的 Unicode 表情符號清單中找到表情符號：https://unicode.org/emoji/charts-15.1/full-emoji-list.html
  2. 在專案中，使用元件 <Twemoji emoji="" />，其中 emoji 是表情符號字元或碼位。
  3. 如果您在您的 Nuxt 應用程式中使用 SSR (伺服器端渲染)，此模組將在您專案的建置/產生過程中，將表情符號 <svg> 或 <img> 元素注入到輸出程式碼中。 或者，如果未使用 SSR，表情符號將在用戶端執行期間動態渲染。

Twemoji 屬性

屬性必填預設類型
emoji是string 或 EmojiDefinition
size否1emstring
png否falseboolean

渲染

使用 emoji 屬性依字元渲染表情符號。

<!-- Render SVG element -->
<Twemoji emoji="🚀" />

<!-- Resize -->
<Twemoji emoji="🚀" size="2em" />

<!-- Render PNG <img> element -->
<Twemoji emoji="🚀" png />

使用 emoji 屬性依碼位渲染表情符號。

<Twemoji emoji="1F60A" />

或

<Twemoji emoji="U+1F60A" />

使用 emoji 屬性依定義渲染表情符號。

<script setup>
import { twSmilingFaceWithSmilingEyes } from 'nuxt-twemoji/emojis'
</script>

<template>
  <Twemoji :emoji="twSmilingFaceWithSmilingEyes" />
</template>

表情符號檔案已使用自製的 generateEmojis.js 腳本產生，該腳本會從 Unicode 公開的 Emoji 15.1 檔案中擷取表情符號資料，該檔案可在 https://unicode.org/Public/emoji/15.1/emoji-test.txt 取得

定義

EmojiDefinition 類型代表具有這三個特定字串屬性的物件

  • code 代表與表情符號關聯的碼。
  • emoji 代表實際的表情符號。
  • name 代表表情符號的名稱。
type EmojiDefinition = {
  code: string,
  emoji: string,
  name: string
}

更多範例

請查看 🏀 線上遊樂場 以了解更多範例。

Twemoji 預設 CSS

<svg> 和 <img> 標籤都會被指派 .twemoji 類別。 這些是預設樣式，但您可以使用類別名稱來新增您自己的樣式。

.twemoji {
  display: inline-block;
  vertical-align: middle;
}

用法 (Twemojify)

此元件會剖析字串文字，並將所有表情符號字元取代為 Twemoji svg 元素或 png 圖片。

  1. 在專案中，使用元件 <Twemojify text="" />，其中 text 是字串。
  2. 如果您在您的 Nuxt 應用程式中使用 SSR (伺服器端渲染)，此模組將在您專案的建置/產生過程中，將表情符號 <svg> 或 <img> 元素注入到輸出程式碼中。 或者，如果未使用 SSR，表情符號將在用戶端執行期間動態渲染。

Twemojify 屬性

屬性必填預設類型
text是string
png否falseboolean

解析器

此元件使用 jdecked 的 @twemoji/parser 套件來識別字串中的表情符號實體。

使用 text 屬性剖析字串中的所有表情符號字元

<!-- Replaces ❤️ and 🚀 with SVG elements -->
<Twemojify text="I ❤️ Nuxt 🚀" />

<!-- Replaces ❤️ and 🚀 with PNG images -->
<Twemojify text="I ❤️ Nuxt 🚀" png />

Twemojify 預設 CSS

<svg> 和 <img> 標籤都會被指派 .twemojify 類別。 這些是預設樣式，但您可以使用類別名稱來新增您自己的樣式。

這些樣式規則可確保剖析的表情符號大小與包裝元素相同。

.twemojify {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}

用法 (TwemojiParse)

此元件將剖析找到的所有表情符號字元。

  1. 將元素包裝在 <TwemojiParse> </TwemojiParse> 元件內
  2. 如果您想要使用 png 圖片剖析表情符號，請使用元件的 png 屬性，否則預設會剖析 svg 圖片。

注意：此元件有一個缺點，因為它是在掛載的 Vue 生命週期期間執行，僅在用戶端運作，因此不支援 SSR（伺服器端渲染）。

TwemojiParse 屬性

屬性必填預設類型
png否falseboolean

DOM 解析器

此元件使用 jdecked 的 @twemoji/api 套件及其 DOM 解析器 API。

<!-- Replaces 🚀 with SVG image -->
<TwemojiParse>
  <p>Nuxt Twemoji 🚀</p>
</TwemojiParse>

<!-- Replaces 🚀 with PNG image -->
<TwemojiParse png>
  <p>Nuxt Twemoji 🚀</p>
</TwemojiParse>

<!-- You can wrap any amount of emojis inside the component -->
<TwemojiParse>
  <p>Nuxt Twemoji 🚀</p>
  <div>
    <p>I ❤️ Nuxt 🚀</p>
  </div>
</TwemojiParse>

TwemojiParse 預設 CSS

<img> 標籤都會被指派 .twemojiParse 類別。 這些是預設樣式，但您可以使用類別名稱來新增您自己的樣式。

這些樣式規則可確保剖析的表情符號大小與包裝元素相同。

img.twemojiParse {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}

鳴謝

開發

# Install dependencies
pnpm install

# Generate type stubs
pnpm dev:prepare

# Develop with the playground
pnpm dev

# Build the playground
pnpm dev:build

# Run ESLint
pnpm lint

# Run Vitest
pnpm test
pnpm test:watch

# Run typecheck
pnpm test:types

# Release new version
pnpm release