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