登录模块

账号：zhousg

密码：123456

# 登录模块

# 路由和组件

一级路由

# 基础布局

head

main

foot

# 表单验证

# 校验规则

# 用户名

字母开头 6-20 个字符

# 密码

密码格式 6-24 个字符

# 手机号

1开头
3-9之间
9个数字

# 验证码

6个数字

#

# 重置数据

# 清楚校验结果

resetForm()

# 整体表单验证

const login = ()=>{
    formCom.value.validate().then(
    	valid = >{
            console.log(valid)
        }
    )
}

1
2
3
4
5
6
7

# 消息提示组件封装

封装成 this.$xxx 可以调用的原型指令方法

导入消息提示组件
将消息提示组件编译为虚拟节点
准备一个装载消息提示组件的DOM容器
将虚拟节点渲染在容器中
销毁组件

import yxMessage from "yxMessage"
const div = document.createElement('div')
div.setAttribute('class','xtx-container')
document.body.appendchild(div)
export default ({type,text})=>{
    const vnode = createVNode(yxMessage,{type,text})
    render(vnode,div)
    clearTimeout(timer)
    tiner = setTimeout(()=>{
        render(null,div)
    },3000)
}

1
2
3
4
5
6
7
8
9
10
11
12

# 账号手机号登入

# qq号登入

使用提供的测试接入网站

将本地的localhost 映射到测试网址

配置 vue-cli 的服务器

  // 这个是给webpack-dev-server开启可IP和域名访问权限。
  chainWebpack: config => {
      //...
    config.devServer.disableHostCheck(true)
  }

1
2
3
4
5

# sdk

基本使用

# 回调页面

2个组件

编辑

上次更新: 2023/02/07, 14:51:48

← 分类模块表单验证前置知识→