biemoji v0.0.5

emoji

特别说明：

• 基于 Vue3 编写，Vue2 不适用。
• 本项目仅用于学习，一切用于不正当的行为，后果由使用者承担责任，与本项目无关。

安装

npm

npm i biemoji

yarn

yarn add biemoji

引入

Vue3

// 引入安装包和样式
import { createApp } from 'vue'
import App from './App.vue'
import Emoji from 'biemoji'
import 'biemoji/dist/style.css'

const app = createApp(App)
app.use(Emoji)

Nuxt3 在 plugins 下新建 emoji.ts 文件

import { defineNuxtPlugin } from '#app'
import Emoji from 'biemoji'
import 'biemoji/dist/style.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Emoji)
})

示例

<template>
  <div class="app">
    <header>
      <h1>biemoji</h1>
      <h4>快来体验别墨迹</h4>
      <span>
        <a href="https://www.npmjs.com/package/biemoji" target="_blank">使用文档</a>
        &nbsp;&nbsp;
        <a href="https://github.com/newbill/biemoji" target="_blank">仓库地址</a>
      </span>
    </header>
    <Emoji v-model="state.value" @add="addEmoji($event)" @delete="deleteEmoji()" />
    <div class="test">
      <div class="flex-box">
        <div class="box">{{ state.value }}</div>
        <button @click="send()" class="btn">渲染</button>
        <div class="box">
          <div v-for="(msg, index) of state.msgs" :key="index" v-html="msg"></div>
        </div>
      </div>
    </div>
    <footer>
      <div>&copy;&nbsp;{{ new Date().getFullYear() }}&nbsp;别墨迹</div>
      <div>
        <span>由&nbsp;<a href="https://d.sv" target="_blank">DAI</a>&nbsp;设计</span>
        <span class="heart">&nbsp;❤&nbsp;</span>
        <span>由&nbsp;<a href="https://vercel.com" target="_blank">Vercel</a>&nbsp;驱动</span>
      </div>
      <div>本项目<strong>仅用于学习</strong>，一切用于不正当的行为，后果由使用者承担责任，与本项目无关</div>
    </footer>
  </div>
</template>

<script setup>
import { reactive, getCurrentInstance } from 'vue'
const internalInstance = getCurrentInstance()
const global = internalInstance?.appContext.config.globalProperties

const state = reactive({
  value: '',
  msgs: [],
})

const send = () => {
  state.msgs.push(global.$string2emoji(state.value))
  state.value = ''
}

const addEmoji = (val) => {
  state.value += val
}

const deleteEmoji = () => {
  if (state.value) {
    state.value = global.$deleteEmoji(state.value)
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
  color: #666;
}
a:hover {
  color: green;
}
.app {
  max-width: 870px;
  margin: auto;
}
header,
footer {
  text-align: center;
  margin-top: 50px;
}
header {
  margin-bottom: 50px;
}
.test {
  margin: 50px 0;
}
.flex-box {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
.btn {
  width: 10%;
  display: inline-block;
  cursor: pointer;
}
.box {
  flex-grow: 1;
  text-align: left;
  max-width: 45%;
  height: 200px;
  border: 1px green solid;
  border-radius: 3px;
  display: inline-block;
  overflow: auto;
}
.heart {
  color: red;
}
</style>

参数说明

必要参数

• v-model: 关联插入表情的内容字段
• addEmoji($event): 点击表情触发的方法，返回参数是该表情的文本形式
• deleteEmoji(): 点击删除按钮触发的方法

可选参数

• id: 表情面板的唯一标识，可省略，字符串类型，默认为biemoji
• buttton: 是否显示删除按钮，可省略，布尔类型，默认为true
• height: 面板高度，可省略，字符串类型，默认为160px
• hidden: 选择要隐藏的表情面板，可省略，字符串数组类型，默认为空即都显示，hidden=['XX']则表示隐藏XX表情面板
• active: 默认选中的表情面板，可省略，字符串类型，默认为3D圆脸

全局方法

// 解析显示表情
this.value = this.$string2emoji(this.value)
// 逐个删除已有表情
this.value = this.$deleteEmoji(this.value)

在线体验

demo

未来计划

加入更多表情