add slots AuthItem, add templates auth components

This commit is contained in:
ogerly 2022-03-29 17:02:57 +02:00
parent 160ee30b7d
commit 0b215954ba
2 changed files with 58 additions and 13 deletions

View File

@ -0,0 +1,16 @@
<template>
<div>
<slot :name="type"></slot>
</div>
</template>
<script>
export default {
name: 'AuthItem',
props: {
type: {
type: String,
required: true,
},
},
}
</script>

View File

@ -1,7 +1,7 @@
<template>
<div class="auth-template h-100 w-100">
<auth-header />
<b-row class="auth-template-">
<div class="auth-template">
<auth-header @setAuthItem="setAuthItem" />
<b-row class="auth-template-content">
<b-col lg="6" md="none" sm="none">
<div class="bg-img-box d-none d-lg-block">
<!-- <b-img class="bg-img" src="/img/template/Foto_01.jpg"></b-img>-->
@ -14,22 +14,33 @@
</div>
</b-col>
<b-col lg="6" md="12" sm="12">
<auth-login />
<br />
<br />
<auth-register />
<br />
<br />
<auth-forgot-password />
<br />
<br />
<auth-reset-password />
<auth-item :type="itemType">
<template #AUTH_LOGIN>
<auth-login @setAuthItem="setAuthItem" />
</template>
<br />
<br />
<template #AUTH_REGISTER>
<auth-register :itemType="itemType" />
</template>
<br />
<br />
<template #AUTH_FORGOT_PASSWORD>
<auth-forgot-password :itemType="itemType" />
</template>
<br />
<br />
<template #AUTH_RESET_PASSWORD>
<auth-reset-password :itemType="itemType" />
</template>
</auth-item>
</b-col>
</b-row>
<!-- <auth-layout-gdd />-->
</div>
</template>
<script>
import AuthItem from '@/components/Auth/AuthItem'
import AuthHeader from '@/components/Auth/Header.vue'
import AuthLogin from '@/components/Auth/Login.vue'
import AuthRegister from '@/components/Auth/Register.vue'
@ -41,6 +52,7 @@ import AuthResetPassword from '@/components/Auth/ResetPassword.vue'
export default {
name: 'AuthTemplate',
components: {
AuthItem,
AuthHeader,
AuthLogin,
AuthRegister,
@ -48,9 +60,26 @@ export default {
AuthResetPassword,
// AuthLayoutGdd,
},
data() {
return {
itemType: 'AUTH_LOGIN',
}
},
methods: {
setAuthItem(item) {
// console.log('item', item)
this.itemType = item
},
},
}
</script>
<style lang="scss">
.auth-template {
height: 92%;
}
.auth-template-content {
height: 100%;
}
.auth-header {
z-index: 1000;
}