electron-webpack-vue中使用v-emoji-picker

安装v-emoji-picker

npm i v-emoji-picker
或
yanr add v-emoji-picker

引入组件

• 全局引入

import VEmojiPicker  from 'v-emoji-picker'

Vue.use(VEmojiPicker )

-局部引入

import { VEmojiPicker  } from 'v-emoji-picker'

components: {
  VEmojiPicker 
}

使用组件

在一般的vue项目中直接使用就可以，但是如果是在electron-webpack或者electron-vue类似的框架中，直接使用会出现报错

[Vue warn]: $attrs is readonly. 
[Vue warn]: $listeners is readonly

这是因为v-emoji-picker会独自加载一个外部vue实例，这就造成vue实例重复加载，所以建议新开一个组件，嵌套一下v-emoji-picker。
并且vue需要安装到全局依赖dependencies中，否则在打包时，e-emoji-picker会报错找不到vue这个依赖包

结尾附上一些v-emoji-picker的常用属性和事件

-属性

{
  @Prop({ default: () => [] }) customEmojis!: IEmoji[];
  @Prop({ default: () => [] }) customCategories!: ICategory[];
  @Prop({ default: 15 }) limitFrequently!: number;
  @Prop({ default: 5 }) emojisByRow!: number;
  @Prop({ default: false }) continuousList!: boolean;
  @Prop({ default: 32 }) emojiSize!: number;
  @Prop({ default: true }) emojiWithBorder!: boolean;
  @Prop({ default: true }) showSearch!: boolean;
  @Prop({ default: true }) showCategories!: boolean;
  @Prop({ default: false }) dark!: boolean;
  @Prop({ default: "Peoples" }) initialCategory!: string;
  @Prop({ default: () => [] as ICategory[] }) exceptCategories!: ICategory[];
  @Prop({ default: () => [] as Emoji[] }) exceptEmojis!: IEmoji[];
  @Prop({}) i18n!: Object;
}

-事件

{
  select: 'Emit event on Selected Emoji',
  changeCategory: 'Emit event on Change Category'
}