elementUI使用实录
新项目开发用到了elementUI,但是对这个虽然会用,但是细枝末节的东西每次都需要看官方文档才能想起来怎么用,故,记之。
1、form表单 -- 表单验证
在防止用户犯错的前提下,尽可能让用户更早地发现并纠正错误。form组件提供了表单验证的功能,只需呀通过 rules 属性传入约定的验证规则,并将 form-item 的 prop 属性设置为需要校验的字段名即可。
<template>
<e-form :mode="dataForm" :rules="dataRule" ref="dataForm">
<el-form-item prop="userName">
<el-input v-model="dataForm.userName" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
</el-form-item>
<el-form-item prop="captcha">
<el-row :gutter="20">
<el-col :span="14">
<el-input v-model="dataForm.captcha" placeholder="验证码"></el-input>
</el-col>
<el-col :span="10" class="login-captcha">
<img :src="captchaPath" @click="getCaptcha()"
alt="">
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
</el-form-item>
</el-form>
</template> <script>
export default {
data() {
return {
dataForm: {
userName: '',
passworld: '',
uuid: '',
captcha: '',
},
dataRule: {
userName: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
}
}
},
created() {
this.getCaptcha();
},
methods: {
// 提交表单
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.$http({
url: this.$http.adornUrl('web/login'),
method: 'post',
data: this.$http.adornData({
'name': this.dataForm.userName,
'password': this.dataForm.password,
'uuid': this.dataForm.uuid,
'captcha': this.dataForm.captcha
})
}).then(({data}) => {
if (data && data.code === 200) {
this.$cookie.set('token', data.result.token)
this.$router.replace({ name: 'home' })
} else {
this.getCaptcha()
this.$message.error(data.msg)
}
})
}
})
}
}
}
</script>
elementUI使用实录的更多相关文章
- Element-ui,Mint-ui
style-loader css-loader style!css 饿了么团队开源一个基于vue 组件库 elementUI PC MintUI 移动端 官网: http://element.elem ...
- HDU-SupportOrNot训练实录
菜鸡队训练实录. 现场赛记录: 2016:[名称:奖项/排名] ZJPSC:Gold/1 CCPC中南邀请赛:Gold/1 ICPC Dalian:Gold/24 ICPC Beijing:Gold/ ...
- Web开发基本准则-55实录-缓存策略
续上篇<Web开发基本准则-55实录-Web访问安全>. Web开发基本准则-55实录-缓存策略 郑昀 创建于2013年2月 郑昀 最后更新于2013年10月26日 提纲: Web访问安全 ...
- 张小龙在2017微信公开课PRO版讲了什么(附演讲实录和2016微信数据报告)
今天2017微信公开课PRO版在广州亚运城综合体育馆举行,这次2017微信公开课大会以“下一站”为主题,而此次的微信公开课的看点大家可能就集中在腾讯公司高级副总裁.微信之父——张小龙的演讲上了!今天中 ...
- Vue2.0 + Element-UI + WebAPI实践:简易个人记账系统
最近正在学习Vue2.0相关知识,正好近期饿了么桌面端组件Element-UI发布,便动手做了一款简易个人记账系统,以达到实践及巩固目的. 1.开发环境 Win10 + VS2015 + Sqlser ...
- Web开发基本准则-55实录-Web访问安全
Web开发工程师请阅读下面的前端开发准则,这是第一部分,强调了过去几年里我们注意到的Web工程师务须处理的Web访问安全基础点.尤其是一些从传统软件开发转入互联网开发的工程师,请仔细阅读,不要因为忽视 ...
- 【MyEclipse 2015】 逆向破解实录系列【终】(纯研究)
声明 My Eclipse 2015 程序版权为Genuitec, L.L.C所有. My Eclipse 2015 的注册码.激活码等授权为Genuitec, L.L.C及其付费用户所有. 本文只从 ...
- 【MyEclipse 2015】 逆向破解实录系列【2】(纯研究)
声明 My Eclipse 2015 程序版权为Genuitec, L.L.C所有. My Eclipse 2015 的注册码.激活码等授权为Genuitec, L.L.C及其付费用户所有. 本文只从 ...
- 【MyEclipse 2015】 逆向破解实录系列【1】(纯研究)
声明 My Eclipse 2015 程序版权为Genuitec, L.L.C所有. My Eclipse 2015 的注册码.激活码等授权为Genuitec, L.L.C及其付费用户所有. 本文只从 ...
随机推荐
- 9Patch图
NinePatch是一种很有用的PNG图片格式,它可以在特定区域随文字大小进行缩放. - 上边线控制水平拉伸- 左边线控制竖直拉伸- 右边线和下边线控制内容区域 如下: 背景图片的中间区域会随着文字的 ...
- 计算机组成原理 — FPGA 现场可编程门阵列
目录 文章目录 目录 FPGA FPGA 的应用场景 FPGA 的技术难点 FPGA 的工作原理 FPGA 的体系结构 FPGA 的开发 FPGA 的使用 FPGA 的优缺点 参考文档 FPGA FP ...
- xshell一些简单的使用---1
1.下载本地window中 2.在sftp模式下输入:put会打开xshell下载到window的位置目录
- 禁用composer update命令
composer update 命令会直接把依赖的包更新到最新,会导致整个项目代码都是没有经过测试的不稳定代码 所以一定要禁止使用该命令. 正确的做法是: 更新指定的包到指定的版本(高版本的包也可以更 ...
- iis管理器的程序应用池中没有Asp.NET v4.0
然后 windows + r 输入 cmd 然后输入CD C:\Windows\Microsoft.NET\Framework64\v4.0.30319 然后 输入 aspnet_regiis.exe ...
- Windows下nginx配置多台服务器做负载均衡
Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务. Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3 ...
- 这可能是你少有的能get到测试用例编写精髓的机会!
自动化测试用例的编写是实现项目自动化的核心,合理的用例设计是保证自动化效益和实用性的关键,也直接决定了自动化脚本是否具备可扩展和可维护性.由此,本篇文章主要为大家介绍了测试用例编写的规范和注意事项. ...
- 【POJ - 3641】Pseudoprime numbers (快速幂)
Pseudoprime numbers Descriptions 费马定理指出,对于任意的素数 p 和任意的整数 a > 1,满足 ap = a (mod p) .也就是说,a的 p 次幂除以 ...
- js单击事件
<script type="text/javascript"> // 根据ID获取元素,得到按钮[注册] var elbtn=document.getElementBy ...
- 使用JedisPool资源池操作Redis,并进行性能优化
一.使用方法 ----------------------------------------- private volatile static JedisPool pool = null; //本地 ...