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

'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) を返します
}

<テンプレート>
  <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;
    }
  }
}
</スタイル>

<テンプレート>
  <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;
      }
    }
  }
}
</スタイル>

<テンプレート>
  <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) 透明 透明;
    }
  }
}
</スタイル>