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

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

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

Screen Capture

License

MIT