Vuejs-Emoji vue: emoji-vue - Emoji dropdown for Vue.js project

emoji-vue

? ? ? ? ? ? ? ? ? ? ?

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

dependencies status

Install ⚙️

npm i emoji-vue --save

emoji-vue preview image

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

Comments

  • emoji的位置问题
    emoji的位置问题

    Oct 31, 2018

    为什添加emoji的时候,会被添加到首行啊

                                                                                                                                                                                                           
    Reply
  • Emoji icon color issue
    Emoji icon color issue

    Apr 25, 2019

    Laravel2

    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.

    Reply
  • a small issue
    a small issue

    Mar 15, 2020

    1.how can I get the Emoticon in other place (怎么把输入的表情放在其他地方) 2.I want close the emoji panel when I pick Emoticon (我想在选了表情之后关闭表情选择的面板)

    Reply
  • line break review
    line break review

    Apr 3, 2020

    .emoji-picker-container { white-space: pre-wrap; } image

    Reply
  • Reset text input?
    Reset text input?

    Jan 19, 2019

    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.

    Reply
  • Doesn't work on VueJS 2.5.17
    Doesn't work on VueJS 2.5.17

    Sep 20, 2018

    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)
    
    Reply
  • I can't build when I use it
    I can't build when I use it

    Feb 18, 2019

    Is caused by UglifyJs,like that

    ERROR in static/js/vendor.336cc80736d2b58efdd2.js from UglifyJs
    undefined
      Build failed with errors.
    

    The log is as follows

    13 verbose stack Error: [email protected] build: `node build/build.js`
    13 verbose stack Exit status 1
    13 verbose stack     at EventEmitter.<anonymous> (D:\Program Files\Nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
    13 verbose stack     at EventEmitter.emit (events.js:182:13)
    13 verbose stack     at ChildProcess.<anonymous> (D:\Program Files\Nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
    13 verbose stack     at ChildProcess.emit (events.js:182:13)
    13 verbose stack     at maybeClose (internal/child_process.js:962:16)
    13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
    14 verbose pkgid [email protected]
    15 verbose cwd C:\Users\wangx\Projects\picture\picture-web
    16 verbose Windows_NT 6.1.7601
    17 verbose argv "D:\\Program Files\\Nodejs\\node.exe" "D:\\Program Files\\Nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
    18 verbose node v10.14.2
    19 verbose npm  v6.4.1
    

    thanks

    Reply
  • Maxlength prop feature
    Maxlength prop feature

    Oct 4, 2018

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

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

    Reply
  • Always add emoji at the beginning of the text
    Always add emoji at the beginning of the text

    Nov 2, 2018

    With you demo under Firefox 63.0 the emoji are inserted at the beginning of the text regardless of the caret position.

    Reply
  • 请问表情怎么在别处显示
    请问表情怎么在别处显示

    Aug 22, 2018

    想把他录入数据库,还能提取出来显示

                                                                                                                                                                                                           
    Reply