vuejs-emoji for Vuejs 2.x

Vue2.x emoji plugin and autoload fontawesome(^4.7.0) and bootstrap(^3.2.x)

Install

# install
$ npm install vuejs-emoji --save

Requirement Dependencies

1、Vue-cli

  • Vue-cli install
# install
$ npm install -g vue-cli
  • using cli create project
$ vue init webpack my-project

More Vue-cli docs

2、Emoji Resources Download

  • Download static.zip
  • Unzip static.zip file, then override project static folder
    projectstruct

Usage

ES6

import Vue2Emoji from 'vuejs-emoji'
Vue.use(Vue2Emoji)

Using directive in template

<emoji-icon @select="selectIcon", :iconConfig="iconConfig"></emoji-icon>

SelectCallback & IconConfig

  • SelectCallback = selectIcon(val)
    SelectCallback function's val is a html content.
<div v-html="val"></div>
  • IconConfig is Object
  var iconConfig = {
    placement: 'top',
    size: '30px',
    name: 'fa-send', // font awesome icon name
    color: '#fff' // icon color: hex、rgb or rgba value
  }

Font awesome website

Get Kaomoji

Detail IconConfig

key default type intro
placement 'top' String 'top'、'left'、'right'、'bottom'
size '30px' String also can use rem, eg: '1rem'
name 'fa-smile-o' String just use font awesome icon name
color '#278dff' String can use hex、rgb、rgba value

Live Demo

qrcode

Screen Capture

vue2emojivedio

GitHub