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>

如何为聊天中的用户定义颜色

1 个答案: