Vue 3 CLI 聊天应用程序引导文本不会向左对齐

Posted 2023-02-23

【中文标题】Vue 3 CLI 聊天应用程序引导文本不会向左对齐

【英文标题】：Vue 3 CLI Chat app bootstrap text won't align to the left

【发布时间】：2020-12-11 14:30:49

【问题描述】：

我正在制作一个 Vue 应用程序，它的一部分功能是在 firestore 的支持下为用户提供实时聊天室。我的 Vue 应用程序中有 npm install bootstrap 和 v-chat-scroll。我最初尝试将一些消息放在聊天室的左侧，而在右侧使用 span 元素中的 v-if="equal_name(message)" 放置一些消息（此功能在下面提供）。但它没有用。所以我直接将 class=" text-left" 分配给我的元素。但是该元素仍然没有向左对齐。我不知道为什么。

    <template>
    <div class="container chat">
        <h2 class="text-primary text-center">Real-time chat</h2>
        <h5 class="text-secondary text-center">name </h5>
        <div class="card">
            <div class="card-body">
                <p class="text-secondary nomessages" v-if="messages.length == 0">
                    [no messages yet!]
                </p>
                <div class="messages" v-chat-scroll="always: false, smooth:true">
                    <div v-for="message in messages" :key="message.id">
                            <span class="text-info text-left">[ message.name ] : message.message</span>
                            <span class="text-secondary time">message.timestamp</span>
                    </div>
                </div>
            </div>

            <div class="card-action">
                <CreateMessage :name="name"/>
            </div>
        </div>
    </div>
</template>

下面是这个Vue的脚本和样式

<script>
    import CreateMessage from "@/components/CreateMessage";
    import fb from "@/firebase/init.js";
    import moment from "moment";

    export default
        name: "Chat",
        props: 
            name: String
        ,
        components:
            CreateMessage
        ,
        methods:
            equal_name(message)
                if(message.name==this.name)
                    return true;
                else
                    return false;
                
            
        ,
        data()
            return
                messages: []
            
        ,
        created() 
            let ref = fb.collection("messages").orderBy("timestamp");
            ref.onSnapshot(snapshot => 
                snapshot.docChanges().forEach(change => 
                    change.type = "added";
                    if(change.type == "added" )
                        let doc = change.doc;
                        this.messages.push(
                            id: doc.id,
                            name: doc.data().name,
                            message: doc.data().message,
                            timestamp: moment(doc.data().timestamp).format("MMM Do YY")
                        )
                    
                )
            )
        
    
</script>

<style>
.chat h2
    font-size: 2.6em;
    margin-bottom: 0px;
    

.chat h5
    margin-top: 0px;
    margin-bottom: 40px;

.chat span
    font-size: 1.2em;


.chat .time
    display: block;
    font-size: 0.7em;

.messages
    max-height: 300px;
    overflow: auto;
    text-align: unset;

</style>

【参考方案1】：

我已经在 bootstrap 中使用 flex 解决了我的问题。

<div v-if="equal_name(message)">
              <div class="d-flex flex-row">
                <div class="text-info">
                  [  message.name  ] :  message.message 
                </div>

如果我需要内容向左对齐，我使用 flex-row 和 v-if。如果我需要内容向右对齐，我使用 flex-row-reverse 和 v-else

<div v-else>
              <div class="d-flex flex-row-reverse">
                <div class="text-info">
                  [  message.name  ] :  message.message 
                </div>

虽然我仍然不知道为什么我不能只分配 class=" text-left" 或 "text-right" 来做上面的事情。