shershen08 / emoji-vue Goto Github PK

View Code? Open in Web Editor NEW

141.0 4.0 26.0 3.69 MB

Add emoji keyboard to your vuejs project

License: MIT License

JavaScript 95.08% HTML 0.15% Vue 1.95% CSS 2.82%

vue vuejs emoji input-method smileys

emoji-vue's Introduction

emoji-vue

😀 😁 😂 🤣 😃 😄 😅 😆 😉 😊 😋

A Vue.js project implementing a input field addon allowing to add emojis via dropdown.

Install ⚙️

npm i emoji-vue --save

Use 😎👌🏻

import VueEmoji from 'emoji-vue'


//in component def
  methods: {
      onInput(event) {
          //event.data contains the value of the textarea
      },
      clearTextarea(){
        this.$refs.emoji.clear()
      },  
  },
  components: {
    VueEmoji
  }

//in template section
<VueEmoji ref="emoji" @input="onInput" :value="myText" />

Event & properties 📕 📗 📘 📙

@input - event generated when content of textarea with emoji selector is changed.

value - property to place initial content of the textarea.

width - sets width of visible textarea in px; defaults to '200px'.

height - sets height of visible textarea in px; defaults to '50px'.

Build Setup 🧠 ❤️ ✅

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Project uses the following setup: guide and docs for vue-loader.

Check the DEMO

About

Based on code from https://github.com/OneSignal/emoji-picker

Create an issue or ping me on twitter @legkoletat

License

MIT

emoji-vue's People

Contributors

Stargazers

Watchers

emoji-vue's Issues

Doesn't work on VueJS 2.5.17

I get an error in Vue 2.5.17. Should emoji-vue work on this version?

[Vue warn]: Error in nextTick: "TypeError: this.emojiPopup.appendUnicodeAsImageToElement is not a function"
TypeError: this.emojiPopup.appendUnicodeAsImageToElement is not a function
    at new EmojiArea_WYSIWYG (emoji.js:349)
    at HTMLTextAreaElement.<anonymous> (emoji.js:58)
    at Function.each (backend.js:5359)
    at jQuery.fn.init.each (backend.js:5194)
    at jQuery.fn.init.$.fn.emojiarea (emoji.js:53)
    at EmojiPicker.discover (backend.js:102604)
    at VueComponent.initEmojiPlugin (backend.js:57255)
    at backend.js:57269
    at Array.<anonymous> (backend.js:17552)
    at flushCallbacks (backend.js:17473)

Emoji icon color issue

In the above image if i add another icon before this then display with the color if not add any icons the display black and white.

about insert emoji to mysql (messy code)

hello,I directly get the readText value insert into mysql , a part of (90%) will messy code.

mysql already use utf8mb4 and link of utf8mb4.

SQL:

INSERT INTO `ar_mediaset` (`media_id`,`no_search`,`content_t`) VALUES ('gh_01ac1cbf92e1','没找到','🎃⭐️⭐️🌾🐱🐅🐻🐨🐯🐒🐴');

what should I do, can solve the quesition ??? HELP.

Some people know why Emoji will be inserted into the first position in consecutive transmission, and how to modify it?

Maxlength prop feature

Could you add a maxlength prop? I really miss it.

Or maybe do you have any ideas on how to limit max length

Emojis are not displayed properly

If I continuously add two emojis at the end of the string then the first emoji comes at the end of the string and the other at the starting of the string which is not correct both emojis should come at the end of the string one after another.

Reset text input?

How can I reset the text in the plugin?

<VueEmoji @input="onInput" :value="myText" width="500" height="25"/>
...

onInput(event){
                this.messageText = event.data;
            },

I tried

reset(){
  this.myText = "";
  this.messageText = "";
}

but it still shows the content.

emoji-vue components init problem

when i import emoji-vue components ,i got a error vue.esm.js:591 [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'style' of null" , give me some help ,please?