Vue使用emoji表情包_vue表情包

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.

清空文本域内容

最后效果图：

1.资料库vue组件库，有多个emoji相关的组件，根据需要选择一个。vue组件库地址：https://vuejsexamples.com/tag/emoji/我选择的是vue-twemoji-pickervue组件地址：https://vuejsexamples.com/a-fast-plug-n-play-twitter-emoji-picker-for-vue/github地址：https://github.com/kevinfaveri/vue-twemoji-pic :grinning_face: :beaming_face_with_smiling_eyes: :face_with_tears_of_joy: :rolling_on_the_floor_laughing: :grinning_face_with_big_eyes: :grinning_face_with_smiling_eyes: :grinning_face_with_sweat: :grinning_squinting_face: :winking_face: :smiling_face_with_smiling_eyes: :face_savoring_food: 一个 Vue .js项目，实现了一个输入字段插件，允许通过下拉菜单添加表情符号。安装 :gear_selector: npm i emoji - vue --save 利用 :smiling_face_with_sunglasses: :OK_hand_light_skin_tone: import Vue Emoji from ' emoji - vue ' //in component 最近做一个简单的聊天网页，既然是聊天了，自然不可避免需要用到 表情包 啦，其他那些好看的图片 表情包 我没时间去弄，所以就先弄个 emoji 的来玩玩。准备 表情包 资源可点击 表情包 网页去找自己喜欢的 表情包 来用这次我用的是下面红色框住的那个 表情包 使用 表情包 初始化表情列表数据 const emoji s = [ '????', '????', '????', '????', '????', '????', '????', '????', '????', '????', '????', '????'

其实很早都想在博客的留言和评论处使用 表情包 ，奈何博客需要完善的地方太多。于是一直推到了这几天，具体实现效果在博客上可以看到。在网上查了下，发现微信官方的 表情包 对外开放。具体规则想如下，于是就有了思路 var EmotionList = ['微笑', '撇嘴', '色'];//改数组没有写完全 <img src="https://res.wx.qq.com/mpres/htmledition...

vue emoji ， vue 通用 emoji 表情库， vue 网页怎么在输入框中选表情， vue 项目实现 表情包 ， vue 如何实现input框输入 emoji 表情， vue 好用的表情插件库， vue 聊天框输入 emoji 表情， vue 显示 emoji 表情 emoji 微信表情， vue 仿微信 emoji 表情包 ， vue 表情符插件 emoji 表情符表情输入框类似微信qq的表情， vue 使用 v- emoji -picker，在 vue 中使用 v- emoji -picker详细使用教程，v- emoji -picker插件怎么将修改search提示变成中文，v-

一个用于 vue 的表情输入组件 https://gitee.com/jiangliyue/ vue _expression_input_module index是使用示例，emotion是组件代码（这里用的是微信 表情包 的地址，大家可根据需要修改）下载安装启动项目查看效果 npm install npm run dev Emotion文件夹下Emotion文件说明实现原理是根据字段对在线 表情包 图片进行匹配替换代码中 img 标签的地址即为表情图片地址，可自己根据需求替换 mounted () { const name = this.$el[removed] 添加到您的tinymce init： import 'tinymce- emoji ' import 'tinymce' // always import tinymce after any plugins tinymce . init ( { plugins : [ 'tinymce Emoji ' git clone https://github.com/ZhanPhty/ vue - emoji -box.git cd vue - emoji -box yarn 或 npm install yarn serve 或 npm run serve yarn add vue - emoji -box 使用说明 1.默认使用 emoji 字符表情，可自定义表情数据， 表情包 资源建议放置在cdn或本地静态资源目录“ / public” 2.组件提供renewHtml()方法，用于将表情字符渲染成对应的表情图片富文本 < template> ```javascript import { Picker } from ' emoji -mart' import ' emoji -mart/css/ emoji -mart.css' 3. 使用 Picker组件在需要使用 emoji 表情的地方，使用 Picker组件即可： ```html <template> <input v-model="message" /> <Picker @ emoji -click="add Emoji " /> </template> <script> import { Picker } from ' emoji -mart' import ' emoji -mart/css/ emoji -mart.css' export default { components: { Picker data() { return { message: '' methods: { add Emoji ( emoji ) { this.message += emoji .native </script> 在上面的例子中，当用户点击一个 emoji 表情时，add Emoji 方法会将该表情添加到message数据中。 npm install报错peerDependencies WARNING eslint-plugin-vue@^5.2.3 requires a peer of eslint@^5.0.0 but 28377