Vueはチャットインターフェースを実装する

Vueはチャットインターフェースを実装する

この記事の例では、チャットインターフェースの表示を実現するためのVueの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

1. 機能要件

インデックスに基づいてさまざまな人とチャットすることを選択します

2. コード表示

モック:

'mockjs' から Mock をインポートします。
Mock.mock("/chatchild",{
    '結果':[
        {
            id:"001",
            画像URL:"/static/image/10.jpg",
            名前:"XKDK",
            日付:"09:23",
            言葉:「ハハ、わかった」
        },
        // ... ...
    ]
});
デフォルトのモックをエクスポートする

ユーザー情報:

ユーザーメッセージ = {
    id:"122",
    画像URL:"/static/image/8.jpg",
    言葉:「はい!」
    データ:{
        id:"1529",
        画像URL:"/static/image/7.jpg",
        名前:"イー・アン・ジュシ",
        言葉:[
            {info:"そこにいますか?"},
            {info:"含まれていません"},
            {info:"ドラフトを送信しましたか?"},
            {info:"今日は昼食以来ずっとテレビシリーズを見ています"},
            {info:"私は本当に家にいるのが好きな人間だということが分かりました"},
            {info:"ハハハ"},
            {info:"時間があるときに一緒に夕食を食べましょう"},
            {情報:"うーん"},
            {info:"いずれにしても、大きな影響はないだろう"}
        ]
    }
}
デフォルトのユーザーメッセージをエクスポートする

インデックス:

'vue' から Vue をインポートします
'vue-router' から Router をインポートします。
'../components/Chat.vue' から Chat をインポートします。
'../components/Pages/ChatDetail.vue' から ChatDetail をインポートします。

Vue.use(ルーター)

デフォルトの新しいルーターをエクスポートします({
  ルート: [
    {
      パス: '/Chat ',
      コンポーネント: チャット 
    },
    {
      パス:'/ChatDetail',
      コンポーネント:ChatDetail
    }
  ]
})

// ルーティングエラーを解決するコード const originalPush = Router.prototype.push
Router.prototype.push = 関数push(location) {
    元のPush.call(this, location).catch(err => err) を返します
}

チャット.vue:

<テンプレート>
  <div id="チャット">
    <下へ />
    <ヘッダー:name="メッセージ" />
    <div class="chat_alluser">
      <div ref="chatuser" @click="checkChild(index)" class="chatuser" v-for="(item,index) チャット内" :key="index">
        <ChatChild :imgsrc="item.imgurl" :nickname="item.name" :time="item.date" :word="item.words" />
      </div>
    </div>
  </div>
</テンプレート>

<スクリプト>
「../components/Menu/Bottom」からBottomをインポートします。
「../components/Menu/Header」からヘッダーをインポートします。
「../components/Pages/ChatChild」からChatChildをインポートします。
エクスポートデフォルト{
  名前:「チャット」、
  コンポーネント:
    下: 下、
    ヘッダー: ヘッダー、
    チャットチャイルド: チャットチャイルド
  },
  データ() {
    戻る {
      メッセージ: 「WeChat」、
      チャット: null、
      名前: ヌル
    };
  },
  マウント() {
    this.$axios.get("/chatchild").then(res => {
      this.chat = res.data.result;
    });
  },
  メソッド: {
    checkChild(インデックス) {
      this.$refs.chatuser[index].style.backgroundColor = "rgb(240,240,240)";
      // 動的DOM要素のレンダリングが完了したら、別のインターフェース(ChatDetail)にジャンプします。
      // 動的な名前を取得する
      username = this.chat[index].nameとします。
      this.$nextTick(() => {
        this.$router.push({
          パス: "/ChatDetail",
          クエリ: { 名前: ユーザー名 }
        });
      });
    }
  }
};
</スクリプト>

<style lang="scss" スコープ>
#チャット {
  幅: 100%;
  .chat_alluser {
    下マージン: 7.5rem;
    .chatuser {
      位置: 相対的;
      トップ:3.5rem;
      パディング: 0.3rem 0;
    }
  }
}
</スタイル>

親コンポーネントは、子コンポーネントのプロパティとメソッドを使用します。
this.$refs.name. 属性または this.$refs.name. メソッドを使用して、親コンポーネント内の子コンポーネントに ref 属性を定義します。

ChatChild.vue:

<テンプレート>
  <div id="chatchild">
    <div class="写真">
      <img :src="imgsrc" alt />
    </div>
    <div class="content">
      <div>
          <span class="content_nickname">{{ニックネーム}}</span>
          <span class="content_time">{{時間}}</span>
      </div>
      <span class="content_word">{{word}}</span>
    </div>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: "ChatChild",
  小道具:{
    'imgsrc':文字列、
    'ニックネーム':文字列,
    '時間':文字列、
    '単語':文字列
  }
};
</スクリプト>

<style lang="scss" スコープ>
#チャットチャイルド {
  幅: 100%;
  高さ:5rem;
  ディスプレイ: フレックス;
  flex-direction: 行;
  ボックスのサイズ: 境界線ボックス;
  。写真 {
    フレックス: 1;
    高さ:5rem;
    画像{
        オブジェクトフィット: カバー;
        幅: 4rem;
        高さ: 4rem;
        境界線の半径: 5px;
        表示: ブロック;
        マージン: 0 自動;
        上マージン: 0.5rem;
        左マージン: 1rem;
    }
  }
  。コンテンツ {
    フレックス: 4;
    高さ:5rem;
    下境界線: 0.5px 実線 rgb(240, 240, 240);
    左パディング: 0.5rem;
    パディングトップ: 0.5rem;
    ボックスのサイズ: 境界線ボックス;
    div{
      .content_nickname{
        表示: インラインブロック;
        フォントサイズ: 1.1rem;
        上マージン: 0.3rem;
      }
      .content_time{
        フロート: 右;
        右マージン: 1rem;
        色: rgb(209, 206, 206);
        フォントサイズ: 0.8rem;
      }
    }
    .content_word{
      色: rgb(209, 206, 206);
      フォントサイズ: 0.8rem;
      表示: ブロック;
      上マージン: 0.5rem;
    }
  }
}
</スタイル>

チャットの詳細:

<テンプレート>
  <div id="チャットの詳細">
    <div class="チャットトップ">
      <div @click="戻る" class="chattop_back">
        <icon-svg icon-class="houtui_shangyibu_zuojiantou_shangyiye" />
      </div>
      <div class="チャットトップ名">{{名前}}</div>
      <div class="chattop_more">
        <icon-svg icon-class="gengduo" />
      </div>
    </div>
    <div class="チャットコンテンツ">
      <チャットメッセージref="チャットメッセージ" />
    </div>
    <div class="チャットフッター">
      <div @click="サウンドを変更">
        <icon-svg :icon-class="issound" />
      </div>
      <div>
        <input ref="sendcontent" @keypress="sendmsg" :type="istype" :value="isvalue" />
      </div>
      <div>
        <icon-svg icon-class="biaoqing" />
      </div>
      <div>
        <icon-svg icon-class="del" />
      </div>
    </div>
  </div>
</テンプレート>

<スクリプト>
「./ChatMsg」からChatMsgをインポートします。
エクスポートデフォルト{
  名前: "チャット詳細",
  データ() {
    戻る {
      名前: null、
      発音: "xiaoxitongzhi",
      istype: "テキスト",
      値: "",
      isshow: false、
      トムスグ: "",
      メッセージ子: null
    };
  },
  コンポーネント:
    チャットメッセージ: チャットメッセージ
  },
  マウント() {
    this.name = this.$route.query.name;
    this.msgchild = this.$refs.chatmsg;
  },
  メソッド: {
    // 戻り操作を実行する goback() {
      $router.go(-1);
    },
    // 入力タイプを切り替える changeSound() {
      // データに変数 isshow:false を定義し、this.isshow と !this.isshow を使用して切り替えます。if (!this.isshow) {
        this.isshow = true;
        this.issound = "yuyin";
        this.istype = "ボタン";
        this.isvalue = "長押しすると話せます";
      } それ以外 {
        this.isshow = false;
        this.issound = "小西同志";
        this.istype = "テキスト";
        this.isvalue = "";
      }
    },
    // メッセージを送信する sendmsg(e) {
      // 1. ref を使用して返信内容を入力するための入力テキスト ボックスを定義し、その値 (入力内容) を受け取るための sendcontent 変数を定義します。
      sendcontent を this.$refs.sendcontent.value とします。
      e.keyCode === 13 && sendcontent.split(" ").join("").length !== 0 の場合 {
        // 2. tomsg を使用して、ChatDetail (親) コンポーネントで sendcontent (テキスト ボックスに入力された値) を受信します。this.tomsg = sendcontent;
        // 3. ChatMsg (子) コンポーネントを ref で定義し、$refs を使用してマウントされた状態で取得します。つまり、this.msgchild です。
        // 4. 子コンポーネントでメソッドを呼び出し、tomsg を ChatMsg (子) コンポーネント (特定のチャット コンテンツ) に渡します。this.msgchild.saveMsg(this.tomsg);
        // 5. メッセージを送信した後、テキスト ボックスをクリアする必要があります this.$refs.sendcontent.value = "";
        // Enter キーを押すと、子コンポーネントのランダム メッセージ メソッドが呼び出されます。this.msgchild.randomMsg();
      }
    }
  }
};
</スクリプト>

<style lang="scss" スコープ>
#チャットの詳細{
  位置: 相対的;
  背景色: rgb(238, 212, 238);
  .チャットトップ{
    位置: 固定;
    上: 0;
    左: 0;
    zインデックス: 10;
    幅: 100%;
    高さ:3.5rem;
    行の高さ: 3.5rem;
    背景色: rgb(240, 240, 240) !重要;
    ディスプレイ: フレックス;
    flex-direction: 行;
    .チャットトップ_back {
      フレックス: 1;
      左マージン: 1rem;
    }
    .チャットトップ名 {
      フレックス:20;
      テキスト配置: 中央;
    }
    .チャットトップ_more {
      フレックス: 1;
      右マージン: 1rem;
    }
  }
  .チャットコンテンツ{
    幅: 100%;
    高さ: 100%;
  }
  .チャットフッター{
    位置: 固定;
    左: 0;
    下部: 0;
    zインデックス: 10;
    幅: 100%;
    高さ:3.5rem;
    行の高さ: 3.5rem;
    テキスト配置: 中央;
    背景色: rgb(240, 240, 240) !重要;
    ディスプレイ: フレックス;
    flex-direction: 行;
    div:n番目の子(1)、
    div:n番目の子(3)、
    div:n番目の子(4) {
      フレックス: 1;
      svg {
        フォントサイズ: 1.5rem;
        上マージン: 0.9rem;
      }
    }
    div:n番目の子(2) {
      フレックス: 5;
      入力{
        幅: 100%;
        高さ:2.5rem;
        アウトライン: なし;
        左パディング: 0.5rem;
        ボックスのサイズ: 境界線ボックス;
        高さ:2.5rem;
        上マージン: 0.5rem;
        境界線スタイル: なし;
        フォントサイズ: 0.9rem;
        境界線の半径: 4px;
        背景色: #fff;
        色: #000;
      }
    }
  }
}
</スタイル>

チャットメッセージ.vue:

<テンプレート>
  <div id="チャットメッセージ" ref="メッセージ">
    <!-- 動的作成 -->
    <div v-for="(item,index) リスト内" :key="index">
      <div v-if="item.id==122" クラス="ユーザー">
        <div v-スクロール>
          <img :src="item.face" alt />
          <div class="bubble">
            <span>{{item.word}}</span>
          </div>
        </div>
      </div>
      <div v-if="item.id==1529" クラス="touser">
        <div v-スクロール>
          <img :src="item.face" alt />
          <div class="tobubble">
            <span>{{item.word}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</テンプレート>

<スクリプト>
「./userinfo」からuserinfoをインポートします。
エクスポートデフォルト{
  名前: "ChatMsg",
  データ() {
    戻る {
      ユーザ画像: "",
      リスト: []
    };
  },
  マウント() {
    this.userid = ユーザー情報 ID;
    this.userimg = ユーザー情報.imgurl;
  },
  // vue は自動的に一番下までスクロールします。ディレクティブ: {
    スクロール: {
      挿入(el) {
        el.scrollIntoView();
      }
    }
  },
  メソッド: {
    保存メッセージ(tomsg) {
      this.lists.push({
        id: this.userid、
        顔: this.userimg,
        単語: tomsg
      });
    },
    ランダムメッセージ() {
      touserdata = userinfo.data とします。
      this.lists.push({
        id: touserdata.id、
        顔: touserdata.imgurl、
        言葉:
          touserdata.words[Math.floor(Math.random() * touserdata.words.length)]
            。情報
      });
    }
  }
};
</スクリプト>

<style lang="scss" スコープ>
#チャットメッセージ {
  位置: 相対的;
  トップ:3.5rem;
  幅: 100%;
  最小高さ: 44rem;
  背景色: rgb(238, 212, 238);
  下マージン: 3.5rem;
  オーバーフロー-x:非表示;
  オーバーフロー-y: 自動;
  .ユーザー{
    位置: 相対的;
    幅: 100%;
    オーバーフロー: 非表示;
    マージン: 0.8rem 0;
    画像 {
      オブジェクトフィット: カバー;
      幅: 3rem;
      高さ: 3rem;
      境界線の半径: 3px;
      フロート: 右;
      右マージン: 1rem;
    }
    .バブル{
      位置: 相対的;
      フロート: 右;
      右マージン: 1rem;
      パディング: 0.8rem;
      ボックスのサイズ: 境界線ボックス;
      境界線の半径: 3px;
      最大幅: 65%;
      背景色: rgb(116, 228, 116);
      スパン {
        高さ:1.25rem;
        行の高さ: 1.25rem;
      }
    }
    .bubble::after {
      位置: 絶対;
      右: -1.3rem;
      トップ:0.8rem;
      コンテンツ: "";
      幅: 0;
      高さ: 0;
      ボーダー: 0.7rem 実線;
      境界線の色: 透明 透明 透明 rgb(116, 228, 116);
    }
  }
  .touser {
    位置: 相対的;
    幅: 100%;
    オーバーフロー: 非表示;
    マージン: 0.8rem 0;
    画像 {
      オブジェクトフィット: カバー;
      幅: 3rem;
      高さ: 3rem;
      境界線の半径: 3px;
      フロート: 左;
      左マージン: 1rem;
    }
    .tobubble {
      位置: 相対的;
      フロート: 左;
      左マージン: 1rem;
      パディング: 0 0.7rem;
      ボックスのサイズ: 境界線ボックス;
      境界線の半径: 3px;
      最大幅: 65%;
      背景色: rgb(116, 228, 116);
      行の高さ: 3rem;
    }
    .tobubble::after {
      位置: 絶対;
      左: -1.3rem;
      トップ:0.8rem;
      コンテンツ: "";
      幅: 0;
      高さ: 0;
      ボーダー: 0.7rem 実線;
      境界線の色: 透明 rgb(116, 228, 116) 透明 透明;
    }
  }
}
</スタイル>

3. ディレクトリ構造

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue+express+Socketでチャット機能を実現
  • Vue が Web オンラインチャット機能を実現
  • Vue+ウェブ端末がWeChatウェブ版チャットルーム機能を模倣
  • Vue.js は WeChat チャットウィンドウを模倣してコンポーネント機能を表示します
  • Vue + socket.io はシンプルなチャットルームのサンプルコードを実装します
  • Vue2ベースのモバイルQQを模倣したシングルページアプリケーション機能(チャットボットへのアクセス)
  • RongCloud IM を使用して Vue Cli 3 プロジェクトにチャット機能を実装する方法
  • Vue で実装された WeChat ロボット チャット機能の例 [ソース コードのダウンロードあり]
  • Vue と Websocket をベースにした複数人用オンライン チャット ルーム
  • オンラインチャットを実現するVue+sshフレームワーク

<<:  Oracle VM VirtualBox の CentOS7 オペレーティング システムのインストール チュートリアル図

>>:  MySQL 文字セットの文字化けとその解決方法

推薦する

Vue.jsでタブ切り替えと色変更操作を実装する解説

この機能を実装するにあたり、本家ブロガーさんから拝借した方法では色の切り替えが実現できず、長い間考え...

vue3.0 で要素を使用するための完全な手順

序文: vue3.0の要素フレームワークを使用します。要素はvue2.0をサポートしており、vue3...

よく使われるJavaScript配列メソッド

目次1. フィルター() 2. 各() 3. いくつか() 4. すべて() 5. 減らす() 6....

JavaScriptはキュー構造プロセスを実現する

目次1. キューを理解する2. カプセル化キュー3. 太鼓をたたいて花を渡す場合1. キューを理解す...

Windows 10 に Apache 2.4.41 をインストールするチュートリアル

1. Apache 2.4.41 のインストールと設定最初のステップは、以下に示すように、https...

MySQL での重複キー更新時の replace into と insert into の使用法と相違点の分析

この記事では、MySQL での重複キー更新時の replace into と insert into...

Vueはページに透かし効果を追加する機能を実装します

最近、あるプロジェクトに取り組んでいたとき、ページに透かし効果を追加するように依頼されました。さっそ...

Vue.js フロントエンドプロジェクト向け多言語ソリューションのアイデアと実践

目次1. 通常どのようなコンテンツを処理する必要があるか2. 基本的な考え方3. 具体的な実践の詳細...

Vueモバイル端末は左スライド編集と削除の全プロセスを実現します

序文プロジェクトのニーズに応じて、Vue-touch を使用して、vue モバイル端末の左スワイプ編...

React+Antdはテーブルの追加、削除、変更の例を実装します

目次テーブル/index.jsテーブル/モデル/index.jsテーブル/モデル/モジュール/bas...

JSブラウザイベントモデルの詳細な説明

目次イベントとは簡単な例イベントをバインドする方法フレームワーク内のイベントイベントオブジェクトイベ...

CSSオーバーフローメカニズムについての簡単な説明

CSS オーバーフローのメカニズムを詳細に学ぶ必要があるのはなぜですか?実際の開発プロセスでは、コン...

el-tree での不完全なテキスト表示の解決策

目次方法1: 水平スクロールバーを設定する最も簡単な方法方法2(新規):ドラッグバーを追加して外側の...

CSS3はテキストのレリーフ効果、彫刻効果、炎のテキストを実現します

この効果を実現するには、まず CSS のプロパティを知っておく必要があります。 text-shado...

jsはカスタムドロップダウンボックスを実装します

この記事の例では、カスタムドロップダウンボックスを実装するためのjsの具体的なコードを参考までに共有...