微信表情选择

gitee仓库代码

#企微开发使用微信发送自定义欢迎语表情选择#

效果图

组件使用

<template>
  <div id="app">
    <emotion :width="500" :content="content" @getChildInfo="getChildInfo"></emotion>
  </div>
</template>

<script>
import emotion from "./components/emotion/emotion";
export default {
  name: 'App',
  components: {
    emotion
  },
  data(){
    return{
      content:''
    }
  },
  methods:{
    //执行方法
    getChildInfo(value) {
      this.content = value
    },
  }
}
</script>

封装组件

<template>
  <div :style="{width: width + 'px' }">
    <el-input
        style="width: 100%;"
        :rows="10"
        type="textarea"
        placeholder="请输入内容"
        v-model="contentShow"
        :maxlength="maxText"
        @blur="handleInputBlur"
        show-word-limit
        :disabled="disabled"
    ></el-input>
    <div>
      <div class="emoji-box">
        <div @click="handleEmoji" class="cursor emoji-box"><img :src="emoji" alt="">添加表情</div>
        <div v-if="customerStatus" class="btm cursor" @click="addCustomer">客户昵称</div>
      </div>


      <div style="position: relative;" v-show="showEmoji">
        <div v-if="url" :style="{height: height}" class="qqface-container">
          <span class="qqface-wrapper" v-for="[key, value] of Object.entries(emoijs)" :key="value">
            <img :src="url" class="qqface" :class="[`qqface${value}`]" @click="input(key)">
          </span>
        </div>
      </div>

    </div>
    <div v-if="!!contentShowEmoji">
      <h5>效果展示</h5>
      <div class="text-show-box" v-html="contentShowEmoji"></div>
    </div>
  </div>
</template>

<script>
import emoji from "../../utils/emoji";
import qqface from '../../assets/qqface.png'
import { deleteEmoji, qqfaceArr } from '../../utils/util'
export default {
  name: "emotion",
  props: {
    width: {
      type: Number,
      default: 200,
    },
    content: {
      type: String,
      default: '',
    },
    button: {
      type: Boolean
    },
    height: {
      type: String,
      default: '200px'
    },
    maxText:{
      type: Number,
      default: 2000,
    },
    customerStatus:{
      type: Boolean,
      default: false,
    },
    disabled:{
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      emoji: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFIGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMDQtMjRUMTc6MzA6MzArMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTA0LTI3VDE3OjQ0OjM3KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA0LTI3VDE3OjQ0OjM3KzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmEzMmQ1YjE2LWNkZjUtNDk5My1iMDc2LTg5NDIwMzBjMjIyMiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDphMzJkNWIxNi1jZGY1LTQ5OTMtYjA3Ni04OTQyMDMwYzIyMjIiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphMzJkNWIxNi1jZGY1LTQ5OTMtYjA3Ni04OTQyMDMwYzIyMjIiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmEzMmQ1YjE2LWNkZjUtNDk5My1iMDc2LTg5NDIwMzBjMjIyMiIgc3RFdnQ6d2hlbj0iMjAxOS0wNC0yNFQxNzozMDozMCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+GUGtVwAAAkZJREFUSIm11j1onVUcx/HPNZKAEBxcfEEQRBShU9SYQCAUOhqTxqTEwamo2RzNXxC6/Okg6ObSJR1Cmwgam4BL2iyaUloEJVIhg/gSV1/Q4YLE4Tk3PPfm3twg5g8PPM95+f7OOf+X8zQODg6cpj1wqnQ8eFxnZg5iujxjeBxN/Iyv8SnWI6LZi9FzB5k5g128hW2cwzAewSul7W3sZub5XpxGpw8ycwCJKSxGxHbvPZKZk/gYnyMi4p9+O0i8jNF+cBVxGy9htMxtszaBzHwNr2IqIv7oB6+J/NmaVxiHdnhExaF7WIiIL08K71jgOK7j6Zbj6zuYw/f/FQ4R8RXuY77VVheYxmrHinYyc7nPqpczc6fWtFpYRwRexK0ujH7J2Oj4vokXWh/1RHsUP9ZHRsRYH7iIeKOj6Sc81k2giSE0M7OJv3DSQtXAUEQ81NlRF/gVT6ictIcLEfHtSeiZeUYVPfBkYaH9fL/BRHnfUIuEE9gsvijvZ3G3m8BnNehHeDMzn+lHLmMW8UFpmi+sIwJreDYzxyNiH+9h8ziR0repqkH7mTmG5woLHcUuM+dwCWMR8Xtmvo4PcQXX8F0Z+jwWcBHvRMRKZj6M23g/Ig4F2mK8dGxgPTOHI2JFFdMDWMHf+A1XVRE2UuDDWMeNOpzuF86Sygd3MrNVrt8tT7djmlSV660yt82O3Ae1ibO4jB9U6b+lSqJBVShOqBz6FJYi4pNunJ4CRWRQVQRnMKLKE/gF91RX5tpxV+axAv+Hnfpfx