Vue教程 - 组件封装

[threetown]

一、登录/注册组件

1. login.vue 子组件

• template

<div v-if="isShow" class="popup_login">
   <div @click="close('formInline')" class="lay_colse">关闭</div>
   <div class="title title_join">登录</div>
   <Form class="popup_form"
        ref="formInline"
        :model="formInline"
        :rules="ruleformInline">
       <FormItem prop="username">
           <Input type="text" v-model="formInline.username" placeholder="请输入您的用户名"></Input>
       </FormItem>
       <FormItem prop="password">
           <Input type="password" v-model="formInline.password" placeholder="密码"></Input>
       </FormItem>
       <FormItem>
           <Button class="submitButton" type="primary"
               :loading="LoginLoading"
               @click.prevent="handleSubmit('formInline')">登录</Button>
       </FormItem>
   </Form>
</div>
<div v-if="isShow" class="login_mask"></div>

• script

<script>
    export default {
        name: 'gameindex',
        props: {
            isShow: { type: Boolean, default: false },
            LoginLoading: { type: Boolean, default: false }
        },
        data() {
            return {
                formInline: {
                    username: '',
                    password: '',
                    loading: false
                },
                ruleformInline: {
                    username: [{ required: true,  message: "请填写您的用户名", trigger: 'blur' }],
                    password: [{ required: true, message: "请填写密码", trigger: 'blur' }]
                }
            }
        },
        methods: {
            close(name){
                this.$refs[name].resetFields();
                this.$emit("close");
            },
            handleSubmit(name){
                const self = this;
                this.$refs[name].validate((valid) => {
                    if(valid) {
                        let params = {
                            "username": self.formInline.username,
                            "password": self.formInline.password
                        }
                        self.$emit("login", params)  // 注：有传参哦！
                    }
                })
            }
        }
    }
</script>

2. 父组件

• template

<login-popup 
    :is-show="showLogin"
    :LoginLoading="LoginLoading"
    @close="closeLogin"
    @login="login"
></login-popup>

• script

import LoginPopup from "@/components/popup/login";

export default {
        name: 'HeaderTop',
        components: {
            JoinPopup,
            LoginPopup
        },
        data() {
            return {
                showLogin: false,
                LoginLoading: false
          }
      },
      methods: {
          closeLogin(){
                this.showLogin = false;
            },
          login(params){
                const self = this;
                self.LoginLoading = true;
                AjaxLoginPanel(params).then(res => {
                    if(res.status === 'success'){
                        self.recordUserInfo(data)
                        let redirect = self.$route.path ? self.$route.path : decodeURIComponent(self.$route.query.redirect || '/ucenter');
                        self.$router.push({
                            path: redirect
                        })
                        self.closeLogin();
                    }else{
                        self.$Message.error(res.message)
                    }
                    self.LoginLoading = false;
                })
            },
        }