Vue强大的表情符号选择器 - vue-emoji-picker

Vue强大的表情符号选择器 - vue-emoji-picker
插件名称 vue-emoji-picker
版本号 v1.0.3
发布时间 2020年9月4日
插件作者 DCzajkowski

一个简单但可高度自定义的Vue 2表情符号选择器。

安装和下载:

# NPM
$ npm install vue-emoji-picker --save

用法

vue-emoji-picker是基于插槽的组件,可提供最大的灵活性。由于每一盎司的html是由使用者(即您)创建的,因此您可以根据需要自定义组件的每一部分。

使用非常简单,没有定义任何CSS

您将需要两件事。一个文本区域(或输入),其中将插入表情符号,以及一个组件声明。下面提供了一个简单的示例。

<textarea v-model="input"></textarea>

<emoji-picker @emoji="insert" :search="search">
  <div slot="emoji-invoker" slot-scope="{ events: { click: clickEvent } }" @click.stop="clickEvent">
    <button type="button">open</button>
  </div>
  <div slot="emoji-picker" slot-scope="{ emojis, insert, display }">
    <div>
      <div>
        <input type="text" v-model="search">
      </div>
      <div>
        <div v-for="(emojiGroup, category) in emojis" :key="category">
          <h5>{{ category }}</h5>
          <div>
            <span
              v-for="(emoji, emojiName) in emojiGroup"
              :key="emojiName"
              @click="insert(emoji)"
              :title="emojiName"
            >{{ emoji }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</emoji-picker>
{
  data() {
    return {
      input: '',
      search: '',
    }
  },
  methods: {
    insert(emoji) {
      this.input += emoji
    },
  },
}

变更日志:

v1.0.3 (06/16/2021)

  • 固定搜索不适用于正则表达式特殊字符