表情符号 unicode_高度可定制的Unicode表情符号选择器

表情符号 unicode

高度可定制的Vue 2表情符号选择器 (Highly-customizable emoji picker for Vue 2)

Very simple, yet powerful, vue emoji picke.

非常简单但功能强大的Vue表情符号选择器。

Simple, html-only demo 简单，仅html演示 Complete, css-styled demo 完整，css样式的演示 TailwindCSS-styled demo TailwindCSS样式的演示 Download Source 下载源

安装 (Installation)

与npm (With npm)

npm i vue-emoji-picker --save

带有CDN (With a CDN)

<script src="https://unpkg.com/vue-emoji-picker/dist/vue-emoji-picker.js"></script>

进口 (Import)

使用ES6捆绑器(通过npm) (With an ES6 bundler (via npm))

每个组件的使用 (Use per component)

import EmojiPicker from 'vue-emoji-picker'

export default {
    // ...
    components: {
        EmojiPicker,
    },
    // ...
}

全球使用 (Use globally)

import { EmojiPickerPlugin } from 'vue-emoji-picker'
Vue.use(EmojiPickerPlugin)

使用CDN (Using a CDN)

<script>
    Vue.use(EmojiPicker)

    new Vue({
        // ...
    })
</script>

用法 (Usage)

vue-emoji-picker is a slot-based component, to provide maximum flexibility. Since every ounce of html is created by a consumer (ie. you), you can customize every piece of the component as you wish.

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

使用非常简单，没有定义任何CSS (Very simple usage, without any CSS defined)

You will need two things. A textarea (or an input), where emojis will be injected, and a component declaration. A simple example is provided below.

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

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

<emoji-picker @emoji="insert" :search="search">
    <div class="emoji-invoker" slot="emoji-invoker" slot-scope="{ events }" v-on="events">
        <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">
                    <h5>{{ category }}</h5>
                    <div>
                        <span
                            v-for="(emoji, emojiName) in emojiGroup"
                            @click="insert(emoji)"
                            :title="emojiName"
                        >{{ emoji }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</emoji-picker>

{
    data() {
        return {
            input: '',
            search: '',
        }
    },
    methods: {
        insert(emoji) {
            this.input += emoji
        },
    },
}

As you may see, you have to declare some things yourself. Namely:

如您所见，您必须自己声明一些内容。 即：

• input - a model for your input/textarea,

  input -输入/文本区域的模型，

• search - a model for the search box inside the component (optional),

  search组件内部搜索框的模型(可选)，

• insert(emoji) - a method responsible to put emojis into your input/textarea. Provided emoji is a string representation of the emoji to be inserted.

  insert(emoji) -一种负责insert(emoji)放入您的输入/文本区域的方法。 提供的emoji是要插入的表情符号的字符串表示形式。

CSS样式的示例 (CSS-styled example)

To see what is possible with the component, you can simply have a look at a demo available here.

要了解该组件可能提供的功能，您只需在此处查看一个演示即可。

可用道具 (Available props)

• search optional - If you are not using the search functionality, you can omit this one. It should be a model of the search passed from your data.

  search 可选 -如果您不使用搜索功能，则可以忽略此功能。 它应该是从您的data传递的搜索的模型。

• emojiTable optional - You can overwrite the default emoji table by providing your own.

  emojiTable 可选 -您可以通过提供自己的覆盖emoji表的默认值 。

插槽 (Slots)

• emoji-invoker

  emoji-invoker

  • events - delares the events -删除v-on:click toggle of the picker box,v-on:click选择器框的切换，

• emoji-picker

  emoji-picker

  • emojis - object of unicode emojis,emojis对象，
  • insert() - method to be invoked when an emoji is clicked,insert() -单击表情符号时要调用的方法，
  • display - object containting display -对象containting x, x ， y and y和visible properties.visible性。

翻译自: https://vuejsexamples.com/highly-customizable-unicode-emoji-picker/

表情符号 unicode