【vue3.0】10.0 某东到家(十)——Toast弹窗和代码拆分

全局的功能组件——自定义弹窗组件

新建src\components\Toast\Toast.vue:






修改src\views\login\Login.vue:




......

代码拆分

从上面的代码来看 ,实际上来看还是比较难阅读的。
改进src\views\login\Login.vue:




现在我们的toast弹窗专门封装出来的代码其实在每个使用弹窗的地方都需要使用,那么我们可以进一步封装到src\components\Toast\Toast.vue







怎么引入,调整src\views\login\Login.vue:




......

继续简化代码:
src\components\Toast\Toast.vue:

......

......

修改src\views\login\Login.vue:




......

进一步抽象登录的逻辑:
src\views\login\Login.vue完整代码如下:







注册页面修改

如果是电脑浏览器会自动填充密码。
解决代码:

 autocomplete="new-password"

注册页面修改如下:
src\views\register\Register.vue:






你可能感兴趣的:(【vue3.0】10.0 某东到家(十)——Toast弹窗和代码拆分)