Vue implementiert das Senden von Emoticons im Chatfenster

<img v-else-if="chatItem.type === 3" :src="emojiUrl + emojiMap[chatItem.content]" style="width:25px;height:25px" />

<Vorlage>
  <div Klasse="Textelement-Wrapper" >
    <div Klasse="Textelement">
      <div :class="istMine ? 'element-send' : 'element-received'">
        <p>{{ Datum }}</p>
        <!-- Text -->
        <span>{{ chatItem.content }}</span>
        <span v-if="chatItem.type === 1">{{ chatItem.content }}</span>
        <!-- Ausdruck -->
        <img v-else-if="chatItem.type === 3" :src="emojiUrl + emojiMap[chatItem.content]" style="width:25px;height:25px" />
      </div>
      <div :class="isMine ? 'send-img' : 'received-img'">
        <img: src="chatItem.from_headimg" Breite="40px" Höhe="40px"/>
      </div>
    </div>
  </div>
</Vorlage>

<Skript>
  // decodeText importieren aus '../../../untils/decodeText'
  importiere { getFullDate } von '../../../untils/common'
  importiere {emojiMap, emojiUrl} von '../../../untils/emojiMap'

  Standard exportieren {
    Name: 'TextElement',
    Requisiten: ['chatItem', 'isMine'],
    Daten() {
      zurückkehren {
        emojiMap: emojiMap,
        emojiUrl: emojiUrl,
      }
    },
    berechnet: {
      // Inhaltsliste() {
      // decodeText(dieses.chatItem) zurückgeben
      // },
      // Zeitstempel Verarbeitungsdatum () {
        returniere getFullDate(neues Datum(this.chatItem.time * 1000))
      },
    }
  }
</Skript>

<Stilbereich>
  .text-element-wrapper {
    Position: relativ;
    maximale Breite: 360px;
    Rahmenradius: 3px;
    Worttrennung: Worttrennung;
    Rand: 1px durchgezogenes RGB (235, 235, 235);
  }

  .text-element {
    Polsterung: 6px;
  }

  .element-empfangen {
    maximale Breite: 280px;
    Hintergrundfarbe: #fff;
    schweben: rechts;
  }
  .empfangen-img {
    schweben: links;
    Polsterung rechts: 6px;
  }

  .element-senden {
    maximale Breite: 280px;
    Hintergrund: RGB (5, 185, 240);
    schweben: links;
  }
  .send-img {
    schweben: rechts;
  }
</Stil>

<Vorlage>    
 <Abschnitt Klasse="Dialog-Abschnitt Clearfix" >
            <div Klasse = "Zeile Clearfix" v-for = "(Element, Index) in msgs" :Schlüssel = Index>
                <img :src="item.uid == meineInfo.uid ? meineInfo.avatar :otherInfo.avatar" :class="item.uid == meineInfo.uid ? 'headerleft' : 'headerright'">
                <p :class="item.uid == myInfo.uid ? 'textleft' : 'textright'" v-html="customEmoji(item.content)"></p>
            </div>
        </Abschnitt>
         <div id="emoji-list" class="flex-column" v-if="emojiShow"> //Bestimmen Sie hiermit zunächst, ob das Emoji-Popup-Fenster angezeigt werden soll<div class="flex-cell flex-row" v-for="list in imgs">
                <div Klasse="flex-cell flex-row Zelle" v-for="Element in Liste" @click="inputEmoji(Element)">
                  <img :src="'./emoji/' + item + '.png'">
                </div>
              </div>
            </div>
</Vorlage>
<Skript>
import { sendMsg } from "@/ws"; //Dies ist eine lange Verbindung import _ from "lodash"; //Dies ist eine sehr leistungsfähige Bibliothek in js import eventBus from '@/eventBus' //Dies ist eine öffentliche Datei, die zwischen untergeordnetem und übergeordnetem Element übergeben wird console.log(emoji)
Standard exportieren {
  Daten() {
    this.imgs = _.chunk(emoji, 6) //Hiermit wird die Chunk-Methode der lodash-Bibliothek aufgerufen, um die sechs Elemente in ein Array aufzuteilen. Im Emoji-Array handelt es sich dabei lediglich um ein zweidimensionales Array. return {
      emojiShow: false //Zu Beginn wird die Klickschaltfläche standardmäßig nicht angezeigt. Um die Klickschaltfläche anzuzeigen, können Sie @click='emojiShow=emojiShow'} schreiben;
  },
  Methoden: {
    customEmoji(text) { //Diese Funktion wird vom Server verwendet, um den übergebenen Namen in ein Bild umzuwandeln. return text.replace(/\[([A-Za-z0-9_]+)\]/g, '<img src="./emoji/$1.png" style="width:30px; height:30px;">')
    },
    inputEmoji(Bild) {
      this.content += `[${pic}]` //Der übergebene Name wird in ein Bild umgewandelt}
};
</Skript>
<Stilbereich>
@import '../../assets/css/dialogue.css';

#Emoji-Liste {
  Höhe: 230px;
  Hintergrund: #fff;
}
#emoji-Liste .cell {
  Zeilenhöhe: 13vh;
  Rahmen rechts: 1rpx durchgezogen #ddd;
  Rahmen unten: 1rpx durchgezogen #ddd;
}
.flex-Zeile {
  Anzeige: Flex;
  Flex-Richtung: Reihe;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
}
.flex-Spalte {
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: strecken;
}
.flex-Zelle {
  biegen: 1;
}
.cell img {
  Breite: 35px;
  Höhe: 35px;
}
</Stil>