#101 - click outside of emoji implementation
This commit is contained in:
parent
820a6543c7
commit
2ab915b486
2 changed files with 15 additions and 3 deletions
|
@ -3,6 +3,12 @@ const filterByKeyword = (list, keyword = '') => {
|
|||
}
|
||||
|
||||
const EmojiSelector = {
|
||||
mounted () {
|
||||
document.body.addEventListener('click', this.outsideClicked)
|
||||
},
|
||||
destroyed () {
|
||||
document.body.removeEventListener('click', this.outsideClicked)
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
open: false,
|
||||
|
@ -14,6 +20,12 @@ const EmojiSelector = {
|
|||
togglePanel () {
|
||||
this.open = !this.open
|
||||
},
|
||||
insideClicked (e) {
|
||||
e.stopPropagation()
|
||||
},
|
||||
outsideClicked () {
|
||||
this.open = false
|
||||
},
|
||||
onEmoji (emoji) {
|
||||
const value = emoji.image_url ? `:${emoji.shortcode}:` : emoji.utf
|
||||
this.$emit('emoji', ` ${value} `)
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="emoji-dropdown">
|
||||
<span class="emoji-dropdown-toggle" @click="togglePanel">
|
||||
<div class="emoji-dropdown" @click.prevent="insideClicked">
|
||||
<span class="emoji-dropdown-toggle" @click.prevent="togglePanel">
|
||||
<i class="icon-smile"></i>
|
||||
</span>
|
||||
<div class="emoji-dropdown-menu panel panel-default" v-if="open">
|
||||
|
@ -48,7 +48,7 @@
|
|||
&-toggle {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
top: -23px;
|
||||
right: 2px;
|
||||
line-height: 1;
|
||||
|
||||
|
|
Loading…
Reference in a new issue