开源项目学习——基于Pusher和Vue构建即时聊天平台（二）

---

提示：项目详情及配置请参考上一篇文章[开源项目学习——基于Pusher和Vue构建即时聊天平台（一）](https://editor.csdn.net/md/?articleId=111767569)

UI界面实现

1.登录界面

LoginForm.vue

<template>
    <div class="login-form">
        <h5>登 录</h5>
        <hr>
        <b-form @submit.prevent="onSubmit">
            <!-- 利用Vuex更新并显示错误信息 -->
            <b-alert :show="hasError">{
   {
   error}}</b-alert>
            <b-form-group id="userInputGroup" label="用 户 名" label-for="userInput">
                <!-- 正在加载时禁用输入框 -->
                <b-form-input id="userInput" v-model="userId" required autocomplete="false" 
                type="text" placeholder="请输入用户名" :disabled="loading"></b-form-input>
            </b-form-group>

            <b-button type="submit" :disabled="isValid" class="ld-ext-right" 
            :class="{running:loading}" variant="primary">登录
            <!-- 加载 -->
            <div class="ld ld-ring ld-spin"></div></b-button>
            
        </b-form>
    </div>
</template>

<script>
import {
   mapState, mapGetters} from 'vuex'
export default {
   
    name:"LoginForm",
    data() {
   
        return {
   
            userId: ''
        }      
    },
    computer: {
   
        isValid: () => {
   
            // 正在加载或用户名长度小于3时进用按钮
            var result=this.userId.length < 3;
            return result ? result:this.loading;
        },
        ...mapState(['loading', 'error']),
        ...mapGetters(['hasError'])
    }
}
</script>

Login.vue

<template>
    <div class="login">
        <b-jumbotron header="Chat Channels" 
        lead="由Pusher和Bootstrap-Vue提供技术支持" 
        bg-variant="info" 
        text-variant="white">
            <p>去Pusher官方网站了解更多信息</p>
            <b-btn href="https://dashboard.pusher.com/channels" target="_blank">了解更多</b-btn>
        </b-jumbotron