更新

Question

我正在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>

获取的数组对象结构

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

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

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

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

Answer 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;
}

我不确定这是否是执行此操作的最佳方法，但对我而言有效:)

Laravel + Vue聊天室逻辑与设计

2 个答案:

更新