<template>
	<p style="font-size:20px">&#128512;</p>
    <p>十進制：&#128512;</p>
    <p>十六進制：&#x1F600;</p>
    <p>&#9757;&#127999; 深色</p>
    <p>&#9757;&#127997; 中等色</p>
    <p>&#9757;&#127995; 淺膚色</p>
</template>

import 'font-awesome/css/font-awesome.css';

<template>
	<i class="fa fa-smile-o"></i>
  	<i class="fa fa-phone"></i>
  	<i class="fa fa-commenting-o"></i>
</template>

  customEmojis: Array<IEmoji>, // 默認：[]，自定義表情符號數(shù)組
  customCategories: Array<ICategory>, // 默認：[]，自定義分類數(shù)組
  limitFrequently: number, // 默認：15，頻繁使用的表情限制數(shù)量
  emojisByRow: number, 		// 默認：5，每行的表情數(shù)
  continuousList: boolean, // 默認：false，是否連續(xù)滾動列表
  emojiSize: number, 		// 默認：32，表情大小
  emojiWithBorder: boolean, // 默認：true，表情是否有邊框
  showSearch: boolean, 		// 默認：true，是否顯示搜索功能
  showCategories: boolean, // 默認：true，是否顯示分類選項
  dark: boolean, 			// 默認：false，暗黑模式
  initialCategory: string, // 默認："Peoples"，初始類別
  exceptCategories: Array<ICategory>, // 排除的類別數(shù)組，默認：[]
  exceptEmojis: Array<IEmoji>, // 排除的表情符號數(shù)組，默認：[]
  i18n: Object, 	// 國際化對象

// 第一步：在main.js引入emoji表情
import "font-awesome/css/font-awesome.css"; // 引入字體圖標
import VEmojiPicker from "v-emoji-picker"; // 引入emoji圖標
Vue.use(VEmojiPicker);

// 第二步：在組件中使用
<template>
  <div class="blog-container">
    <el-popover v-model="visibleEmoji" trigger="click">
      <VEmojiPicker @select="selectEmoji" />
      <i slot="reference" class="fa fa-smile-o"></i>
    </el-popover>
    <el-input v-model="inputValue" @blur="handleInputBlur" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      visibleEmoji: false,
      blurPos: undefined
    };
  },
  methods: {
    handleInputBlur(e) {
      this.blurPos = e.srcElement.selectionStart;
    },
    selectEmoji(emoji) {
      if (this.inputValue === undefined) {
        this.inputValue = emoji.data;
      } else if (
        this.blurPos === undefined ||
        this.blurPos === this.inputValue.length
      ) {
        this.inputValue = `${this.inputValue}${emoji.data}`;
      } else {
        this.inputValue =
          this.inputValue.slice(0, this.blurPos) +
          emoji.data +
          this.inputValue.slice(this.blurPos);
      }
      this.visibleEmoji = false;
    }
  }
};
</script>

<style lang="less" scoped>
.blog-container {
  padding: 10px;
}
</style>

[
  "smileys_people",
  "animals_nature",
  "food_drink",
  "activities",
  "travel_places",
  "objects",
  "symbols",
  "flags"
]

{
  "smileys_people": "微笑與人物",
  "animals_nature": "動物與自然",
  "food_drink": "食物與飲料",
  "activities": "活動",
  "travel_places": "旅行與地點",
  "objects": "物體",
  "symbols": "符號",
  "flags": "旗幟"
}

// 使用了TypeScript，需要在 .d.ts 文件中添加模塊聲明
declare module 'vue3-emoji-picker';

// 組件中使用
<template>
  <div class="warpper">
    <a-popover title=" " v-model:visible="showEmoji" trigger="click">
      <template #content>
        <Vue3EmojiPicker :native="true" @select="chooseEmoji" />
      </template>
      <i class="fa fa-smile-o" @click="showEmoji = !showEmoji"></i>
    </a-popover>
    <a-input
      v-model:value="inputValue"
      @blur="handleInputBlur"
      placeholder="請輸入"
    >
    </a-input>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Input, Popover } from "ant-design-vue";
import Vue3EmojiPicker from "vue3-emoji-picker"; // 引入emoji表情組件
import "vue3-emoji-picker/css"; // 引入樣式

const showEmoji = ref<boolean>(false); // 是否顯示表情
const inputValue = ref<string | undefined>(undefined); // 輸入框的值
const blurPos = ref<number>(0); // 光標位置

// 獲取光標位置
function handleInputBlur(e) {
  blurPos.value = e.srcElement.selectionStart;
}

/* 選擇表情事件
  emoji示例:
    {
      n: ["face with tears of joy", "joy"],
      u: "1f602",
      r: "1f602",
      t: "neutral",
      i: "??",
    }
*/
function chooseEmoji(emoji) {
  if (inputValue.value === undefined) {
    inputValue.value = emoji.i;
  } else if (blurPos.value === undefined || blurPos.value === inputValue.value.length) {
    inputValue.value = `${inputValue.value}${emoji.i}`;
  } else {
    inputValue.value =
      inputValue.value.slice(0, blurPos.value) +
      emoji.i +
      inputValue.value.slice(blurPos.value);
  }
  showEmoji.value = false;
}
</script>

<style scoped>
.warpper {
  padding: 40px;
  border: 1px solid #ccc;
}

.emoji-wrap {
  text-align: left;
}
</style>

<template>
  <div class="blog-container">
    <VueEmoji ref="emoji" :value="inputText" @input="onInput"></VueEmoji>
    <el-button type="primary" size="mini" @click="clearInput">清除</el-button>
  </div>
</template>

<script>
import VueEmoji from "emoji-vue";

export default {
  components: {
    VueEmoji
  },
  data() {
    return {
      inputValue: "",
      visibleEmoji: false,
      blurPos: undefined,
      inputText: ""
    };
  },
  methods: {
    onInput(emoji) {
      console.log(emoji);
    },
    clearInput() {
      this.$refs.emoji.clear();
    }
  }
};
</script>

<style lang="less" scoped>
.blog-container {
  padding: 10px;
}
</style>