首先直接上图最终效果图，由于动态效果不好录制，所以省略，后面直接看分享的演示DEMO
一、元件准备
1、文本标签两个。用于切换登录和注册两种动态面板状态，命名为：“load_state” 和 "register_state"；
2、一个动态面板。其中有两种状态，分别是“register” 和 “load”；
3、两个提交按钮，分别是注册和登录按钮，命名为：“register_btn” 和 “load_btn”；
4、注册登录页面中信息的文本输入框，在注册页中需要三个，分别命名为：“reg_username”,"reg_phonenumber","reg_password"；登录页面中有两个，分别命名为：“load_username” 和 "load_password"；
5、其他错误提示文本标签和图片logo暂省略。
值得注意的是注册登录页面中登录注册中的文本输入框的填充颜色与边框设置，如下图所示：
个人的处理方法是在文本输入框外面加上一个矩形框，同时将文本输入框的边框隐藏，并设置填充色，放入矩形框中，同时注意这里的边框是圆角矩形，因此，在外边框的矩形框中也应该调整一致。
将对应的注册页登录页的动态面板两种状态进行布局，并设置对应的颜色与交互样式。
基本布局完成后，现在添加事件用例：
二、添加用例
1、首先应该设置动态面板的两种状态，页面初始状态默认为注册状态，可以注意到，当点击不同状态时，对应状态被选中，文字显示橙色。因此应该先将登录和注册文本标签的交互样式选择为选中时文本颜色设置为橙色，默认注册时为选中。然后鼠标点击另外一个标签时，进行切换选中状态。这里我使用的是切换一个标签时，当前标签选中状态显示，另一个隐藏。但是另一种更简单的做法是将这两种标签设置为选项组。其中注册页面的用例添加如下：
2、对登录和注册按钮添加鼠标点击事件，在注册和登录时我们知道，如果其中任意文本输入框没有输入，在点击按钮后，会弹出错误提示信息，如下所示：
因此在点击按钮后，需要给出判断条件，如果文本框输入为空，则对应的文本框给出提示信息，默认提示信息隐藏。添加用例如下：
以上是注册时添加的用例判断，登录道理相同。这里面设置了全局变量，将"username"、"phonenumber" 和 "password"在注册时记录下来并存储到对应的全局变量中，以便于登录时使用。
3、最后将整个逻辑进行梳理，并调整其它不规整的地方即可。
最后，附上这个demo的原文件效果分享，望各位批评指正。
产品路上还有很多不足之处，需要学习，个人的公众号，有兴趣可以点个关注，产品路上大家共同进步～
