郑州建站模板搭建,发稿吧,中文域名注册平台,低代码无代码开发平台说明#xff1a;自学做的笔记和记录#xff0c;如有错误请指正
1. Dialog 对话框组件
目标效果#xff1a;点击“登录/注册”#xff0c;弹框
#xff08;1#xff09;创建全局组件#xff0c;在官网中查询代码粘贴 #xff08;2#xff09; 注册和使用全局组件 自学做的笔记和记录如有错误请指正
1. Dialog 对话框组件
目标效果点击“登录/注册”弹框
1创建全局组件在官网中查询代码粘贴 2 注册和使用全局组件 3 设置Visiable控制对话框的显示与隐藏 4点击“登录/注册”按钮修改Visiable的值 2. 对话框显示内容修改
(样式调整完毕)
templatediv classloginel-dialog v-modeluserStore.Visiable width40%el-rowel-col :span12div classlefth1用户登录/h1div classinputel-form label-width50px stylewidth: 350pxel-form-item label账号el-input placeholder请输入11位手机号 //el-form-itemel-form-item label密码el-input placeholder请输入6位密码 //el-form-itemel-form-itemel-checkbox label记住账号/el-checkbox/el-form-item/el-form/divdiv classbuttonel-buttonstylewidth: 75%typeprimarysizedefaultclickLogin用户登录/el-button/divdiv classwechatp微信扫码登录/psvgt1698804524149classiconviewBox0 0 1024 1024version1.1xmlnshttp://www.w3.org/2000/svgp-id4117width16height16pathdM1024 619.52c0-143.36-138.24-256-307.2-256s-307.2 112.64-307.2 256 138.24 256 307.2 256c30.72 0 61.44-5.12 92.16-10.24l97.28 51.2-25.6-76.8c87.04-51.2 143.36-128 143.36-220.16z m-414.72-40.96c-30.72 0-51.2-20.48-51.2-51.2s20.48-51.2 51.2-51.2 51.2 20.48 51.2 51.2c0 25.6-25.6 51.2-51.2 51.2z m209.92 0c-30.72 0-51.2-20.48-51.2-51.2s20.48-51.2 51.2-51.2 51.2 20.48 51.2 51.2c0 25.6-25.6 51.2-51.2 51.2zfill#4CBF00p-id4118/pathpathdM358.4 609.28c0-158.72 153.6-286.72 348.16-286.72h15.36c-40.96-133.12-179.2-235.52-353.28-235.52-204.8 0-368.64 138.24-368.64 307.2 0 107.52 66.56 204.8 168.96 256l-30.72 92.16L256 686.08c35.84 10.24 71.68 15.36 112.64 15.36h10.24c-15.36-30.72-20.48-61.44-20.48-92.16z m138.24-414.72c35.84 0 66.56 30.72 66.56 66.56s-30.72 66.56-66.56 66.56C460.8 322.56 430.08 291.84 430.08 256S460.8 194.56 496.64 194.56zM245.76 322.56c-35.84 0-61.44-30.72-61.44-66.56s30.72-66.56 66.56-66.56 61.44 30.72 61.44 66.56-30.72 66.56-66.56 66.56zfill#4CBF00p-id4119/path/svg/div/div/el-colel-col :span12div classrightdiv classtopdiv classright-leftdiv classright-left-topimg src../../assets/img/code_login_wechat.png //divdiv classright-left-bottompsvgt1698804524149classiconviewBox0 0 1024 1024version1.1xmlnshttp://www.w3.org/2000/svgp-id4117width16height16pathdM1024 619.52c0-143.36-138.24-256-307.2-256s-307.2 112.64-307.2 256 138.24 256 307.2 256c30.72 0 61.44-5.12 92.16-10.24l97.28 51.2-25.6-76.8c87.04-51.2 143.36-128 143.36-220.16z m-414.72-40.96c-30.72 0-51.2-20.48-51.2-51.2s20.48-51.2 51.2-51.2 51.2 20.48 51.2 51.2c0 25.6-25.6 51.2-51.2 51.2z m209.92 0c-30.72 0-51.2-20.48-51.2-51.2s20.48-51.2 51.2-51.2 51.2 20.48 51.2 51.2c0 25.6-25.6 51.2-51.2 51.2zfill#4CBF00p-id4118/pathpathdM358.4 609.28c0-158.72 153.6-286.72 348.16-286.72h15.36c-40.96-133.12-179.2-235.52-353.28-235.52-204.8 0-368.64 138.24-368.64 307.2 0 107.52 66.56 204.8 168.96 256l-30.72 92.16L256 686.08c35.84 10.24 71.68 15.36 112.64 15.36h10.24c-15.36-30.72-20.48-61.44-20.48-92.16z m138.24-414.72c35.84 0 66.56 30.72 66.56 66.56s-30.72 66.56-66.56 66.56C460.8 322.56 430.08 291.84 430.08 256S460.8 194.56 496.64 194.56zM245.76 322.56c-35.84 0-61.44-30.72-61.44-66.56s30.72-66.56 66.56-66.56 61.44 30.72 61.44 66.56-30.72 66.56-66.56 66.56zfill#4CBF00p-id4119/path/svg/pp微信扫一扫关注/pp快速预约挂号/p/div/divdiv classright-rightdiv classright-right-topimg src../../assets/img/code_app.png //divdiv classright-right-bottompsvgt1698804617407classiconviewBox0 0 1024 1024version1.1xmlnshttp://www.w3.org/2000/svgp-id5210width16height16pathdM352 96H224c-70.4 0-128 57.6-128 128v128c0 70.4 57.6 128 128 128h192c35.2 0 64-28.8 64-64V224c0-70.4-57.6-128-128-128z m64 319.9l-0.1 0.1H224c-17 0-33-6.7-45.1-18.9S160 369 160 352V224c0-17 6.7-33 18.9-45.1S207 160 224 160h128c17 0 33 6.7 45.1 18.9S416 207 416 224v191.9zM800 96H672c-70.4 0-128 57.6-128 128v192c0 35.2 28.8 64 64 64h192c70.4 0 128-57.6 128-128V224c0-70.4-57.6-128-128-128z m64 256c0 17-6.7 33-18.9 45.1S817 416 800 416H608.1l-0.1-0.1V224c0-17 6.7-33 18.9-45.1S655 160 672 160h128c17 0 33 6.7 45.1 18.9S864 207 864 224v128zM416 544H224c-70.4 0-128 57.6-128 128v128c0 70.4 57.6 128 128 128h128c70.4 0 128-57.6 128-128V608c0-35.2-28.8-64-64-64z m0 256c0 17-6.7 33-18.9 45.1S369 864 352 864H224c-17 0-33-6.7-45.1-18.9S160 817 160 800V672c0-17 6.7-33 18.9-45.1S207 608 224 608h191.9l0.1 0.1V800zM800 544H608c-35.2 0-64 28.8-64 64v192c0 70.4 57.6 128 128 128h128c70.4 0 128-57.6 128-128V672c0-70.4-57.6-128-128-128z m64 256c0 17-6.7 33-18.9 45.1S817 864 800 864H672c-17 0-33-6.7-45.1-18.9S608 817 608 800V608.1l0.1-0.1H800c17 0 33 6.7 45.1 18.9S864 655 864 672v128zfill#1875F0p-id5211/path/svg/pp扫一扫下载/pp预约挂号APP/p/div/div/divdiv classbottomp官方指定平台/pp快速挂号 安全放心/p/div/div/el-col/el-row/el-dialog/div
/template
script setup langts
import useUserStore from ../../store/modules/user;
let userStore useUserStore();
/script
style scoped langscss
.login {.left {border: 1px solid #ccc;h1 {font-size: 20px;margin: 30px 10px 30px 10px;}.input {margin: 0px 0px 0px 20px;// display: flex;// flex-direction: column;// align-items: center;}.button {display: flex;flex-direction: column;align-items: center;}.wechat {margin: 20px 0px;text-align: center;svg{margin: 10px 0px;}}}.right {// border: 1px solid #ccc;.top {display: flex;justify-content: space-between;img {width: 140px;height: 140px;}.right-left {margin: 30px 10px 10px 50px;.right-left-bottom {p {margin: 10px 0;display: flex;justify-content: center;align-items: center;}}}.right-right {margin: 30px 50px 10px 10px;.right-right-bottom {p {margin: 10px 0;display: flex;justify-content: center;align-items: center;}}}}.bottom {p {font-size: 15px;margin: 20px 0;display: flex;justify-content: center;align-items: center;}}}
}
/style
调整显示结果为 3.账号和密码输入并验证
(1)创建state存储双向绑定输入框内容及单选框选择 2表单验证 代码如下
templatediv classinputel-form :modelstate.loginParam :rulesrules refform label-width50px stylewidth: 350pxel-form-item label账号 propphoneel-input placeholder请输入11位手机号 v-modelstate.loginParam.phone/el-input/el-form-itemel-form-item label密码 propcodeel-input placeholder请输入6位密码 v-modelstate.loginParam.code//el-form-itemel-form-itemel-checkbox label记住账号 v-modelstate.saveUser/el-checkbox/el-form-item/el-form/div
/template
script setup langts
import { reactive, ref } from vue;
import useUserStore from ../../store/modules/user;
let userStore useUserStore();
const state reactive({loginParam: {phone: ,code: ,},saveUser: false
});
// 自定义校验规则手机号码自定义校验规则
const validatorPhone (rule: any, value: any, callBack: any) {// rule 表单校验的规则对象 value当前文本的内容 callback回调函数const reg /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;if (reg.test(value)) {callBack();} else {callBack(new Error(请输入正确的手机号格式));}
};
// 自定义校验规则验证码自定义校验规则
const validatorCode (rule: any, value: any, callBack: any) {// rule 表单校验的规则对象 value当前文本的内容 callback回调函数if (/^\d{6}$/.test(value)) {callBack();} else {callBack(new Error(请输入正确的密码格式));}
};
// 获取form组件实例
let form refany();const rules {phone: [{ trigger: change, validator: validatorPhone }],code: [{ trigger: change, validator: validatorCode }],
};
/script
效果如下 4. 点击登录按钮 本地存储 登录数据呈现
若数据仓库中phone数据为空显示“登录/注册”若有phone数据则显示
