diff options
Diffstat (limited to 'src/components/emoji-input/emoji-input.vue')
| -rw-r--r-- | src/components/emoji-input/emoji-input.vue | 44 |
1 files changed, 25 insertions, 19 deletions
diff --git a/src/components/emoji-input/emoji-input.vue b/src/components/emoji-input/emoji-input.vue index b1f7afa5..48739ec8 100644 --- a/src/components/emoji-input/emoji-input.vue +++ b/src/components/emoji-input/emoji-input.vue @@ -1,27 +1,34 @@ <template> -<div class="emoji-input"> - <slot></slot> - <div ref="panel" class="autocomplete-panel" :class="{ hide: !showPopup }"> - <div class="autocomplete-panel-body"> - <div - v-for="(suggestion, index) in suggestions" - :key="index" - @click.stop.prevent="onClick($event, suggestion)" - class="autocomplete-item" - :class="{ highlighted: suggestion.highlighted }" + <div class="emoji-input"> + <slot /> + <div + ref="panel" + class="autocomplete-panel" + :class="{ hide: !showPopup }" + > + <div class="autocomplete-panel-body"> + <div + v-for="(suggestion, index) in suggestions" + :key="index" + class="autocomplete-item" + :class="{ highlighted: suggestion.highlighted }" + @click.stop.prevent="onClick($event, suggestion)" > - <span class="image"> - <img v-if="suggestion.img":src="suggestion.img" /> - <span v-else>{{suggestion.replacement}}</span> - </span> - <div class="label"> - <span class="displayText">{{suggestion.displayText}}</span> - <span class="detailText">{{suggestion.detailText}}</span> + <span class="image"> + <img + v-if="suggestion.img" + :src="suggestion.img" + > + <span v-else>{{ suggestion.replacement }}</span> + </span> + <div class="label"> + <span class="displayText">{{ suggestion.displayText }}</span> + <span class="detailText">{{ suggestion.detailText }}</span> + </div> </div> </div> </div> </div> -</div> </template> <script src="./emoji-input.js"></script> @@ -103,7 +110,6 @@ } } - input, textarea { flex: 1 0 auto; } |