Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rishiqing/vue-emoji
An emoji component for vue2.0
https://github.com/rishiqing/vue-emoji
emoji vue-components vue2
Last synced: about 2 months ago
JSON representation
An emoji component for vue2.0
- Host: GitHub
- URL: https://github.com/rishiqing/vue-emoji
- Owner: rishiqing
- License: mit
- Created: 2017-03-17T08:52:03.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-05-12T07:33:27.000Z (over 7 years ago)
- Last Synced: 2024-04-25T07:43:15.854Z (8 months ago)
- Topics: emoji, vue-components, vue2
- Language: CSS
- Homepage: https://rishiqing.github.io/vue-emoji/examples/
- Size: 8.27 MB
- Stars: 38
- Watchers: 7
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README-EN.MD
- Changelog: CHANGELOG
- License: LICENSE
Awesome Lists containing this project
README
# vue-emoji
An Emoji component for Vue2.0
## Install
```
yarn add rui-vue-emoji
```
## Usage
```html
```
```html
Vue-Emoji
emoji
```
```js
new Vue({
el: '#app',
components: {
VueEmoji
},
data () {
return {
showEmoji : false
}
},
mounted () {
this.$refs.emoji.appendTo({
area: this.$refs.edit,
btn: this.$refs.btn,
position: 'top left'
});
},
methods: {
hide () {
this.showEmoji = false;
},
handleHide (e) {
this.hide();
}
}
});
```
### Used with webpack
```js
// styles.js
import 'rui-vue-emoji/dist/vue-emoji.css';
```
You may also consider using the emoji-sprite and single emoji-picture with `CDN`, you can upload images in `./images` to your CDN and then you need to make some little changes in your css and js files.
```css
[class*="sprite-"] {
background-image: url("https://your.cdn.path/")!important;
}
```
```js
mounted () {
this.$refs.emoji.appendTo({
area: this.$refs.edit,
btn: this.$refs.btn,
position: 'top left'
}).setPath('https://your.cdn.path/');
},
```
Something you need to notice is that you should control the sprite path in your css file and single emoji picture path in js file.
## Options
### event
* `select`: When a emoji is selected, the `select`event will be triggerd. The only parameter is an `img` element.
* `hide`: When `hide` event is triggerd, you need to close the emoji-pop in the parent component. It always triggerd when an element in page is clicked, and the click event object will be passed as the param.
### Methods
#### `appendTo`
You need to call this method when the parent component mounted to initialilze the params of emoji component. An object at least contains two properties `area` and `btn` should be passed as param. `area` means the element you want the emoji inserted and `btn` means the button is used to trigger emoji pop. The property `position` is optional. It can decide the emoji-pop's postion relative to the button. The default value is `top center`, means the emoji-pop is on the top of button and in the horizontal direction it's center is button. You can use `top` or `bottom` for vertical and `left`,`center` or `right` for horizontal.
#### `calcPosition`
This method is used to recalc the position of emoji pop, when the content of element `[contenteditable]` added, usually it's height will be changed, so we need to recalc the position of pop. But unfortunately I cannot find a way to listen to the change of height automaticaly, so you should listen it manualy, and then called the method.
`app.vue`
```js
watch: {
showEmoji (value) { // showEmoji is the prop that control the pop's display.
if (value) {
this.$refs.emoji.calcPosition();
}
}
}
```
### Props
#### `unicode`
By default, when an emoji is selected, a corresponding img will be generated and inserted to the area you specified. You can make it support `Unicode` to config the `unicode` prop. It means that in this situation, when an emoji is selected, a corresponding `Unicode char` will be inserted. The thing you should be aware of is that when you use `unicode`, the emoji you can select is less than you use img.
```html
```
#### `captions`
By default, component uses Chinese as captions for different emoji panels like `表情、自然、物品、地点、符号`. If you want to use others, you can passed `captions` props in vue-template. The captions should be an Array, and each item should be a string.
```html
```
```js
data () {
return {
captions: ['Expressions', 'Nature', 'Goods', 'Lacation', 'Symbol']
}
}
```
## Development
```
git clone [email protected]:rishiqing/vue-emoji.git
cd vue-emoji
yarn
npm start
```
### Some Problems
Because I've just used Vue for a little time, so this component has too many problems. Such as I hope that I can pass some props in `template` to instead of calling `appendTo` method of component after it's parent mounted. I think the current implementation is an ugly hack, but after I tried too many times, I cannot still find a good way to pass some references of other DOM nodes to child component when parent component is rendering it. Of course, maybe the most important reason is that I've made a wrong design with this, so if you have a better way to solve it, please tell me, thanks a lot.