css - Laravel+Vue 聊天室逻辑与设计

Question

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

Modal

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

Vue Component

 <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>

fetched Array object Structure

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

所有这些都可以在样式上完成吗？感谢你们 !附言。我不会复制所有代码，只复制我觉得你们需要的代码，但如果你能理解请告诉我 :)

Answer 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

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