ant-design-vue(1.6.x)表单控件 Form表单 与 FormModel表单 数据双向绑定与表单校验
因Element不再维护，求(po)知(bu)若(de)渴(yi)寻找新的ui框架。别杠说干嘛不自己写div写css啥的，不仅费时费力，最关键的是还不一定(大神除外)写的比ui框架来得美观。网上查看了好几个ui框架，最后发现antd最为理想，由此，才有了这篇文章。项目在线地址 (有用的话，记得给个start哦)
万事开头难，然后中间难，最后更难…
- 1.要使用antd首先得进行安装、引入、注册:
// 1. 安装ant-design-vue
yarn add ant-design-vue -S 或 npm install ant-design-vue --save
// 2. 在入口文件main.js中引入注册(如果想按需引入请直接访问antd官网)
import Antd from 'ant-design-vue' // 引入antd
import 'ant-design-vue/dist/antd.css' // 引入样式文件
Vue.use(Antd)// 注册
-
2.最初选用的是官方的 Form表单 组件，刚开始入手感觉挺不适应的，特别是表单的双向绑定，使用v-model竟然给报错了，后来经过一系列的操作(查资料)，终于在茫茫度海中在到了一个稍微有点用的答案(具体地址忘了，不过还是得感谢一下那位兄弟)。
- 方案一(如果选用Form表单组件，则推荐使用此方案)
<template>
<div class="login-container">
<div class="loginFrom-container">
<a-form :form="form" @submit="handleSubmit">
<a-form-item>
<a-input v-decorator="['username', rules.username ]" placeholder="请输入用户名">
<a-icon slot="prefix" type="user" />
a-input>
a-form-item>
<a-form-item>
<a-input
v-decorator="['password', rules.password]"
:type="isShowPassword ? 'input' : 'password'"
placeholder="请输入密码"
>
<a-icon slot="prefix" type="lock" />
<a-icon slot="suffix" :type="isShowPassword ? 'eye' : 'eye-invisible'" @click="() => isShowPassword = !isShowPassword" />
a-input>
a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit" :loading="loading">
Login
a-button>
a-form-item>
a-form>
div>
div>
template>
<script>
export default {
data() {
return {
loading: false,
isShowPassword: false, // 是否显示密码
form: this.$form.createForm(this, {
name: 'dynamic_rule' }), // 表单验证
// 验证规则
rules: {
username: {
rules: [{
required: true, message: '请输入用户名' }]
},
password: {
rules: [
{
required: true, message: '请输入密码' },
{
validator: this.checkInputPassord }
]
}
}
}
},
methods: {
// 密码自定义规则
checkInputPassord(rule, value, callback) {
if (value.length < 6 && value.length > 0) {
// 这里判断规则要严谨一些，不然会在一行同时显示两条错误信息
callback('密码长度不能小于6位')
} else {
callback()
}
},
handleSubmit(e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
this.loading = true
this.$store
.dispatch('user/login', values)
.then(() => {
this.$router.push({
path: '/' })
this.loading = false
})
.catch(() => {
this.loading = false
})
}
})
}
}
}
script>
<style lang="less" scoped>
.login-container {
height: 100%;
background-color: rgb(75, 124, 189);
position: relative;
.loginFrom-container {
width: 200px;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
width: 400px;
transform: translate(-50%, -50%);
/deep/ .ant-form {
.ant-form-item {
.ant-col-8 {
width: 100%;
}
.ant-input {
height: 50px;
}
.ant-form-item-children {
.ant-btn-primary {
height: 40px;
width: 100%;
}
}
}
}
}
}
style>
- 方案二(初次使用可能不那么好理解)
<template>
<div class="login-container">
<div class="loginFrom-container">
<a-form :form="form">
<a-form-item>
<a-input v-decorator="['username', rules.username ]" placeholder="请输入用户名">
<a-icon slot="prefix" type="user" />
a-input>
a-form-item>
<a-form-item>
<a-input
v-decorator="['password', rules.password]"
:type="isShowPassword ? 'input' : 'password'"
placeholder="请输入密码"
>
<a-icon slot="prefix" type="lock" />
<a-icon slot="suffix" :type="isShowPassword ? 'eye' : 'eye-invisible'" @click="() => isShowPassword = !isShowPassword" />
a-input>
a-form-item>
<a-form-item>
<a-button type="primary" @click="getValue" :loading="loading">
Login
a-button>
a-form-item>
a-form>
div>
div>
template>
<script>
export default {
data() {
return {
loading: false,
isShowPassword: false, // 是否显示密码
form: this.$form.createForm(this, {
name: 'dynamic_rule' }), // 表单验证
// 验证规则
rules: {
username: {
rules: [{
required: true, message: '请输入用户名' }]
},
password: {
rules: [
{
required: true, message: '请输入密码' },
{
validator: this.checkInputPassord }
]
}
}
}
},
activated() {
// 生命周期钩子，挂载后和更新前被调用
this.setValue() // 设置表单的值
},
methods: {
// 密码自定义验证
checkInputPassord(rule, value, callback) {
if (value.length < 5 && value.length > 0) {
callback('密码长度不能小于6位')
} else {
callback()
}
},
// 双向绑定实现
// 1.设置表单中按先后顺序一一对应inout框所要绑定的key(有没有初始值都一样)
setValue() {
this.form.setFieldsValue({
username: '',
password: ''
})
},
// 2.获取表单中的值
getValue() {
const loginForm = this.form.getFieldsValue()
// 登录请求
this.loading = true
this.$store
.dispatch('user/login', loginForm)
.then(() => {
this.$router.push({
path: '/' })
this.loading = false
})
.catch(() => {
this.loading = false
})
}
}
}
script>
<style lang="less" scoped>
.login-container {
height: 100%;
background-color: rgb(75, 124, 189);
position: relative;
.loginFrom-container {
width: 200px;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
width: 400px;
transform: translate(-50%, -50%);
/deep/ .ant-form {
.ant-form-item {
.ant-col-8 {
width: 100%;
}
.ant-input {
height: 50px;
}
.ant-form-item-children {
.ant-btn-primary {
height: 40px;
width: 100%;
}
}
}
}
}
}
style>
- 3.由于使用Form表单组件实在不清楚怎么通过失焦来触发验证规则，询问了一堆大兄弟(同学)之后，选择采用 FormMode表单 组件，还别说，真香,验证规则、双向绑定啥的都简单了不少(跟element类似，除了失焦触发验证另需绑定blur事件之外)。强烈推荐
<template>
<div class="login-container">
<div class="loginFrom-container">
<a-form-model
ref="ruleForm"
:model="form"
:rules="rules"
>
<a-form-model-item ref="username" prop="username">
<a-input
v-model="form.username"
@blur="
() => {
$refs.username.onFieldBlur();
}
"
>
<a-icon slot="prefix" type="user" />
a-input>
a-form-model-item>
<a-form-model-item ref="password" prop="password">
<a-input
v-model="form.password"
:type="isShowPassword ? 'input' : 'password'"
@blur="
() => {
$refs.password.onFieldBlur();
}
"
>
<a-icon slot="prefix" type="lock" />
<a-icon slot="suffix" :type="isShowPassword ? 'eye' : 'eye-invisible'" @click="() => isShowPassword = !isShowPassword" />
a-input>
a-form-model-item>
<a-form-model-item>
<a-button type="primary" @click="onSubmit" :loading="loading">
登录
a-button>
a-form-model-item>
a-form-model>
div>
div>
template>
<script>
export default {
data() {
return {
loading: false,
form: {
username: '',
password: ''
},
rules: {
username: [
{
required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{
required: true, message: '请输入密码', trigger: 'blur' },
{
min: 5, message: '密码长度最少为6位', trigger: 'blur' }
]
},
isShowPassword: false
}
},
methods: {
onSubmit() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
this.loading = true
this.$store
.dispatch('user/login', this.form)
.then(() => {
this.$router.push({
path: '/' })
this.loading = false
})
.catch(() => {
this.loading = false
})
} else {
return false
}
})
},
resetForm() {
this.$refs.ruleForm.resetFields()
}
}
}
script>
<style lang="less" scoped>
.login-container {
height: 100%;
background-color: rgb(75, 124, 189);
position: relative;
.loginFrom-container {
width: 200px;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
width: 400px;
transform: translate(-50%, -50%);
/deep/ .ant-form {
.ant-form-item {
.ant-col-14 {
width: 100%;
}
.ant-input {
height: 50px;
}
.ant-form-item-children {
.ant-btn-primary {
height: 40px;
width: 100%;
}
}
}
}
}
}
style>
好了，本篇文章到此结束~~~~~~~~~~~~