Vue はチャット ボックスで絵文字を送信する機能を実装します

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

<テンプレート>
  <div class="テキスト要素ラッパー" >
    <div class="テキスト要素">
      <div :class="isMine ? '要素送信' : '要素受信'">
        <p>{{ 日付 }}</p>
        <!-- テキスト -->
        <span>{{ チャットアイテム.content }}</span>
        <span v-if="chatItem.type === 1">{{chatItem.content }}</span>
        <!-- 式 -->
        <img v-else-if="chatItem.type === 3" :src="emojiUrl + emojiMap[chatItem.content]" style="width:25px;height:25px" />
      </div>
      <div :class="isMine ? '送信画像' : '受信した画像'">
        <img :src="chatItem.from_headimg" 幅="40px" 高さ="40px"/>
      </div>
    </div>
  </div>
</テンプレート>

<スクリプト>
  // '../../../untils/decodeText' から decodeText をインポートします
  '../../../untils/common' から { getFullDate } をインポートします
  '../../../untils/emojiMap' から {emojiMap, emojiUrl} をインポートします。

  エクスポートデフォルト{
    名前: 'テキスト要素',
    プロパティ: ['chatItem', 'isMine'],
    データ（） {
      戻る {
        絵文字マップ: 絵文字マップ、
        絵文字URL: 絵文字URL,
      }
    },
    計算: {
      // コンテンツリスト() {
      // decodeText(this.chatItem) を返す
      // },
      // タイムスタンプ処理日 () {
        getFullDate を返します(新しい Date(this.chatItem.time * 1000))
      },
    }
  }
</スクリプト>

<スタイルスコープ>
  .テキスト要素ラッパー {
    位置: 相対的;
    最大幅: 360px;
    境界線の半径: 3px;
    単語区切り: 単語区切り;
    境界線: 1px実線rgb(235, 235, 235);
  }

  .テキスト要素 {
    パディング: 6px;
  }

  .要素受信 {
    最大幅: 280px;
    背景色: #fff;
    フロート: 右;
  }
  .受信した画像{
    フロート: 左;
    右パディング: 6px;
  }

  .要素送信{
    最大幅: 280px;
    背景: rgb(5, 185, 240);
    フロート: 左;
  }
  .send-img {
    フロート: 右;
  }
</スタイル>

<テンプレート>    
 <section class="ダイアログセクション clearfix">
            <div class="row clearfix" v-for="(item,index) in msgs" :key = index>
                <img :src="item.uid == myInfo.uid ? myInfo.avatar :otherInfo.avatar" :class="item.uid == myInfo.uid ? 'headerleft' : 'headerright'">
                <p :class="item.uid == myInfo.uid ? 'textleft' : 'textright'" v-html="customEmoji(item.content)"></p>
            </div>
        </セクション>
         <div id="emoji-list" class="flex-column" v-if="emojiShow"> //まず、これを使用して絵文字ポップアップウィンドウを表示するかどうかを決定します<div class="flex-cell flex-row" v-for="list in imgs">
                <div class="flex-cell flex-row cell" v-for="リスト内の項目" @click="inputEmoji(item)">
                  <img :src="'./emoji/' + アイテム + '.png'">
                </div>
              </div>
            </div>
</テンプレート>
<スクリプト>
import { sendMsg } from "@/ws"; //これは長い接続です import _ from "lodash"; //これはjsの非常に強力なライブラリです import eventBus from '@/eventBus' //これは子と親の間で渡されるパブリックファイルです console.log(emoji)
エクスポートデフォルト{
  データ（） {
    this.imgs = _.chunk(emoji, 6) // これは、lodash ライブラリの chunk メソッドを呼び出して、6 つの要素を配列に分割します。これは、絵文字配列内の 2 次元配列にすぎません。 return {
      emojiShow: false // 最初は、クリック ボタンはデフォルトで表示されません。クリック ボタンを表示するには、@click='emojiShow=emojiShow' と記述します。};
  },
  メソッド: {
    customEmoji(text) { //この関数は、渡された名前を画像に変換するためにサーバーによって使用されます。 return text.replace(/\[([A-Za-z0-9_]+)\]/g, '<img src="./emoji/$1.png" style="width:30px; height:30px;">')
    },
    入力絵文字(pic) {
      this.content += `[${pic}]` //渡された名前は画像に変換されます}
};
</スクリプト>
<スタイルスコープ>
@import '../../assets/css/dialogue.css';

#絵文字リスト {
  高さ: 230px;
  背景: #fff;
}
#絵文字リスト.セル{
  行の高さ: 13vh;
  右境界線: 1rpx 実線 #ddd;
  ボーダー下部: 1rpx 実線 #ddd;
}
.flex-row {
  ディスプレイ: フレックス;
  flex-direction: 行;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
}
.flex-column {
  ディスプレイ: フレックス;
  flex-direction: 列;
  コンテンツの中央揃え: 中央;
  アイテムの位置を揃える: ストレッチ;
}
.flex-セル{
  フレックス: 1;
}
.セル画像{
  幅: 35px;
  高さ: 35px;
}
</スタイル>