debug

src/components/emoji_picker/emoji_picker.js

@@ -106,9 +106,6 @@ const EmojiPicker = {
     }
   },
   inject: ['popoversZLayer'],
-  mounted () {
-    this.updateEmojiSize()
-  },
   data () {
     return {
       keyword: '',
@@ -136,10 +133,15 @@ const EmojiPicker = {
   methods: {
     updateEmojiSize () {
       const css = window.getComputedStyle(this.$refs.popover.$el)
+      console.log('CSS', css)
       const emojiSize = css.getPropertyValue('--emojiSize')
+      console.log('CSS', emojiSize)
       const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '')
-      const emojiSizeValue = emojiSize.replace(/[^0-9,.]+/, '')
-      const fontSize = css.getPropertyValue('font-size').replace(/[^0-9,.]+/, '')
+      console.log('CSS', emojiSizeUnit)
+      const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, ''))
+      console.log('CSS', emojiSizeValue)
+      const fontSize = Number(emojiSize.replace(css.getPropertyValue('font-size').replace(/[^0-9,.]+/, '')))
+      console.log('CSS', fontSize)
 
       let emojiSizeReal
       if (emojiSizeUnit.endsWith('em')) {
@@ -245,6 +247,7 @@ const EmojiPicker = {
     },
     onShowing () {
       const oldContentLoaded = this.contentLoaded
+      this.updateEmojiSize()
       this.recalculateItemPerRow()
       this.$nextTick(() => {
         this.$refs.search.focus()
@@ -305,9 +308,10 @@ const EmojiPicker = {
     itemPerRow () {
       console.log(
         this.emojiWidth,
+        this.emojiSize,
         this.width
       )
-      return this.width ? Math.floor(this.width / this.emojiWidth) : 6
+      return this.width ? Math.floor(this.width / this.emojiSize) : 6
     },
     activeGroupView () {
       return this.showingStickers ? '' : this.activeGroup