vue点击聊天框案例

超、凢脫俗 2021-07-24 16:54 461阅读 0赞

通过v-model双向绑定配合@keydown.enter事件,解决input内容到聊天室显示  
每次发送将数据存进数组,v-for遍历数组,显示  
**App.vue组件:**

<template>
      <div id="app">
        
        <div class="content">
          
          <chat :uname='uname' ></chat>
          
          <userList :userList='userList' @chooseUser='getId'></userList>
         </div>
    
      </div>
    </template>
    
    <script>
    import chat from './components/chat.vue'
    import userList from './components/userList.vue'
    export default { 
      name: 'App',
      data()
      { 
        return{ 
          msg:'jeff聊天',
          userList:[
            { 
              username:'jeff',
              headerImage:'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3819550809,2703379148&fm=111&gp=0.jpg'
            },
            { 
              username:'tom',
              headerImage:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3741733804,1966033566&fm=26&gp=0.jpg'
            },
            { 
              username:'mike',
              headerImage:'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=561326960,1564995287&fm=111&gp=0.jpg'
            },
            { 
              username:'jim',
              headerImage:'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=422317832,3201868799&fm=111&gp=0.jpg'
            }
          ],
          uname:'聊天室',
          currentUser:{ 
            username:'jeff',
            headerImage:'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3819550809,2703379148&fm=111&gp=0.jpg'
          }
        }
      },
      methods:{ 
        //点击更改聊天室名称,和当前聊天对象
        getId(data)
        { 
          this.uname=this.userList[data].username;
          this.currentUser=this.userList[data];
    
        }
      },
      components:{ 
        chat,
        userList
      }
    
    }
    </script>
    
    <style scoped>
    #app { 
    
    }
    .content{ 
      display: flex;
      width: 800px;
      height: 700px;
      margin: 0 auto;
    }
    </style>

**右侧列表组件:**

<template>
      <div class='userlist'>
          <h1>用户</h1>
          <ul>
            <li v-for='(item,index) in userList' :key='index' @click='choose(index)'>
              <img :src="item.headerImage" alt="" />
              <h3>{ { item.username}}</h3>
            </li>
          </ul>
      </div>
    </template>
    
    <script>
     export default{ 
       name:'chat',
       data()
       { 
         return{ 
    
         }
       },
       props:['userList'],
       methods:{ 
         choose(index)
         { 
           //选择用户事件触发,将用户index传给父组件
           this.$emit('chooseUser',index);
         }
       }
     }
    </script>
    
    <style scoped>
     li{ 
        list-style: none;
      }
    .userlist{ 
      width:300px;
      height:700px;
      background-color: hotpink;
    }
    .userlist li img{ 
      width: 80px;
      height: 80px;
    }
    .userlist li{ 
      display: flex;
    }
    </style>

**左侧聊天室组件:**

<template>
      <div class='chat'>
          <h1 class='user'>聊天用户:{ { uname}}</h1>
          
          
          <div class='chatlist'>
              <div>
                <chatItem v-for='(item,index) in chatList' :key='index' :chatitem='item'>
                  { { item.chatcontent}}
                </chatItem>
              </div>
          </div>
          
          <chatinput :send='send'></chatinput>
      </div>
    </template>
    
    <script>
     import chatinput from './chatinput'
     import chatItem from './chatItem'
    
     export default{ 
       name:'chat',
       data()
       { 
         return{ 
            chatList:[
              //本身
              { 
                user:{ 
                  username:'杜大帅',
                  headerImage:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3741733804,1966033566&fm=26&gp=0.jpg'
                },
                chatcontent:'哈哈哈哈哈'
              }
            ]
         }
      },
         methods:{ 
           send(value)
           { 
             //发送方
             this.chatList.push({ 
                 user:{ 
                   username:'杜大帅',
                   headerImage:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3741733804,1966033566&fm=26&gp=0.jpg'
                 },
               chatcontent:value
             })
             this.chatList.push({ 
    
             //回复方,级app.vue组件的data设置的数据
              user:this.$root.$children[0].currentUser,
               chatcontent:'嘤嘤嘤'
             })
           }
         }
       ,
       props:['uname'],
       components:{ 
         chatinput,
         chatItem
       }
     }
    </script>
    
    <style scoped>
      .chat{ 
          width: 500px;
          height: 700px;
          border: 1px solid pink;
      }
    </style>

**聊天子组件-输入组件**

<template>
      <div>
        
        <input @keydown.enter='sendInfo($event.target.value)' v-model='content' type="text">
        <button @click='sendInfo(content)'>发送</button>
      </div>
    </template>
    
    <script>
      export default{ 
        name:'chatinput',
        data(){ 
          return{ 
            content:''
          }
        },
        props:['send'],
        methods:{ 
          sendInfo:function(data)
          { 
            this.send(data);
            this.content='';
          }
        }
      }
    </script>
    
    <style>
    </style>

**聊天子组件-用户组件**

<template>
      <div class='chatItem'>
          <img :src="chatitem.user.headerImage" alt="" :style="imgStyle">
          <div>
    
            <slot></slot>
          </div>
      </div>
    </template>
    
    <script>
      export default{ 
        name:'chatitem',
        data()
        { 
            return{ 
                imgStyle:{ 
                  height:"50px",
                  width:"50px"
                }
            }
        },
        props:['chatitem']
      }
    </script >
    
    <style scoped>
      .chatItem{ 
        display:flex;
      }
    </style>