表情包 ​

<template>
  <el-radio-group v-model="type" @change="handleChange">
    <el-radio-button label="文本" value="text" />
    <el-radio-button label="标识" value="code" />
    <el-radio-button label="图片" value="image" />
  </el-radio-group>
  <p>绑定值: {{ value }} <img v-if="type === 'image'" :src="value" /></p>
  <el-emoticon v-model="value" :type="type" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
const type = ref('text')

const handleChange = () => {
  value.value = ''
}
</script>

<template>
  <p style="font-size: 30px">绑定值: {{ value }}</p>
  <el-font-emoticon v-model="value" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

<template>
  <el-emoji v-model="value" @click-tab="handleTab">
    <template #trigger>
      <el-button text>文字表情</el-button>
    </template>
  </el-emoji>

  <el-emoji v-model="value2" type="image">
    <template #trigger>
      <el-button text>图片表情</el-button>
    </template>
  </el-emoji>

  <pre>{{ value }}</pre>
  <pre style="font-size: 24px">{{ value2 }}</pre>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref()
const value2 = ref()

const handleTab = (tab: string) => {
  console.log(tab)
}
</script>

<template>
  <el-emoji v-model="text">
    <template #trigger>
      <el-button>点我试试</el-button>
    </template>
  </el-emoji>

  <p>原生文案: {{ text }}</p>
  <div v-html="imgHtml" />
</template>

<script setup>
import { computed, ref } from 'vue'
import { emotionParser } from 'element-plus-x'

const text = ref()
const imgHtml = computed(() =>
  emotionParser(`<p>当前被选中的图片是</p>${text.value ? text.value : ''}`)
)

console.log(emotionParser(`早上好[流泪]`))
// 早上好<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/5.gif" alt="[流泪]">
</script>