#101 - bind scroll event, highlight relevent section by tabs

This commit is contained in:
jared 2019-04-05 14:51:25 -04:00
parent 093f0b23f7
commit b4e53576f2
2 changed files with 21 additions and 5 deletions

View File

@ -6,7 +6,8 @@ const EmojiSelector = {
data () { data () {
return { return {
open: false, open: false,
keyword: '' keyword: '',
activeGroup: 'standard'
} }
}, },
methods: { methods: {
@ -17,6 +18,20 @@ const EmojiSelector = {
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} `)
this.open = false this.open = false
},
highlight (key) {
const ref = this.$refs['group-' + key]
const top = ref[0].offsetTop
this.$refs['emoji-groups'].scrollTop = top + 1
this.activeGroup = key
},
scrolledGroup (e) {
const top = e.target.scrollTop
Object.keys(this.emojis).forEach(key => {
if (this.$refs['group-' + key][0].offsetTop < top) {
this.activeGroup = key
}
})
} }
}, },
computed: { computed: {

View File

@ -5,7 +5,7 @@
</span> </span>
<div class="emoji-dropdown-menu panel panel-default" v-if="open"> <div class="emoji-dropdown-menu panel panel-default" v-if="open">
<div class="panel-heading emoji-tabs"> <div class="panel-heading emoji-tabs">
<span class="emoji-tabs-item" v-for="(value, key) in emojis" :key="key" :title="value.text"> <span class="emoji-tabs-item" :class="{'active': activeGroup === key}" v-for="(value, key) in emojis" :key="key" :title="value.text" @click.prevent="highlight(key)">
<i :class="value.icon"></i> <i :class="value.icon"></i>
</span> </span>
</div> </div>
@ -13,9 +13,9 @@
<div class="emoji-search"> <div class="emoji-search">
<input type="text" class="form-control" v-model="keyword" /> <input type="text" class="form-control" v-model="keyword" />
</div> </div>
<div class="emoji-groups"> <div class="emoji-groups" ref="emoji-groups" @scroll="scrolledGroup">
<div v-for="(value, key) in emojis" :key="key" class="emoji-group"> <div v-for="(value, key) in emojis" :key="key" class="emoji-group">
<h6 class="emoji-group-title">{{value.text}}</h6> <h6 class="emoji-group-title" :ref="'group-' + key">{{value.text}}</h6>
<span <span
v-for="emoji in value.emojis" v-for="emoji in value.emojis"
:key="key + emoji.shortcode" :key="key + emoji.shortcode"
@ -78,7 +78,7 @@
&-item { &-item {
padding: 0 5px; padding: 0 5px;
&:first-child, &.active { &.active {
border-bottom: 4px solid; border-bottom: 4px solid;
i { i {
@ -96,6 +96,7 @@
&-groups { &-groups {
flex: 1 1 1px; flex: 1 1 1px;
overflow: auto; overflow: auto;
position: relative;
} }
&-group { &-group {