• vite基础学习笔记：13.Dialog 对话框 （用户注册与登录）

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

    1. Dialog 对话框组件

    目标效果：点击“登录/注册”，弹框

    （1）创建全局组件，在官网中查询代码粘贴

    （2） 注册和使用全局组件

    （3） 设置Visiable控制对话框的显示与隐藏

     （4）点击“登录/注册”按钮，修改Visiable的值

    2. 对话框显示内容修改

    (样式调整完毕)

    1. <template>
    2.   <div class="login">
    3.     <el-dialog v-model="userStore.Visiable" width="40%">
    4.       <el-row>
    5.         <el-col :span="12">
    6.           <div class="left">
    7.             <h1>用户登录h1>
    8.             <div class="input">
    9.               <el-form label-width="50px" style="width: 350px">
    10.                 <el-form-item label="账号">
    11.                   <el-input placeholder="请输入11位手机号" />
    12.                 el-form-item>
    13.                 <el-form-item label="密码">
    14.                   <el-input placeholder="请输入6位密码" />
    15.                 el-form-item>
    16.                 <el-form-item>
    17.                   <el-checkbox label="记住账号">el-checkbox>
    18.                 el-form-item>
    19.               el-form>
    20.             div>
    21.             <div class="button">
    22.               <el-button
    23.                 style="width: 75%"
    24.                 type="primary"
    25.                 size="default"
    26.                 @click="Login"
    27.                 >用户登录
    28.               >
    29.             div>
    30.             <div class="wechat">
    31.               <p>微信扫码登录p>
    32.               <svg
    33.                       t="1698804524149"
    34.                       class="icon"
    35.                       viewBox="0 0 1024 1024"
    36.                       version="1.1"
    37.                       xmlns="http://www.w3.org/2000/svg"
    38.                       p-id="4117"
    39.                       width="16"
    40.                       height="16"
    41.                     >
    42.                       <path
    43.                         d="M1024 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.2z"
    44.                         fill="#4CBF00"
    45.                         p-id="4118"
    46.                       >path>
    47.                       <path
    48.                         d="M358.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.56z"
    49.                         fill="#4CBF00"
    50.                         p-id="4119"
    51.                       >path>
    52.                     svg>
    53.             div>
    54.           div>
    55.         el-col>
    56.         <el-col :span="12">
    57.           <div class="right">
    58.             <div class="top">
    59.               <div class="right-left">
    60.                 <div class="right-left-top">
    61.                   <img src="../../assets/img/code_login_wechat.png" />
    62.                 div>
    63.                 <div class="right-left-bottom">
    64.                   <p>
    65.                     <svg
    66.                       t="1698804524149"
    67.                       class="icon"
    68.                       viewBox="0 0 1024 1024"
    69.                       version="1.1"
    70.                       xmlns="http://www.w3.org/2000/svg"
    71.                       p-id="4117"
    72.                       width="16"
    73.                       height="16"
    74.                     >
    75.                       <path
    76.                         d="M1024 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.2z"
    77.                         fill="#4CBF00"
    78.                         p-id="4118"
    79.                       >path>
    80.                       <path
    81.                         d="M358.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.56z"
    82.                         fill="#4CBF00"
    83.                         p-id="4119"
    84.                       >path>
    85.                     svg>
    86.                   p>
    87.                   <p>微信扫一扫关注p>
    88.                   <p>"快速预约挂号"p>
    89.                 div>
    90.               div>
    91.               <div class="right-right">
    92.                 <div class="right-right-top">
    93.                   <img src="../../assets/img/code_app.png" />
    94.                 div>
    95.                 <div class="right-right-bottom">
    96.                   <p>
    97.                     <svg
    98.                       t="1698804617407"
    99.                       class="icon"
    100.                       viewBox="0 0 1024 1024"
    101.                       version="1.1"
    102.                       xmlns="http://www.w3.org/2000/svg"
    103.                       p-id="5210"
    104.                       width="16"
    105.                       height="16"
    106.                     >
    107.                       <path
    108.                         d="M352 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 672v128z"
    109.                         fill="#1875F0"
    110.                         p-id="5211"
    111.                       >path>
    112.                     svg>
    113.                   p>
    114.                   <p>扫一扫下载p>
    115.                   <p>"预约挂号"APPp>
    116.                 div>
    117.               div>
    118.             div>
    119.             <div class="bottom">
    120.               <p>官方指定平台p>
    121.               <p>快速挂号 安全放心p>
    122.             div>
    123.           div>
    124.         el-col>
    125.       el-row>
    126.     el-dialog>
    127.   div>
    128. template>

    调整显示结果为：

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

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

     （2）表单验证

     代码如下

    1. <template>
    2.   <div class="input">
    3.     <el-form :model="state.loginParam" :rules="rules" ref="form" label-width="50px" style="width: 350px">
    4.       <el-form-item label="账号" prop="phone">
    5.         <el-input placeholder="请输入11位手机号" v-model="state.loginParam.phone">el-input>
    6.       el-form-item>
    7.       <el-form-item label="密码" prop="code">
    8.         <el-input placeholder="请输入6位密码" v-model="state.loginParam.code"/>
    9.       el-form-item>
    10.       <el-form-item>
    11.         <el-checkbox label="记住账号" v-model="state.saveUser">el-checkbox>
    12.       el-form-item>
    13.     el-form>
    14.   div>
    15. template>

    效果如下：

    4. 点击登录按钮

     本地存储：

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

  • 相关阅读:
    创建型：工厂模式-简单工厂
    Java面试题：@PostConstruct、init-method和afterPropertiesSet执行顺序？
    人工智能数学基础--概率与统计14：连续随机变量的指数分布、威布尔分布和均匀分布
    《学成在线》微服务实战项目实操笔记系列（P92~P120）【下】
    使用查找表（LUT，Look-Up Table）来进行图像像素值的线性映射，图像对比度增强
    Hadoop的YARN高可用
    「强烈收藏」Python第三方库资源大全，1000+工具包
    【JavaWeb】第五章 jQuery（下篇）
    某程序员发现 CSDN官方“漏洞”，立省￥10000+，抓紧薅吧
    SpringBoot基础之声明式事务和切面事务和编程式事务
  • 原文地址：https://blog.csdn.net/smellsummer/article/details/134050188