Vue2.x emoji plugin and autoload fontawesome

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

Bash
Requirement Dependencies
1、Vue-cli
Vue-cli install
# install
$ npm install -g vue-cli
Bash
using cli create project
$ vue init webpack my-project
Bash
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)
JavaScript
Using directive in template
<emoji-icon @select="selectIcon", :iconConfig="iconConfig"></emoji-icon>
HTML
SelectCallback & IconConfig
SelectCallback = selectIcon(val)
SelectCallback function's val is a html content.
<div v-html="val"></div>
HTML
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
}
Js
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

画像1

qrcodeScreen Capture


画像2


この記事が気に入ったらサポートをしてみませんか?