【问题标题】：Laravel+Vue Chatroom logic and DesignLaravel+Vue 聊天室逻辑与设计
【发布时间】：2019-06-12 16:48:30
【问题描述】：

我正在 Laravel 上创建一个简单的私人聊天室，所以这里有一些解释它是如何在我的应用程序上工作的，有一个按钮可以切换该模式内的引导模式，我把 vue 组件全部工作正常，但这是我的问题我把我发送的放在左边，回复放在右边？我也遇到了与包装器重叠的女性文本问题

模态

<div id="messagemodal">
  <userprofilemessagemodal-component 
    :chatroom_id="{{ $chatroom->id }}" 
    :user_id="{{ Auth::user()->id }}" 
    :receiver="{{ $data->id }}"
  >
  </userprofilemessagemodal-component>
</div>

Vue 组件

 <div class="container-fluid p-3 roombody">
   <div v-for="roommsg in roommsgs" v-bind:key="roommsg.id">
     <div class="container">                        
       <p id="roommsg" class="rounded-top rounded-bottom p-1 text-white"> 
         {{ roommsg.message }} 
       </p>                                       
     </div>                    
   </div>
 </div>

获取的数组对象结构

id: '',
message: '',
chatroom_id: '',
user_id: '',
receiver_id: '',
created_at: '',
updated_at: '',

所有这些都可以在样式上完成吗？谢谢你们！ PS。我不是复制所有代码，只复制我认为你们需要的代码，但请告诉我你是否能理解:)

【问题讨论】：

标签： css laravel vue.js

【解决方案1】：

在您的 Vue 组件中，您可以使用类似的 CSS 类进行管理但你必须为此编写 CSS

<div class="container-fluid p-3 roombody" :class="sender_participant">
    <div v-for="roommsg in roommsgs" v-bind:key="roommsg.id">
        <div class="container">                        
            <p id="roommsg" class="rounded-top rounded-bottom p-1 text-white"> {{ roommsg.message }} </p>                                       
        </div>
    </div>
</div>

在脚本中

export default {
    ....
    computed :{
        sender_participant(){
           return this.user_id==this.logged_in_user ? 'right' : 'left';
        }
    },
}

您必须检查发件人是否已登录用户。类似上面的假设 this.logged_in_user 是您登录的 user_id

有很多方法可以管理，但我想这对初学者来说很容易

【讨论】：

感谢您的回复！我在如何使用它时遇到了麻烦我只是将它复制并粘贴到我的代码上什么都没有发生但在我的 vue devtools 中它说 auth 用户已离开但他们对齐相同的 ty
对于对齐，您必须编写 CSS。你可以像上面的例子一样使用它会帮助你。你必须管理 left 和 right CSS 类

【解决方案2】：

更新

所以我在聊天室找到了我想要的东西的方法，把它分享给有同样问题的你们。

Vue 组件

<!-- this is for the logged in user -->
<div id="roommsguser" v-if="roommsg.user_id === user_id">
<p><span>  {{ roommsg.message }} </span></p>
<p id="roommsgtime"> <i> {{ roommsg.created_at }} </i> </p>
</div>
 <!-- this is for the other user -->
<div id="roommsgguest" v-else>
<p><span>  {{ roommsg.message }} </span></p>
<p id="roommsgtime"> <i> {{ roommsg.created_at }} </i> </p>
</div>

然后在我的 CSS 上

CSS

#roommsguser{
    text-align: right;  
}

#roommsguser span{
    color: white;
    padding: 5px;

    background-color: #0080ff;
    border-radius: 30px;
}

#roommsgguest{
    text-align: left;  
}

#roommsgguest span{
    color: white;
    padding: 5px;
    margin: 3px;
    background-color: #14487C;
    border-radius: 30px;
}

#roommsgtime{
    font-size: 60%;
    color: #ececec;
}

虽然我不确定这是否是最好的方法，但它对我有用:)

【讨论】：