【study】vue-emoji插件

1、下载插件："emoji-mart-vue": "^2.6.6"

步骤：
1、安装：
    npm install emoji-mart-vue
    yarn add emoji-mart-vue
2、引入和使用 `Picker` 组件
    import Vue from 'vue';
    import App from './App.vue';
    import { Picker } from 'emoji-mart-vue';
    import 'emoji-mart-vue/css/emoji-mart.css'; // 样式

    Vue.component('Picker', Picker);

    new Vue({
      render: h => h(App),
    }).$mount('#app');
3、具体组件中使用 `Picker`可见下面

<template>
    <mc-modal
        v-model="show"
        title="emoji选框"
        width="500px"
    >
        <Picker
            @select="selectEmoji"
        />
    </mc-modal>
</template>
<script>
import { Picker } from 'emoji-mart-vue';
import 'emoji-mart-vue/css/emoji-mart.css';
import {
    ref,
} from '@vue/composition-api';

export default {
    components: {
        Picker,
    },
    setup(props, ctx) {
        const show = ref(false);
        const __popup = () => {
            show.value = true;
        };

        const selectEmoji = (val) => {
            ctx.emit('input', val);
            if (Object.keys(val).length > 0) {
                show.value = false;
            }
        };


        return {
            __popup,
            show,
            selectEmoji,
        };
    },
};
</script>