封装弹出菜单、制作登陆页面

给v-model添加上对应的emits

查看了Vue3官网v-model的说明，写的时候若是要用到emit则需要在emits内已字符串数组填写进去。则将之前写的内容进行修改，具体修改内容见链接。

封装弹出菜单

为了方便点击左上角的按钮时候能直接触发Overlay组件，则又在封装了一个弹出菜单组件OverlayIcon，并在其他地方进行替换。

export const OverlayIcon = defineComponent({
  setup: (props, context) => {
    const refOverlayVisible = ref(false)
    const onClickMenu = () => {
      refOverlayVisible.value = !refOverlayVisible.value
    }
    return () => <>
      <Icon name='menu' class={s.icon} onClick={onClickMenu} />
      {
        refOverlayVisible.value && <Overlay onClose={() => refOverlayVisible.value = false} />
      }
    </>
  }
})

制作登陆页面

在routes.tsx路由文件内添加登陆页面路由{ path:'/sign_in', component:SignInPage }，并创建组件为SignInPage，具体详细代码见链接。

import { defineComponent, reactive } from 'vue'
import { MainLayout } from '../layouts/MainLayout'
import { Button } from '../shared/Button'
import { Form, FormItem } from '../shared/Form'
import { Icon } from '../shared/Icon'
import { validate } from '../shared/validate'
import s from './SignInPage.module.scss'
export const SignInPage = defineComponent({
  setup: (props, context) => {
    const formData = reactive({
      email: '',
      code: ''
    })
    const errors = reactive({
      email: [],
      code: []
    })
    const onSubmit = (e: Event) => {
      e.preventDefault()
      Object.assign(errors, {
        email: [], code: []
      })
      Object.assign(errors, validate(formData, [
        { key: 'email', type: 'required', message: '必填' },
        { key: 'email', type: 'pattern', regex: /^\w+@[a-z0-9]+\.[a-z]{2,4}$/, message: '必须是邮箱地址' },
        { key: 'code', type: 'required', message: '必填' },
        { key: 'code', type: 'pattern' , regex: /^\d{6}$/, message: '必须是六位数字'}
      ]))
    }
    return () => (
      <MainLayout>{
        {
          title: () => '登录',
          icon: () => <Icon name="left" />,
          default: () => (
            <div class={s.wrapper}>
              <div class={s.logo}>
                <Icon class={s.icon} name='mangosteen'/>
                <h1 class={s.appName}>山竹记账</h1>
              </div>
              <Form onSubmit={onSubmit}>
                <FormItem label="邮箱地址" type="text"
                  placeholder='请输入邮箱，然后点击发送验证码'
                  v-model={formData.email} error={errors.email?.[0]} />
                <FormItem label="验证码" type="validationCode"
                  placeholder='请输入六位数字'
                  v-model={formData.code} error={errors.code?.[0]} />
                <FormItem style={{ paddingTop: '96px' }}>
                  <Button>登录</Button>
                </FormItem>
              </Form>
            </div>
          )
        }
      }</MainLayout>
    )
  }
})

解决vscode弹出警告问题

警告问题是vue3格式化的问题，修改.vs_code的extensions.json文件。

{
  "recommendations": ["Vue.volar"]
}