Vue使用emoji表情包

1.资料库

vue组件库，有多个emoji相关的组件，根据需要选择一个。

vue组件库地址：

Emoji - Vue.js Examples

我选择的是vue-twemoji-picker

vue组件地址：

A fast plug-n-play Twitter Emoji Picker for Vue

github地址：

GitHub - kevinfaveri/vue-twemoji-picker: Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.

vue-twemoji-picker组件官网地址：

Vue Twemoji Picker

2.使用概述

2.1安装组件

npm install @kevinfaguiar/vue-twemoji-picker
// OR
yarn add @kevinfaguiar/vue-twemoji-picker

2.2引入使用

引入的{lang}要在本地定义语言包的种类。这个是官网给出的简单例子。

<template>
  <twemoji-textarea 
    :emojiData="emojiDataAll" 
    :emojiGroups="emojiGroups" 
    @enterKey="onEnterKey">
  </twemoji-textarea>
</template>
<script>
  import {
    TwemojiTextarea
  } from '@kevinfaguiar/vue-twemoji-picker';
  import EmojiAllData from '@kevinfaguiar/vue-twemoji-picker/emoji-data/{LANG}/emoji-all-groups.json';
  import EmojiGroups from '@kevinfaguiar/vue-twemoji-picker/emoji-data/emoji-groups.json';
  export default {
    name: 'App',
    components: {
      'twemoji-textarea': TwemojiTextarea
    },
    computed: {
      emojiDataAll() {
          return EmojiAllData;
      },
      emojiGroups() {
          return EmojiGroups;
      }
    },
    methods: {
      onEnterKey(e) {
        console.log("ClickedEnter", e);
      }
    }
  }
</script>

正式项目中使用，还需要一些事件和属性的定义，demo如下：

<template>
twemoji-textarea 
                  ref="twemoji"
                  placeholder="请输入文本内容"
                  initialContent='initialContent'
                  @contentChanged="contentChanged"
                  :textareaDisabled="!canEdit"
                  :emojiPickerDisabled="!canEdit"
                  :emojiData="emojiDataAll" 
                  :emojiGroups="emojiGroups" 
                  @enterKey="onEnterKey">
                </twemoji-textarea></template>
<script>
   import {
    TwemojiTextarea
  } from '@kevinfaguiar/vue-twemoji-picker';
  import EmojiAllData from '@kevinfaguiar/vue-twemoji-picker/emoji-data/zh/emoji-all-groups.json';
  import EmojiGroups from '@kevinfaguiar/vue-twemoji-picker/emoji-data/emoji-groups.json';
xport default {
    name: 'App',
    data () {
        initialContent:'初始化值'
    },
    components: {
      'twemoji-textarea': TwemojiTextarea
    },
    computed: {
      emojiDataAll() {
          return EmojiAllData;
      },
      emojiGroups() {
          return EmojiGroups;
      }
    },
    methods: {
      onEnterKey(e) {
          console.log("ClickedEnter", e);
        },
        //输入框内容改变触发的事件，val返回最新数值
        contentChanged(val) {
          console.log(val)
          this.detailForm.momentContent = val
        },
        //清空内容
        clear(){
            this.$refs.twemoji.cleanText()
        },
        //给文本域赋值，例如接口返回数据赋值
        addText(){
            this.$refs.twemoji.addText('最新的数据显示')
        }
    }
  }
</script>

3.部分API，Props

3.1 initialContent

type:string

This prop indicates the initial value of the textarea.

定义文本域的初始值。

3.2 enableSendBtn

type:boolean

The value of this prop represents whether the send button is enabled.

是否显示发送按钮，

3.3 emojiPickerDisabled

type:boolean

The value of this prop represents whether the emoji picker is enabled.

表情选择器是否可编辑

3.4 textareaDisabled

type:boolean

The value of this prop represents whether the textarea is enabled.

文本域是否可以编辑

3.5 placeholder

type：string

Define the textarea placeholder.

文本域的输入提示

3.6 maxlength

type:number

Define the textarea maxlength. If set to null has no default maxlength. If set to any number the textarea will automatically expand itself to show a character count.

设置文本域的最大字符串。

4 API，event

4.1 contentChanged（content）

conten，string类型，文本域内容改变的时候触发，content字符串类型，返回最新的文本域数值。

4.2 enterKey（event）

按下回车键的时候触发

5 Ref Useful Methods

5.1 addText(content)

content参数，string类型。

This method adds a text to the textarea. The text parameter will then be sanitized and emojis Unicodes converted to emoji IMG arts from Twemoji.

将文本添加到文本区域，包括表情符号也正常显示。

5.2 cleanText（）

This method cleans the textarea.

清空文本域内容

最后效果图：