この記事の例では、チャットインターフェースの表示を実現するための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; } } } </スタイル> 親コンポーネントは、子コンポーネントのプロパティとメソッドを使用します。 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Oracle VM VirtualBox の CentOS7 オペレーティング システムのインストール チュートリアル図
この機能を実装するにあたり、本家ブロガーさんから拝借した方法では色の切り替えが実現できず、長い間考え...
序文: vue3.0の要素フレームワークを使用します。要素はvue2.0をサポートしており、vue3...
目次1. フィルター() 2. 各() 3. いくつか() 4. すべて() 5. 減らす() 6....
目次1. キューを理解する2. カプセル化キュー3. 太鼓をたたいて花を渡す場合1. キューを理解す...
1. Apache 2.4.41 のインストールと設定最初のステップは、以下に示すように、https...
この記事では、MySQL での重複キー更新時の replace into と insert into...
最近、あるプロジェクトに取り組んでいたとき、ページに透かし効果を追加するように依頼されました。さっそ...
目次1. 通常どのようなコンテンツを処理する必要があるか2. 基本的な考え方3. 具体的な実践の詳細...
序文プロジェクトのニーズに応じて、Vue-touch を使用して、vue モバイル端末の左スワイプ編...
目次テーブル/index.jsテーブル/モデル/index.jsテーブル/モデル/モジュール/bas...
目次イベントとは簡単な例イベントをバインドする方法フレームワーク内のイベントイベントオブジェクトイベ...
CSS オーバーフローのメカニズムを詳細に学ぶ必要があるのはなぜですか?実際の開発プロセスでは、コン...
目次方法1: 水平スクロールバーを設定する最も簡単な方法方法2(新規):ドラッグバーを追加して外側の...
この効果を実現するには、まず CSS のプロパティを知っておく必要があります。 text-shado...
この記事の例では、カスタムドロップダウンボックスを実装するためのjsの具体的なコードを参考までに共有...