elementui登录界面的详细介绍

1.效果

2.代码

<template><div class="container"><el-image:src="url"class="img"></el-image><!--ref 属性涉及Dom 元素的获取(el-form表单对象)。javaSrcipt 获取Dom 元素是通过：document.querySelector（".input"）获取dom元素节点 。Vue 为简化DOM获取方法提出了ref 属性和$refs 对象。一般的操作流程是ref 绑定控件，$refs 获取控件。这里用ff来标记这个表单，this.$refs['ff']来获得表单
--><el-formref="ff":model="formItems":rules="rules"><!--label-width:标签的宽度--><!--label:标签--><!--Vue组件库element-ui中的Form表单组件提供了表单验证功能通过rules属性传入验证规则Form-Item中的prop属性设置需要校验的字段名,要和rules对象中保持一致，也等价于要和表单的属性名称保持一致--><!--el-form-item元素的prop属性绑定字段名account，表单验证时，就会验证el-input元素绑定的变量formItems.account的值是否符合验证规则--><el-form-item label="账号" prop="account"><el-input v-model="formItems.account"></el-input></el-form-item><el-form-item label="密码" prop="password"><!--show-password:密码框--><el-input v-model="formItems.password" show-password></el-input></el-form-item><!--提交按钮--><el-form-item><el-button type="primary" @click="submitForm('ff')">Create</el-button><el-button @click="resetForm('ff')">Reset</el-button></el-form-item></el-form></div></template><script lang="">//导出组件export default {data() {return {//图片地址url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',//表单属性对象，和表单进行双向绑定:modelformItems: {//账号account: '',// 密码password:''},//验证规则对象，其中的属性名称要和表单对象的属性名称保持一致，否则会失效rules: {account: [{required: true,//错误提示message: '请输入账号',//事件，只有两个选项blur / changetrigger: 'blur',},{min: 3,max: 5,message: '账号3到5位',trigger: 'blur',},],password: [{required: true,//输入框类型message: '请示入密码',trigger: 'blur',},],},}},methods: {//提交点击事件，传入表单属性对象submitForm(formName) {//this.$refs[formName]获得这个表单,然后执行validate方法进行校验，// 这里的校验是点击按钮之后才会进行的校验this.$refs['ff'].validate((valid) => {if (valid) {//获得正确的属性console.log(this.formItems.account+":"+this.formItems.password)} else {console.log('error submit!!');return false}})},//重置点击事件resetForm(formName) {this.$refs[formName].resetFields()},},}
</script><style>.container{position: absolute;left: 50%;top: 50%;/*向左和上偏移半个身位*/transform: translate(-50%, -50%);background: #70e53f;padding: 30px;}.container .img{width: 100px;height: 100px;margin-bottom: 20px;border-radius:50%;}</style>

elementui登录界面的详细介绍相关推荐

Vue+element-Ui登录界面
效果图片代码块 <template><div class="main"><div class="backImg">< ...
USG6000V防火墙WEB登录界面超详细配置过程
防火墙在企业中的应用非常广泛,几乎现在每个公司的网络中都会用到防火墙,或多或少做一些安全策略.公司中也一定存在着负责日常维护这些网络设备的工作人员.如果稍微专业一点,可能他们会通过直接敲命令的方式来管 ...
Android常见界面布局(详细介绍)
一.View视图所有的UI元素都是通过View与ViewGroup构建的,对于一个Android应用的用户界面来说,ViewGroup作为容器盛装界面中的控件,它可以包含普通的View控件,也可以包 ...
.net winform panel 不刷新_winform项目——仿QQ即时通讯程序04：登录界面补充
上一篇文章给出了Login登录界面的详细制作过程,目的是让初学者体验如何对窗体上的控件进行布局,过程非常详细,如果对winform布局不熟悉的同学可以详细阅读.本篇文章将继续完成Login窗体上的注册 ...
win7 计算机登录ftp 取消保存密码,Win7系统取消登录界面的两种方法（图文）
本教程小编和大家分享Win7纯净版系统取消登录界面的两种方法,windows7系统设置电脑密码后,即使取消密码,也会出现登录界面 ,每次都要点击用户图标才能进入系统,这样比较麻烦.那么有什么办法可以取 ...
androidstudio做登录界面_Vue-cli+Element-ui实现后台管理系统（二）实现后台登录功能...
前言接上文,本文主要讲解vue+element-ui后台管理系统的登录功能的实现,api接口这块如果对后端技术以及node的实现不太了解的情况下,可以写出假数据进行模拟操作~ 一.创建登录文件并配置 ...
php ucenter home登录,UCenter Home 2.0 安装方法详细介绍
本教程为大家介绍 UCenter Home 2.0 的安装方法(以虚拟主机为例).在安装 UCenter Home 2.0 之前,请确认在服务器上已经安装过 UCenter ,UCenter 的安装方 ...
W7程序计算机面板介绍,win7系统隐藏任意程序运行界面的详细步骤
win7系统使用久了,好多网友反馈说win7系统隐藏任意程序运行界面的问题,非常不方便.有什么办法可以永久解决win7系统隐藏任意程序运行界面的问题,面对win7系统隐藏任意程序运行界面的图文步骤非常 ...
Bootstrap4+MySQL前后端综合实训-Day06-AM【eclipse详细配置Tomcat、开发web项目、servlet、连接MySQL8.0数据库、用户登录界面的编写与验证、分页查询】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录 eclipse重置视图 MySQL数据库--建数据库.建数据库 s ...

elementui登录界面的详细介绍

elementui登录界面的详细介绍

1.效果

2.代码

elementui登录界面的详细介绍相关推荐

最新文章

热门文章