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
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
qrcodeScreen Capture
この記事が気に入ったらサポートをしてみませんか?