この記事の例では、チャットインターフェースの表示を実現するための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 オペレーティング システムのインストール チュートリアル図
私はmysql ERROR 1045に遭遇し、この問題に長い時間を費やしました。私はそれを自分で書き...
友人たちはいつも、Linux のプロセスを隠す方法を私に尋ねます。私は、どの程度隠したいのか、カーネ...
目次概要コンポーネントクラスの型定義を作成するジェネリック型を使用してPropsとStateを定義す...
gzip は、Linux システムでファイルの圧縮と解凍によく使用されるコマンドです。このコマンドで...
成し遂げるこの効果は CSS を使用して完全に再現することは困難です。 CSS でシミュレートされた...
許可ベースの電子メール マーケティングにより、マーケティングとプロモーションのコストを大幅に削減でき...
目次1. Set()+Array.from() を使用する2. 2層ループ+アレイ接合方式の使用3....
目次チュートリアルシリーズ1. バックアップ戦略の説明1. バックアップの種類2. バックアップで考...
<br />原文: プログレッシブエンハンスメントを理解するアーロン・ガスタフソン翻訳:...
プラグインは Firefox ブラウザにインストールされます。 Web Developer プラグイ...
EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...
目次1. ファイルとディレクトリの基本的な保存2. Inコマンドの紹介(1)lnコマンドの基本情報を...
SPA を構築する場合、多くの場合、特定のルートを保護する必要があります。たとえば、認証されたユーザ...
MySQLではisnull()関数をnull値の代わりとして使用することはできません。次のように:ま...
例:ヒント:このコンポーネントはvue-cropperの二次パッケージに基づいていますプラグインをイ...