您身边的emoji选择利器：vue3emoji，小巧且强大，赶快来体验！

2023-09-28 14:50:04

vue3emoji是一个小巧、强大的emoji选择组件，它支持自定义板块、自定义尺寸、自定义主题等多种功能，可以帮助您快速、轻松地创建出属于自己的emoji选择组件。

vue3emoji组件的特点

小巧： vue3emoji的体积非常小，仅有几KB，不会对您的应用程序造成任何性能负担。
强大： vue3emoji支持多种功能，包括自定义板块、自定义尺寸、自定义主题等，可以满足您不同的需求。
易用： vue3emoji非常易于使用，您只需要将其导入您的项目中，然后在模板中使用它即可。

vue3emoji组件的使用方法

1. 安装vue3emoji组件

npm install vue3emoji

2. 导入vue3emoji组件

import Vue3emoji from 'vue3emoji'

3. 在模板中使用vue3emoji组件

<template>
  <vue3emoji></vue3emoji>
</template>

vue3emoji组件的属性

vue3emoji组件提供了多种属性，您可以通过这些属性来自定义组件的外观和行为。

1.板块属性

plates： 板块数据，可以自定义板块内容。
activePlate： 当前板块索引，用于指定当前板块。
plateSize： 板块尺寸，可以自定义板块大小。

2.尺寸属性

size： 组件尺寸，可以自定义组件大小。

3.主题属性

theme： 组件主题，可以自定义组件主题。

vue3emoji组件的事件

vue3emoji组件提供了多种事件，您可以通过这些事件来监听组件的状态变化。

1.板块事件

plate-change： 当板块发生变化时触发。

2.尺寸事件

size-change： 当组件尺寸发生变化时触发。

3.主题事件

theme-change： 当组件主题发生变化时触发。

vue3emoji组件的示例

1.基本示例

<template>
  <vue3emoji></vue3emoji>
</template>

2.自定义板块示例

<template>
  <vue3emoji :plates="plates"></vue3emoji>
</template>

<script>
export default {
  data() {
    return {
      plates: [
        {
          name: '常用',
          emojis: [
            '😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊',
          ],
        },
        {
          name: '动物',
          emojis: [
            '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯',
          ],
        },
      ],
    }
  },
}
</script>

3.自定义尺寸示例

<template>
  <vue3emoji :size="size"></vue3emoji>
</template>

<script>
export default {
  data() {
    return {
      size: 'large',
    }
  },
}
</script>

4.自定义主题示例

<template>
  <vue3emoji :theme="theme"></vue3emoji>
</template>

<script>
export default {
  data() {
    return {
      theme: 'dark',
    }
  },
}
</script>