usage

<template>
  <div style="width: 100vw; height: 100vh">
    <login-page
      :login-success="loginSuccess"
      :register-success="registerSuccess"
      :forget-success="forgetSuccess"
      :course-list="courseList"
      :subject-list="subjectList"
      :title-list="titleList"
      :school-list="schoolList"
      @login="onLogin"
      @register="onRegister"
      @sendCode="onSend"
      @forget="onForget"
      @updateRegisterSuccess="onUpdateRegisterSuccess"
      @updateForgetSuccess="onUpdateForgetSuccess"
      @clickAgreement="clickAgreement"
    >
     <template #logo>
        <!-- 替换logo svg -->
        <span i-dcy:logo style="font-size: 27px;" />
      </template>
    </login-page>
  </div>
</template>

<script lang="ts">
import LoginPage from '@dcyjs-materials/login-page';
import '@dcyjs-materials/login-page/dist/css/index.css'

import { ref } from 'vue';

// 目前vue-live导出defineComponent存在问题，所以仅支持普通对象导出。
export default {
  name: 'BasicDemo',
  components: {
    LoginPage,
  },
  setup() {
    const loginSuccess = ref(false);
    const registerSuccess = ref(false);
    const forgetSuccess = ref(false);

    const clickAgreement = () => {
      console.log('跳转用户协议页', res);
    }

    const onLogin = (res: any) => {
      console.log(res, '用户登录信息');
      loginSuccess.value = true;
    };

    const onRegister = (res: any) => {
      console.log(res, '用户注册信息');
      registerSuccess.value = true;
    };

    const onSend = (res: boolean) => {
      console.log(res, '获取验证码');
    };

    const onForget = (res: any) => {
      console.log(res, '忘记密码');
      forgetSuccess.value = true;
    };

    const onUpdateRegisterSuccess = (res: boolean) => {
      registerSuccess.value = res;
    };

    const onUpdateForgetSuccess = (res: boolean) => {
      forgetSuccess.value = res;
    };

    const courseList = [
      {
        courseName: '计算机网络',
        id: '21323214213213',
      },
      {
        courseName: '大学英语',
        id: '12132331',
      },
      {
        courseName: '计算机组成原理',
        id: '12132331123',
      },
    ];

    const titleList = [
      {
        code: '0',
        jobTitle: '助教',
      },
      {
        code: '1',
        jobTitle: '讲师',
      },
    ];

    const schoolList = [
      {
        schoolName: '南昌交通学院',
        id: '12323213',
      },
      {
        schoolName: '汕头大学',
        id: '22',
      },
    ];

    const subjectList = [
      {
        professionName: '商务英语',
        id: 123123,
      },
      {
        professionName: '传媒',
        id: 888,
      },
    ];

    return {
      onLogin,
      onRegister,
      onSend,
      loginSuccess,
      registerSuccess,
      forgetSuccess,
      subjectList,
      courseList,
      schoolList,
      titleList,
      onUpdateRegisterSuccess,
      onUpdateForgetSuccess,
      onForget,
      clickAgreement
    };
  },
};
</script>