vite基础学习笔记:13.Dialog 对话框 (用户注册与登录)

说明:自学做的笔记和记录,如有错误请指正

1. Dialog 对话框组件

目标效果:点击“登录/注册”,弹框

(1)创建全局组件,在官网中查询代码粘贴

vite基础学习笔记:13.Dialog 对话框 (用户注册与登录)_第1张图片

(2) 注册和使用全局组件

vite基础学习笔记:13.Dialog 对话框 (用户注册与登录)_第2张图片

vite基础学习笔记:13.Dialog 对话框 (用户注册与登录)_第3张图片

(3) 设置Visiable控制对话框的显示与隐藏

vite基础学习笔记:13.Dialog 对话框 (用户注册与登录)_第4张图片

vite基础学习笔记:13.Dialog 对话框 (用户注册与登录)_第5张图片

vite基础学习笔记:13.Dialog 对话框 (用户注册与登录)_第6张图片

 (4)点击“登录/注册”按钮,修改Visiable的值

vite基础学习笔记:13.Dialog 对话框 (用户注册与登录)_第7张图片

2. 对话框显示内容修改

(样式调整完毕)

调整显示结果为:

vite基础学习笔记:13.Dialog 对话框 (用户注册与登录)_第8张图片

3.账号和密码输入并验证

(1)创建state存储双向绑定输入框内容及单选框选择

vite基础学习笔记:13.Dialog 对话框 (用户注册与登录)_第9张图片

 (2)表单验证

vite基础学习笔记:13.Dialog 对话框 (用户注册与登录)_第10张图片

 代码如下

效果如下:

vite基础学习笔记:13.Dialog 对话框 (用户注册与登录)_第11张图片

4. 点击登录按钮

vite基础学习笔记:13.Dialog 对话框 (用户注册与登录)_第12张图片

 本地存储:

vite基础学习笔记:13.Dialog 对话框 (用户注册与登录)_第13张图片

登录数据呈现:若数据仓库中phone数据为空,显示“登录/注册”,若有phone数据,则显示登录手机信息

你可能感兴趣的:(vite基础学习笔记,学习,笔记)