• 1. form表单代码:表单的HTML代码。
  • 2. form表单样式:表单的CSS代码。
  • 3. dom节点的条件判断使用vue判断,根据pageParams中的属性动态判断dom元素的展示方式。
  • 4. pageParams 属性说明:
  • 字段名 说明 默认值 能否为空 取值范围
    pageParams.serverUrl 服务地址 N
    pageParams.systemLogo 系统Logo文件ID Y
    pageParams.systemTitle 系统主标题 N
    pageParams.systemTitleSize 系统主标题字体大小 26 Y 13+
    pageParams.systemSubTitle 系统副标题 Y
    pageParams.systemSubTitleSize 系统主标题字体大小 16 Y 13+
    pageParams.copyRightYear 版权年份 Y
    pageParams.copyleft 版权所属 Y
    pageParams.officialUrl 官方链接 Y
    pageParams.verificationCode 开启验证码 Y true | false
    pageParams.loginBoxPosition 登录框位置 N left | center | right
    pageParams.loginFormAction form表单action路径 N
  • 5. 表单提交method为POST
  • 6. form表单上添加@submit.prevent="submitForm"用于控制表单提交
  • 7. 表单具体内容如下表所示
  • 名称 类型 name值(表单名) v-model值(vue绑定值) lay-verify值(前端校验)
    用户名 input[text] username formData.username username
    密码 input[password] password formData.password password
    验证码 input[text] verificationCode formData.verificationCode verificationCode
    记住密码 input[checkbox] remember formData.remember
  • 8. 图形验证码的地址为:oauth/verification-code/png
  • 9. 提交按钮固定写法 <button type="submit" lay-submit>登 录</button>
以下CSS样式控制的是Form表单的对其方式,左、中、右需单独设置。设置完成后,激活表单,在系统配置中控制表单的对其方式。