透過 100+ 個技巧學習 Nuxt！
56.4K

twemoji
nuxt-twemoji

用於 Nuxt 的 Twemoji 模組。將表情符號渲染為 SVG 元素或 PNG 圖片。
692 次下載
10 個星星
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 圖片渲染選項
  • 來自原始 ex-Twitter 作者的 Twitter Emoji 資產 (jdecked/twemoji) 分支儲存庫
  • 來自 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 圖片。

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

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