<template>
  <div class="loginRegComponent">
    <div class="titleBox">
      <p class="title-left"></p>
      <p v-if="title" class="title-center">{{title}}</p>
      <p class="title-right" v-if="lesgo=='去注冊'" @click="$router.push('/register')">{{lesgo}}</p>
      <p class="title-right" v-else @click="$router.push('/login')">{{lesgo}}</p>
    </div>
    <input type="text" v-model="userinfo.username" class="username input-group form-control glyphicon glyphicon-user" :placeholder="placeholderUser">
    <input type="password" v-model="userinfo.password" class="password input-group form-control" :placeholder="placeholderPsw">
    <div>
      <input type="text" v-model="userinfo.code" class="code input-group form-control" :placeholder="placeholderCode">
      <span class="codeNumber"></span>
    </div>
    <button class="btn btn-primary" @click="btnSubmit">{{btnText}}</button>
  </div>
</template>
<script>
export default {
  props: {
    title: String,
    placeholderUser:String,
    placeholderPsw: String,
    placeholderCode: Number,
    btnText:{
      default: "text", //可以傳個默認值
      type:String 		//類型
	},
    lesgo: String,
  },
  data() {
    return {
      userinfo: {
        username: null,
        password: null,
        code: null,
      },
    };
  },
  methods: {
    btnSubmit() { //發(fā)送事件  數(shù)據(jù)
      this.$emit("btnSubmit", this.userinfo);
    },
  },
};
</script>

<template>
  <div id="login" class="login" :style="{height:DocHeight+'px'}">
    <div class="container-fluid">
      <login-reg 
	      title="登錄" 
	      placeholderUser="請輸入賬號" 
	      placeholderPsw="請輸入密碼" 
	      placeholderCode="請輸入驗證碼" 
	      btnText="登錄" 
	      @btnSubmit="btnSubmit"  //接收事件
	      lesgo="去注冊"
      >
      </login-reg>
    </div>
  </div>
</template>
<script>
// 通過import的方式導入
import loginReg from "@/components/loginReg/loginReg.vue";
export default {
  name: "login",
  components: {//注冊組件
    loginReg,
  },
  data() {
    return {};
  },
  methods: {
    btnSubmit(data) {//接收子組件發(fā)送過來的事件/數(shù)據(jù)
      console.log(data);
    },
  }

? props: {
? ? rowClick: {
? ? ? type: Function,
? ? ? default: function() {}
? ? },
? ? title: {
? ? ? type: String,
? ? ? default: "標題"
? ? },
? ? display: {
? ? ? type: String,
? ? ? default: "table"?
? ? },
? ? columnCount: {
? ? ? type: Number,
? ? ? default: 4
? ? },
? ? columns: {
? ? ? type: Array,
? ? ? default() {
? ? ? ? return [];
? ? ? }
? ? },
? ? showPage: {
? ? ? type: Boolean,
? ? ? default: true
? ? },
? ? api: {
? ? ? type: Object,
? ? ? default() {
? ? ? ? return {};
? ? ? }
? ? },
? ? parameter: {
? ? ? type: Object,
? ? ? default() {
? ? ? ? return {};
? ? ? }
? ? },
? ? defaultParameter: {
? ? ? type: Boolean,
? ? ? default() {
? ? ? ? return true;
? ? ? }
? ? }
? },

?menu:{
? ? ?type:Array,
? ? ?default:function(){
? ? ? ? ?return []
? ? ?}
?}

?menu:{
? ? ?type:Array,
? ? ?default:[]
?}