Calculate display count from width
This commit is contained in:
parent
6cc3b239f6
commit
081a416103
@ -112,7 +112,8 @@ const EmojiPicker = {
|
|||||||
contentLoaded: false,
|
contentLoaded: false,
|
||||||
groupRefs: {},
|
groupRefs: {},
|
||||||
emojiRefs: {},
|
emojiRefs: {},
|
||||||
filteredEmojiGroups: []
|
filteredEmojiGroups: [],
|
||||||
|
width: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
@ -155,7 +156,6 @@ const EmojiPicker = {
|
|||||||
this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
|
this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
|
||||||
},
|
},
|
||||||
onScroll (startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
|
onScroll (startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
|
||||||
console.log('onScroll', startIndex, endIndex, visibleStartIndex, visibleEndIndex)
|
|
||||||
const target = this.$refs['emoji-groups'].$el
|
const target = this.$refs['emoji-groups'].$el
|
||||||
this.scrolledGroup(target, visibleStartIndex, visibleEndIndex)
|
this.scrolledGroup(target, visibleStartIndex, visibleEndIndex)
|
||||||
},
|
},
|
||||||
@ -221,6 +221,7 @@ const EmojiPicker = {
|
|||||||
},
|
},
|
||||||
onShowing () {
|
onShowing () {
|
||||||
const oldContentLoaded = this.contentLoaded
|
const oldContentLoaded = this.contentLoaded
|
||||||
|
this.recalculateItemPerRow()
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.search.focus()
|
this.$refs.search.focus()
|
||||||
})
|
})
|
||||||
@ -241,6 +242,14 @@ const EmojiPicker = {
|
|||||||
emojis: this.filterByKeyword(group.emojis, trim(this.keyword))
|
emojis: this.filterByKeyword(group.emojis, trim(this.keyword))
|
||||||
}))
|
}))
|
||||||
.filter(group => group.emojis.length > 0)
|
.filter(group => group.emojis.length > 0)
|
||||||
|
},
|
||||||
|
recalculateItemPerRow () {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (!this.$refs['emoji-groups']) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.width = this.$refs['emoji-groups'].$el.offsetWidth
|
||||||
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@ -252,6 +261,9 @@ const EmojiPicker = {
|
|||||||
this.filteredEmojiGroups = this.getFilteredEmojiGroups()
|
this.filteredEmojiGroups = this.getFilteredEmojiGroups()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mounted () {
|
||||||
|
this.recalculateItemPerRow()
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
minItemSize () {
|
minItemSize () {
|
||||||
return this.emojiHeight
|
return this.emojiHeight
|
||||||
@ -263,7 +275,7 @@ const EmojiPicker = {
|
|||||||
return 32 + 4
|
return 32 + 4
|
||||||
},
|
},
|
||||||
itemPerRow () {
|
itemPerRow () {
|
||||||
return 6
|
return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6
|
||||||
},
|
},
|
||||||
activeGroupView () {
|
activeGroupView () {
|
||||||
return this.showingStickers ? '' : this.activeGroup
|
return this.showingStickers ? '' : this.activeGroup
|
||||||
|
@ -82,6 +82,7 @@
|
|||||||
:items="emojiItems"
|
:items="emojiItems"
|
||||||
:emit-update="true"
|
:emit-update="true"
|
||||||
@update="onScroll"
|
@update="onScroll"
|
||||||
|
@visible="recalculateItemPerRow"
|
||||||
>
|
>
|
||||||
<template #default="{ item: group, index, active }">
|
<template #default="{ item: group, index, active }">
|
||||||
<DynamicScrollerItem
|
<DynamicScrollerItem
|
||||||
|
Loading…
Reference in New Issue
Block a user