javascript - 如何在聊天中为用户定义颜色

Question

我和 pusher 聊天，它运行良好，但现在我想在你说话时更改你自己的用户名的颜色。目前，我的用户名和另一个用户的用户名是黑色的，但我想让你自己帐户的用户名是另一种颜色，以便知道你什么时候在说话。 (我的英语有点中等抱歉问你是否需要更多解释) 感谢您的帮助

这是在我的 app.blade 中

    <div class="row">
                        <div class="col-md-12 col-md-offset-2">
                            <div class="col-md-12 col-md-offset-2">
                                <div class="panel-body panel-content" id="mess_cont">

                                    <chat-messages id="mess" :messages="messages"></chat-messages>
                                </div>
                                <div class="panel-footer">
                                    <chat-form
                                            v-on:messagesent="addMessage"
                                            :user="{{ Auth::user() }}"
                                    ></chat-form>
                                </div>
                            </div>
                        </div>
                    </div>

这是我的 ChatMessages.vue :

<template>
    <ul class="chat messages" >
        <li class="left clearfix list-group-item" v-for="message in messages" >

        <div class="chat-body clearfix">
                <div class="header">
                    <strong class="primary-font" >
                        {{ message.user.firstName }}
                        {{ message.user.lastName}}
                    </strong>
                </div>
                <p>
                    {{ message.message }}
                </p>
            </div>
        </li>
    </ul>
</template>

<script>
    export default {
        props: ['messages']
    };


</script>

Answer 1

假设您的 User 模型有某种 id，您可以根据消息作者的 id 应用 CSS 类或样式。
可能是这样的

<chat-messages id="mess" :messages="messages" :currentuserid="{{Auth::user()->id}}"></chat-messages>

<template>
    <ul class="chat messages" >
        <li class="left clearfix list-group-item" v-for="message in messages" >

        <div class="chat-body clearfix">
                <div class="header">
                    <strong class="primary-font "  
                            v-bind:class="{
                                classForAuthorSameAsUser: (message.user.id === currentuserid),
                                classForAuthorDiffThanUser: (message.user.id !== currentuserid)
                            }">
                        {{ message.user.firstName }}
                        {{ message.user.lastName}}
                    </strong>
                </div>
                <p>
                    {{ message.message }}
                </p>
            </div>
        </li>
    </ul>
</template>

<script>
    export default {
        props: ['messages','currentuserid']
    };


</script>

<style scoped>
.classForAuthorSameAsUser {
  color: red;
}
.classForAuthorDiffThanUser {
  color: blue;
}
</style>