添加组件
- 1. 添加Form表单
- 2. 添加按钮
- 3. 添加icon图标
- 表单的数据绑定
- 编写代码
- 表单的数据验证
- 编写代码
- 登陆前的预校验
添加组件
首先打开Element-UI，在其中选择需要的组件进行添加。
1. 添加Form表单
点击显示代码，粘贴代码即可。
这里我们按需复制，复制前几行即可。自己加上结尾标签。
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>然后粘贴到login组件中，并对代码进行修改。
<!-- 登陆表单区域 -->
<el-form label-width="80px">
<!-- 用户名 -->
<el-form-item label="用户名">
<el-input ></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item label="密码">
<el-input ></el-input>
</el-form-item>
</el-form>此时查看效果，发现报错
查看错误原因，是因为访问不到那些复制进来的标签元素。
所以要在plugins下的elements.js中引入需要的组件元素。
注意同一个组件引入的元素要写在一起，最后要留一个空行
import Vue from 'vue'
import { Button, Form, FormItem, Input } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)添加成功
2. 添加按钮
一样的去Element-UI复制需要组件元素的代码，添加到login组件中
<!-- 按钮区域 -->
<el-form-item>
<el-button type="primary">登陆</el-button>
<el-button type="info">重置</el-button>
</el-form-item>然后对整个表单区域和按钮区域添加样式表，美化界面。
.btns{
display: flex;
justify-content: flex-end;
}
.loginform{
position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box; //默认是border-maincontent
}
3. 添加icon图标
可以直接使用网站提供的，直接加入类似prefix-icon="el-icon-search"即可。 也可以使用第三方图标库阿里图标库。选择所有想要的图标，然后选择代码下载。将下载好的文件放在assets下。打开文件中的demo网页，按照网页中所给的教程添加图标。 这里选择的是入口文件main.js中导入，import './assets/font/iconfont.css' 然后在login组件中加入图标。
<el-form-item label="用户名">
<el-input prefix-icon="iconfont icon-laoyonghu"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input prefix-icon="iconfont icon-mima"></el-input> </el-form-item>效果如下
表单的数据绑定
去element-ui中查看表单组件，表单代码<el-form ref="form" :model="form" label-width="80px">中的model代表数据绑定，即在Form中填写的所有数据都会同步到model对象form中，这个model对象定义在行为区data数据中。
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>接着在表单框中绑定数据对象的具体属性<el-input v-model="form.name"></el-input>即可。
编写代码
首先是登陆表单，添加model绑定对象loginform
<el-form : model="loginform" label-width="60px" class="loginform">其次是行为区数据data里定义logimform的具体属性
<script>
export default {
data(){
return{
loginform:{
username:'账号',
password:'密码'
}
}
}
}
</script>然后表单中每一个数据项绑定loginform的具体属性
<el-input v-model="loginform.username" prefix-icon="iconfont icon-laoyonghu"></el-input>
'''
<el-input v-model="loginform.password" prefix-icon="iconfont icon-mima"></el-input>运行
与数据成功绑定，密码那一栏可以在<el-input>中加上type="password"显示**。
表单的数据验证
去element-ui查看表单验证。
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator
编写代码
首先在<el-form> 通过属性绑定指定一个校验对象
<el-form :model="loginform" :rules="loginrules" label-width="60px" class="loginform">接着在data数据中定义校验对象，每一个属性都是校验规则
loginrules: {
username: [
{ required: true, message: '请输入账号', trigger: 'blur' },
{ min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 3, max: 9, message: '长度在 3 到 9 个字符', trigger: 'blur' }
]
}然后在不同的item表单里通过prop指定校验规则。
<el-form-item label="用户名" prop="username">
'''
<el-form-item label="密码" prop="password">运行
登陆前的预校验
去element-ui查看Form表单。其中form methods中有validate方法可进行校验。
首先需要拿到表单的实例对象，即<el-form>的实例对象。在el-form中添加<el-form :ref="loginref"即可。这里loginref就是表单的实例对象，获取到loginform就可以调用上图中的函数。
因为要登陆前进行预验证，所以点击登陆按钮时，需要调用一个函数。要为登陆按钮绑定一个事件。找到登陆按钮所在代码，<el-button type="primary" @click="login">登陆</el-button>绑定一个login事件。接下来需要定义这个login函数。
在行为区找到method节点，在其中定义函数。
methods: {
login() {
this.$refs.loginref.validate((valid) => {
console.log(valid);
})
}
}获取表单的实例对象loginref，然后调用validate，在这个函数里调用一个回调函数，其中第一个形参是bool值，我们通过打印判断是否验证成功。
运行
在初始化界面时就已经报错。通过查看this，发现refs中没有我们定义的loginref
原因是<el-form ref="loginref"ref前不需要加：。改正之后运行
this中refs中有了我们定义的loginref了，而且预验证成功，账号密码格式满足要求后点击登陆显示了true。
