vuejs-emoji

Vue2.x emoji plugin and autoload font awesome and bootstrap
1,385 31
Install
npm install vuejs-emoji
Latest Version:0.1.8
License:MIT
Last Updated:Apr 25, 2018
Links: GitHub  ·  npm
Maintainer: lenvonsam

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 Alt text

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

Alt text

Screen Capture

Alt text

License

MIT

Related Packages

nuxt-emoji

An Emoji component for your Nuxt 3 project.

7,980 33
vuemoji-picker

Vue 2 and 3 lightweight emoji picker.

124,448 72
@zaichaopan/emoji-picker

An elegant emoji picker built with Vue.

6,947
@imndx/v-emoji-picker-vue3

Base on joaoeudes7's V-Emoji-Picker , add sticker support,增加动态表情支持。

3,357 1

Version History

Version Released License
0.1.8 MIT
0.1.7 MIT
0.1.6 MIT
0.1.5 MIT