Skip to content

E
Element
Commit 1c5c26b4 authored by FuryBean's avatar FuryBean Committed by GitHub
Browse files
Options

Merge pull request #71 from eleme/feat/form 

update form
parents df1e2a07 22bd899a
Hide whitespace changes
Inline Side-by-side
Showing with 293 additions and 236 deletions
examples/docs/form.md
View file @ 1c5c26b4
<script> <script>
export default { export default {
data() { data() {
var checkAge = (rule, value, callback) => {
var age = parseInt(value, 10);
setTimeout(() => {
if (!Number.isInteger(age)) {
callback(new Error('请输入数字值'));
} else{
if (age < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
var validaePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm2.checkPass !== '') {
this.$refs.ruleForm2.validateField('checkPass');
}
callback();
}
};
var validaePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm2.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return { return {
form: { form: {
name: '', name: '',
...@@ -58,7 +92,7 @@ ...@@ -58,7 +92,7 @@
{ required: true, min: 3, message: '用户名至少为 3 个字符', trigger: 'blur' } { required: true, min: 3, message: '用户名至少为 3 个字符', trigger: 'blur' }
], ],
age: [ age: [
{ type: 'number', required: true, message: '请输入年龄', trigger: 'blur' }, { required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', min: 18, message: '输入必须为大于18的整数', trigger: 'blur' } { type: 'number', min: 18, message: '输入必须为大于18的整数', trigger: 'blur' }
], ],
mail: [ mail: [
...@@ -78,26 +112,25 @@ ...@@ -78,26 +112,25 @@
rules2: { rules2: {
pass: [ pass: [
{ required: true, message: '请输入密码', trigger: 'blur' }, { required: true, message: '请输入密码', trigger: 'blur' },
{ validator: this.validaePass } { validator: validaePass }
], ],
checkPass: [ checkPass: [
{ required: true, message: '请再次输入密码', trigger: 'blur' }, { required: true, message: '请再次输入密码', trigger: 'blur' },
{ validator: this.validaePass2 } { validator: validaePass2 }
], ],
age: [ age: [
{ required: true, message: '请填写年龄', trigger: 'blur' }, { required: true, message: '请填写年龄', trigger: 'blur' },
{ validator: this.checkAge, trigger: 'change' } { validator: checkAge, trigger: 'change' }
] ]
}, },
dynamicForm: { dynamicForm: {
domains: [''], domains: [{
key: 1,
value: ''
}],
email: '' email: ''
}, },
dynamicRule: { dynamicRule: {
domains: {
type: '域名不能',
required: true
},
email: [ email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' }, { required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' } { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
...@@ -137,44 +170,10 @@ ...@@ -137,44 +170,10 @@
}); });
}, },
handleReset() { handleReset() {
this.$refs.ruleForm.resetForm(); this.$refs.ruleForm.resetFields();
}, },
handleReset2() { handleReset2() {
this.$refs.ruleForm2.resetForm(); this.$refs.ruleForm2.resetFields();
},
checkAge(rule, value, callback) {
var age = parseInt(value, 10);
// debugger;
setTimeout(() => {
if (!Number.isInteger(age)) {
callback(new Error('请输入数字值'));
} else{
if (age < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
},
validaePass(rule, value, callback) {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm2.checkPass !== '') {
this.$refs.ruleForm2.validateField('checkPass');
}
callback();
}
},
validaePass2(rule, value, callback) {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm2.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
}, },
handleValidate(prop, errorMsg) { handleValidate(prop, errorMsg) {
console.log(prop, errorMsg); console.log(prop, errorMsg);
...@@ -184,6 +183,18 @@ ...@@ -184,6 +183,18 @@
}, },
onRuleFormSubmit() { onRuleFormSubmit() {
console.log('onRuleFormSubmit'); console.log('onRuleFormSubmit');
},
removeDomain(item) {
var index = this.dynamicForm.domains.indexOf(item)
if (index !== -1) {
this.dynamicForm.domains.splice(index, 1)
}
},
addDomain() {
this.dynamicForm.domains.push({
key: this.dynamicForm.domains.length,
value: ''
});
} }
} }
} }
...@@ -269,30 +280,30 @@ ...@@ -269,30 +280,30 @@
Form 组件是一个具有校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。 Form 组件是一个具有校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
<div class="demo-box demo-form demo-form-normal"> <div class="demo-box demo-form demo-form-normal">
<el-form v-ref:form @submit.prevent="onSubmit" label-width="80px"> <el-form ref="form" @submit.prevent="onSubmit" label-width="80px">
<el-form-item label="活动名称"> <el-form-item label="活动名称">
<el-input :value.sync="form.name"></el-input> <el-input v-model="form.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="活动区域"> <el-form-item label="活动区域">
<el-select :value.sync="form.region" :width="360" placeholder="请选择活动区域"> <el-select v-model="form.region" :width="360" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option> <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> <el-option label="区域二" value="beijing"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="配送时间"> <el-form-item label="配送时间">
<el-col :span="11"> <el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker> <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col> </el-col>
<el-col class="line" :span="2">-</el-col> <el-col class="line" :span="2">-</el-col>
<el-col :span="11"> <el-col :span="11">
<el-time-picker type="fixed-time" placeholder="选择时间" style="width: 100%;"></el-time-picker> <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="蜂鸟配送"> <el-form-item label="蜂鸟配送">
<el-switch on-text="" off-text="" :value="form.delivery"></el-switch> <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
</el-form-item> </el-form-item>
<el-form-item label="活动性质"> <el-form-item label="活动性质">
<el-checkbox-group :value.sync="form.type"> <el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox> <el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox> <el-checkbox label="线下主题活动" name="type"></el-checkbox>
...@@ -300,27 +311,27 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -300,27 +311,27 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<el-form-item label="特殊资源"> <el-form-item label="特殊资源">
<el-radio :value.sync="form.resource" label="线上品牌商赞助"></el-radio> <el-radio v-model="form.resource" label="线上品牌商赞助"></el-radio>
<el-radio :value.sync="form.resource" label="线下场地免费"></el-radio> <el-radio v-model="form.resource" label="线下场地免费"></el-radio>
</el-form-item> </el-form-item>
<el-form-item label="活动形式"> <el-form-item label="活动形式">
<el-input type="textarea" :value.sync="form.desc"></el-input> <el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary">立即创建</el-button> <el-button type="primary">立即创建</el-button>
<el-button @click.prevent>取消</el-button> <el-button @click.native.prevent>取消</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
```html ```html
<template> <template>
<el-form v-ref:form @submit.prevent="onSubmit" label-width="80px"> <el-form ref="form" @submit.prevent="onSubmit" label-width="80px">
<el-form-item label="活动名称"> <el-form-item label="活动名称">
<el-input :value.sync="form.name"></el-input> <el-input v-model="form.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="活动区域"> <el-form-item label="活动区域">
<el-select :value.sync="form.region" :width="360" placeholder="请选择活动区域"> <el-select v-model="form.region" :width="360" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option> <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> <el-option label="区域二" value="beijing"></el-option>
</el-select> </el-select>
...@@ -338,7 +349,7 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -338,7 +349,7 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
<el-switch on-text="" off-text="" :value="form.delivery"></el-switch> <el-switch on-text="" off-text="" :value="form.delivery"></el-switch>
</el-form-item> </el-form-item>
<el-form-item label="活动性质"> <el-form-item label="活动性质">
<el-checkbox-group :value.sync="form.type"> <el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox> <el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox> <el-checkbox label="线下主题活动" name="type"></el-checkbox>
...@@ -346,15 +357,15 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -346,15 +357,15 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<el-form-item label="特殊资源"> <el-form-item label="特殊资源">
<el-radio :value.sync="form.resource" label="线上品牌商赞助"></el-radio> <el-radio v-model="form.resource" label="线上品牌商赞助"></el-radio>
<el-radio :value.sync="form.resource" label="线下场地免费"></el-radio> <el-radio v-model="form.resource" label="线下场地免费"></el-radio>
</el-form-item> </el-form-item>
<el-form-item label="活动形式"> <el-form-item label="活动形式">
<el-input type="textarea" :value.sync="form.desc"></el-input> <el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary">立即创建</el-button> <el-button type="primary">立即创建</el-button>
<el-button @click.prevent>取消</el-button> <el-button @click.native.prevent>取消</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
...@@ -388,9 +399,9 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -388,9 +399,9 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
<div class="demo-box demo-form demo-form-inline"> <div class="demo-box demo-form demo-form-inline">
<el-form type="inline" :model="formInline" @submit.prevent="onSubmit"> <el-form type="inline" :model="formInline" @submit.prevent="onSubmit">
<el-form-item> <el-form-item>
<el-input :value.sync="formInline.user" placeholder="审批人"></el-input> <el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item><el-form-item> </el-form-item><el-form-item>
<el-select :value.sync="formInline.region" :width="150" placeholder="请选择活动区域"> <el-select v-model="formInline.region" :width="150" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option> <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> <el-option label="区域二" value="beijing"></el-option>
</el-select> </el-select>
...@@ -404,9 +415,9 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -404,9 +415,9 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
<template> <template>
<el-form type="inline" :model="formInline" @submit.prevent="onSubmit"> <el-form type="inline" :model="formInline" @submit.prevent="onSubmit">
<el-form-item> <el-form-item>
<el-input :value.sync="formInline.user" placeholder="审批人"></el-input> <el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item><el-form-item> </el-form-item><el-form-item>
<el-select :value.sync="formInline.region" :width="150" placeholder="请选择活动区域"> <el-select v-model="formInline.region" :width="150" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option> <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> <el-option label="区域二" value="beijing"></el-option>
</el-select> </el-select>
...@@ -439,23 +450,23 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -439,23 +450,23 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
<div class="demo-box demo-form demo-form-stacked"> <div class="demo-box demo-form demo-form-stacked">
<el-form type="stacked" :model="formStacked" @submit.prevent="onSubmit"> <el-form type="stacked" :model="formStacked" @submit.prevent="onSubmit">
<el-form-item label="名称"> <el-form-item label="名称">
<el-input :value.sync="formStacked.name"></el-input> <el-input v-model="formStacked.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="活动区域"> <el-form-item label="活动区域">
<el-select :value.sync="formStacked.region" :width="360" placeholder="请选择活动区域"> <el-select v-model="formStacked.region" :width="360" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option> <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> <el-option label="区域二" value="beijing"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="活动展开形式"> <el-form-item label="活动展开形式">
<el-input :value.sync="formStacked.type"></el-input> <el-input v-model="formStacked.type"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="备注"> <el-form-item label="备注">
<el-input :value.sync="formStacked.remark"></el-input> <el-input v-model="formStacked.remark"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary">立即创建</el-button> <el-button type="primary">立即创建</el-button>
<el-button @click.prevent>取消</el-button> <el-button @click.native.prevent>取消</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -464,23 +475,23 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -464,23 +475,23 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
<template> <template>
<el-form type="stacked" :model="formStacked" @submit.prevent="onSubmit"> <el-form type="stacked" :model="formStacked" @submit.prevent="onSubmit">
<el-form-item label="名称"> <el-form-item label="名称">
<el-input :value.sync="formStacked.name"></el-input> <el-input v-model="formStacked.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="活动区域"> <el-form-item label="活动区域">
<el-select :value.sync="formStacked.region" :width="360" placeholder="请选择活动区域"> <el-select v-model="formStacked.region" :width="360" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option> <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> <el-option label="区域二" value="beijing"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="活动展开形式"> <el-form-item label="活动展开形式">
<el-input :value.sync="formStacked.type"></el-input> <el-input v-model="formStacked.type"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="备注"> <el-form-item label="备注">
<el-input :value.sync="formStacked.remark"></el-input> <el-input v-model="formStacked.remark"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary">立即创建</el-button> <el-button type="primary">立即创建</el-button>
<el-button @click.prevent>取消</el-button> <el-button @click.native.prevent>取消</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
...@@ -510,16 +521,16 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -510,16 +521,16 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
<div class="demo-box demo-form"> <div class="demo-box demo-form">
<el-form :model="formAlignLeft" label-align="left" @submit.prevent="onSubmit" label-width="80px"> <el-form :model="formAlignLeft" label-align="left" @submit.prevent="onSubmit" label-width="80px">
<el-form-item label="名称"> <el-form-item label="名称">
<el-input :value.sync="formAlignLeft.name"></el-input> <el-input v-model="formAlignLeft.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="推广地"> <el-form-item label="推广地">
<el-select :value.sync="formAlignLeft.region" :width="360" placeholder="请选择活动区域"> <el-select v-model="formAlignLeft.region" :width="360" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option> <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> <el-option label="区域二" value="beijing"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="活动形式"> <el-form-item label="活动形式">
<el-input :value.sync="formAlignLeft.type"></el-input> <el-input v-model="formAlignLeft.type"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary">查询</el-button> <el-button type="primary">查询</el-button>
...@@ -531,16 +542,16 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -531,16 +542,16 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
<template> <template>
<el-form :model="formAlignLeft" label-align="left" @submit.prevent="onSubmit" label-width="80px"> <el-form :model="formAlignLeft" label-align="left" @submit.prevent="onSubmit" label-width="80px">
<el-form-item label="名称"> <el-form-item label="名称">
<el-input :value.sync="formAlignLeft.name"></el-input> <el-input v-model="formAlignLeft.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="推广地"> <el-form-item label="推广地">
<el-select :value.sync="formAlignLeft.region" :width="360" placeholder="请选择活动区域"> <el-select v-model="formAlignLeft.region" :width="360" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option> <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> <el-option label="区域二" value="beijing"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="活动形式"> <el-form-item label="活动形式">
<el-input :value.sync="formAlignLeft.type"></el-input> <el-input v-model="formAlignLeft.type"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary">查询</el-button> <el-button type="primary">查询</el-button>
...@@ -572,14 +583,14 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -572,14 +583,14 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
<div class="demo-box demo-form"> <div class="demo-box demo-form">
<el-form :model="formNoLabel" @submit.prevent="onSubmit" style="width: 360px;"> <el-form :model="formNoLabel" @submit.prevent="onSubmit" style="width: 360px;">
<el-form-item> <el-form-item>
<el-input :value.sync="formNoLabel.username" placeholder="手机号码/电子邮箱"></el-input> <el-input v-model="formNoLabel.username" placeholder="手机号码/电子邮箱"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-input :value.sync="formNoLabel.pass" placeholder="账户密码" auto-complete="off"></el-input> <el-input v-model="formNoLabel.pass" placeholder="账户密码" auto-complete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" class="fr">登录</el-button> <el-button type="primary" class="fr">登录</el-button>
<el-checkbox :value.sync="formNoLabel.rememberPss" label="记住密码"></el-checkbox> <el-checkbox v-model="formNoLabel.rememberPss" label="记住密码"></el-checkbox>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -588,14 +599,14 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -588,14 +599,14 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
<template> <template>
<el-form :model="formNoLabel" @submit.prevent="onSubmit" style="width: 360px;"> <el-form :model="formNoLabel" @submit.prevent="onSubmit" style="width: 360px;">
<el-form-item> <el-form-item>
<el-input :value.sync="formNoLabel.username" placeholder="手机号码/电子邮箱"></el-input> <el-input v-model="formNoLabel.username" placeholder="手机号码/电子邮箱"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-input :value.sync="formNoLabel.pass" placeholder="账户密码" auto-complete="off"></el-input> <el-input v-model="formNoLabel.pass" placeholder="账户密码" auto-complete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" class="fr">登录</el-button> <el-button type="primary" class="fr">登录</el-button>
<el-checkbox :value.sync="formNoLabel.rememberPss" label="记住密码"></el-checkbox> <el-checkbox v-model="formNoLabel.rememberPss" label="记住密码"></el-checkbox>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
...@@ -622,37 +633,37 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -622,37 +633,37 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
## 表单验证 ## 表单验证
<div class="demo-box demo-form demo-ruleForm"> <div class="demo-box demo-form demo-ruleForm">
<el-form :model="ruleForm" :rules="rules" v-ref:rule-form label-width="80px"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
<el-form-item label="用户名" :required="true"> <el-form-item label="用户名" :required="true">
<el-col :span="11"> <el-col :span="11">
<el-form-item prop="user1"> <el-form-item prop="user1">
<el-input :value.sync="ruleForm.user1" placeholder="First Name"></el-input> <el-input v-model="ruleForm.user1" placeholder="First Name"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="2"><div class="line">-</div></el-col> <el-col :span="2"><div class="line">-</div></el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item prop="user2"> <el-form-item prop="user2">
<el-input :value.sync="ruleForm.user2" placeholder="Last Name"></el-input> <el-input v-model="ruleForm.user2" placeholder="Last Name"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="年龄" prop="age"> <el-form-item label="年龄" prop="age">
<el-input :value.sync="ruleForm.age" :number="true"></el-input> <el-input v-model="ruleForm.age" :number="true"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="邮箱" prop="mail"> <el-form-item label="邮箱" prop="mail">
<el-input :value.sync="ruleForm.mail"></el-input> <el-input v-model="ruleForm.mail"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="性别" prop="sex"> <el-form-item label="性别" prop="sex">
<el-radio-group :value.sync="ruleForm.sex"> <el-radio-group v-model="ruleForm.sex">
<el-radio label="男" name="sex"></el-radio> <el-radio label="男" name="sex"></el-radio>
<el-radio label="女" name="sex"></el-radio> <el-radio label="女" name="sex"></el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="简介" prop="desc"> <el-form-item label="简介" prop="desc">
<el-input type="textarea" :value.sync="ruleForm.desc"></el-input> <el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="地区" prop="region" placeholder="请选择地区"> <el-form-item label="地区" prop="region" placeholder="请选择地区">
<el-checkbox-group :value.sync="ruleForm.region"> <el-checkbox-group v-model="ruleForm.region">
<el-checkbox label="BeiJing" name="region"></el-checkbox> <el-checkbox label="BeiJing" name="region"></el-checkbox>
<el-checkbox label="ShangHai" name="region"></el-checkbox> <el-checkbox label="ShangHai" name="region"></el-checkbox>
<el-checkbox label="ShenZhen" name="region"></el-checkbox> <el-checkbox label="ShenZhen" name="region"></el-checkbox>
...@@ -660,45 +671,45 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -660,45 +671,45 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click.prevent="handleSubmit">提交</el-button> <el-button type="primary" @click.native.prevent="handleSubmit">提交</el-button>
<el-button @click.prevent="handleReset">重置</el-button> <el-button @click.native.prevent="handleReset">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
```html ```html
<template> <template>
<el-form :model="ruleForm" :rules="rules" v-ref:rule-form label-width="80px"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
<el-form-item label="用户名" :required="true"> <el-form-item label="用户名" :required="true">
<el-col :span="11"> <el-col :span="11">
<el-form-item prop="user1"> <el-form-item prop="user1">
<el-input :value.sync="ruleForm.user1" placeholder="First Name"></el-input> <el-input v-model="ruleForm.user1" placeholder="First Name"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="2"><div class="line">-</div></el-col> <el-col :span="2"><div class="line">-</div></el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item prop="user2"> <el-form-item prop="user2">
<el-input :value.sync="ruleForm.user2" placeholder="Last Name"></el-input> <el-input v-model="ruleForm.user2" placeholder="Last Name"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="年龄" prop="age"> <el-form-item label="年龄" prop="age">
<el-input :value.sync="ruleForm.age" :number="true"></el-input> <el-input v-model="ruleForm.age" :number="true"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="邮箱" prop="mail"> <el-form-item label="邮箱" prop="mail">
<el-input :value.sync="ruleForm.mail"></el-input> <el-input v-model="ruleForm.mail"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="性别" prop="sex"> <el-form-item label="性别" prop="sex">
<el-radio-group :value.sync="ruleForm.sex"> <el-radio-group v-model="ruleForm.sex">
<el-radio label="男" name="sex"></el-radio> <el-radio label="男" name="sex"></el-radio>
<el-radio label="女" name="sex"></el-radio> <el-radio label="女" name="sex"></el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="简介" prop="desc"> <el-form-item label="简介" prop="desc">
<el-input type="textarea" :value.sync="ruleForm.desc"></el-input> <el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="地区" prop="region" placeholder="请选择地区"> <el-form-item label="地区" prop="region" placeholder="请选择地区">
<el-checkbox-group :value.sync="ruleForm.region"> <el-checkbox-group v-model="ruleForm.region">
<el-checkbox label="BeiJing" name="region"></el-checkbox> <el-checkbox label="BeiJing" name="region"></el-checkbox>
<el-checkbox label="ShangHai" name="region"></el-checkbox> <el-checkbox label="ShangHai" name="region"></el-checkbox>
<el-checkbox label="ShenZhen" name="region"></el-checkbox> <el-checkbox label="ShenZhen" name="region"></el-checkbox>
...@@ -731,6 +742,10 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -731,6 +742,10 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
user2: [ user2: [
{ required: true, min: 3, message: '用户名至少为 3 个字符', trigger: 'blur' } { required: true, min: 3, message: '用户名至少为 3 个字符', trigger: 'blur' }
], ],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', min: 18, message: '输入必须为大于18的整数', trigger: 'blur' }
],
mail: [ mail: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' }, { required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' } { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
...@@ -748,6 +763,9 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -748,6 +763,9 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
}; };
}, },
methods: { methods: {
handleReset() {
this.$refs.ruleForm.resetFields();
},
handleSubmit(ev) { handleSubmit(ev) {
this.$refs.ruleForm.validate((valid) => { this.$refs.ruleForm.validate((valid) => {
if (valid) { if (valid) {
...@@ -766,44 +784,78 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -766,44 +784,78 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
## 自定义校验规则 ## 自定义校验规则
<div class="demo-box demo-form demo-ruleForm"> <div class="demo-box demo-form demo-ruleForm">
<el-form :model="ruleForm2" :rules="rules2" v-ref:rule-form2 label-width="80px"> <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="80px">
<el-form-item label="密码" prop="pass"> <el-form-item label="密码" prop="pass">
<el-input type="password" :value.sync="ruleForm2.pass" auto-complete="off"></el-input> <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="确认密码" prop="checkPass"> <el-form-item label="确认密码" prop="checkPass">
<el-input type="password" :value.sync="ruleForm2.checkPass" auto-complete="off"></el-input> <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="年龄" prop="age"> <el-form-item label="年龄" prop="age">
<el-input :value.sync="ruleForm2.age"></el-input> <el-input v-model="ruleForm2.age"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click.prevent="handleSubmit2">提交</el-button> <el-button type="primary" @click.native.prevent="handleSubmit2">提交</el-button>
<el-button @click.prevent="handleReset2">重置</el-button> <el-button @click.native.prevent="handleReset2">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
```html ```html
<template> <template>
<el-form :model="ruleForm2" :rules="rules2" v-ref:rule-form2 label-width="80px"> <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="80px">
<el-form-item label="密码" prop="pass"> <el-form-item label="密码" prop="pass">
<el-input type="password" :value.sync="ruleForm2.pass" auto-complete="off"></el-input> <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="确认密码" prop="checkPass"> <el-form-item label="确认密码" prop="checkPass">
<el-input type="password" :value.sync="ruleForm2.checkPass" auto-complete="off"></el-input> <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="年龄" prop="age"> <el-form-item label="年龄" prop="age">
<el-input :value.sync="ruleForm2.age"></el-input> <el-input v-model="ruleForm2.age"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click.prevent="handleSubmit2">提交</el-button> <el-button type="primary" @click.native.prevent="handleSubmit2">提交</el-button>
<el-button @click.prevent="handleReset2">重置</el-button> <el-button @click.native.prevent="handleReset2">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
var checkAge = (rule, value, callback) => {
var age = parseInt(value, 10);
setTimeout(() => {
if (!Number.isInteger(age)) {
callback(new Error('请输入数字值'));
} else{
if (age < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
var validaePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm2.checkPass !== '') {
this.$refs.ruleForm2.validateField('checkPass');
}
callback();
}
};
var validaePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm2.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return { return {
ruleForm2: { ruleForm2: {
pass: '', pass: '',
...@@ -813,22 +865,25 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -813,22 +865,25 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
rules2: { rules2: {
pass: [ pass: [
{ required: true, message: '请输入密码', trigger: 'blur' }, { required: true, message: '请输入密码', trigger: 'blur' },
{ validator: this.validaePass } { validator: validaePass }
], ],
checkPass: [ checkPass: [
{ required: true, message: '请再次输入密码', trigger: 'blur' }, { required: true, message: '请再次输入密码', trigger: 'blur' },
{ validator: this.validaePass2 } { validator: validaePass2 }
], ],
age: [ age: [
{ required: true, message: '请填写年龄', trigger: 'blur' }, { required: true, message: '请填写年龄', trigger: 'blur' },
{ validator: this.checkAge, trigger: 'change' } { validator: checkAge, trigger: 'change' }
] ]
} }
}; };
}, },
methods: { methods: {
handleSubmit(ev) { handleReset2() {
this.$refs.ruleForm.validate((valid) => { this.$refs.ruleForm2.resetFields();
},
handleSubmit2(ev) {
this.$refs.ruleForm2.validate((valid) => {
if (valid) { if (valid) {
alert('submit!'); alert('submit!');
} else { } else {
...@@ -845,42 +900,54 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -845,42 +900,54 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
## 动态增减表单项 ## 动态增减表单项
<div class="demo-box demo-form demo-dynamic"> <div class="demo-box demo-form demo-dynamic">
<el-form :model="dynamicForm" :rules="dynamicRule" v-ref:dynamic-form label-width="80px"> <el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="80px">
<el-form-item prop="email" label="邮箱"> <el-form-item prop="email" label="邮箱">
<el-input :value.sync="dynamicForm.email"></el-input> <el-input v-model="dynamicForm.email"></el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-for="domain in dynamicForm.domains" v-for="(domain, index) in dynamicForm.domains"
:label="'域名' + $index" :label="'域名' + index"
track-by="$index" :key="domain.key"
:prop="'domains:' + $index" :prop="'domains:' + index"
:rules="{ required: true, message: '域名不能为空', trigger: 'blur' }"> :rules="{
<el-input :value.sync="domain"></el-input><el-button @click="dynamicForm.domains.$remove(domain)">删除</el-button> type: 'object', required: true,
fields: {
value: { required: true, message: '域名不能为空', trigger: 'blur' }
}
}"
>
<el-input v-model="domain.value"></el-input><el-button @click.native.prevent="removeDomain(domain)">删除</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click.prevent="handleSubmit3">提交</el-button> <el-button type="primary" @click.native.prevent="handleSubmit3">提交</el-button>
<el-button @click.prevent="dynamicForm.domains.push('')">新增域名</el-button> <el-button @click.native.prevent="addDomain">新增域名</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
```html ```html
<template> <template>
<el-form :model="dynamicForm" :rules="dynamicRule" v-ref:dynamic-form label-width="80px"> <el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="80px">
<el-form-item prop="email" label="邮箱"> <el-form-item prop="email" label="邮箱">
<el-input :value.sync="dynamicForm.email"></el-input> <el-input v-model="dynamicForm.email"></el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-for="domain in dynamicForm.domains" v-for="(domain, index) in dynamicForm.domains"
:label="'域名' + $index" :label="'域名' + index"
track-by="$index" :key="domain.key"
:prop="'domains:' + $index" :prop="'domains:' + index"
:rules="{ required: true, message: '域名不能为空', trigger: 'blur' }"> :rules="{
<el-input :value.sync="domain"></el-input><el-button @click="dynamicForm.domains.$remove(domain)">删除</el-button> type: 'object', required: true,
fields: {
value: { required: true, message: '域名不能为空', trigger: 'blur' }
}
}"
>
<el-input v-model="domain.value"></el-input><el-button @click.native.prevent="removeDomain(domain)">删除</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click.prevent="handleSubmit3">提交</el-button> <el-button type="primary" @click.native.prevent="handleSubmit3">提交</el-button>
<el-button @click.prevent="dynamicForm.domains.push('')">新增域名</el-button> <el-button @click.native.prevent="addDomain">新增域名</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
...@@ -889,14 +956,13 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -889,14 +956,13 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
data() { data() {
return { return {
dynamicForm: { dynamicForm: {
domains: [''], domains: [{
key: 1,
value: ''
}],
email: '' email: ''
}, },
dynamicRule: { dynamicRule: {
domains: {
type: '域名不能',
required: true
},
email: [ email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' }, { required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' } { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
...@@ -914,6 +980,18 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -914,6 +980,18 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
return false; return false;
} }
}); });
},
removeDomain(item) {
var index = this.dynamicForm.domains.indexOf(item)
if (index !== -1) {
this.dynamicForm.domains.splice(index, 1)
}
},
addDomain() {
this.dynamicForm.domains.push({
key: this.dynamicForm.domains.length,
value: ''
});
} }
} }
} }
...@@ -938,7 +1016,7 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单 ...@@ -938,7 +1016,7 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
|---------- |-------------- |---------- |-------- | |---------- |-------------- |---------- |-------- |
| validate(cb) | 对整个表单进行校验的方法, 校验结束后会调用传入的回调方法, cb(valid), valid 参数是校验 bool 值结果 | function | | | validate(cb) | 对整个表单进行校验的方法, 校验结束后会调用传入的回调方法, cb(valid), valid 参数是校验 bool 值结果 | function | |
| validateField(prop, cb) | 对部分表单字段进行校验的方法 | | | | validateField(prop, cb) | 对部分表单字段进行校验的方法 | | |
| resetForm | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 | | | | resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 | | |
## el-form-item API ## el-form-item API
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
......
packages/checkbox/src/checkbox-group.vue
View file @ 1c5c26b4
...@@ -7,16 +7,13 @@ ...@@ -7,16 +7,13 @@
mixins: [emitter], mixins: [emitter],
props: { props: {
value: { value: {}
default: '',
required: true
}
}, },
watch: { watch: {
value(value) { value(value) {
this.$emit('change', value); this.$emit('change', value);
this.dispatch('form-item', 'el.form.change', value); this.dispatch('form-item', 'el.form.change', [value]);
} }
} }
}; };
......
packages/form/package.json
View file @ 1c5c26b4
...@@ -12,6 +12,6 @@ ...@@ -12,6 +12,6 @@
"author": "haiping.zeng<haiping.zeng@ele.me>", "author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"async-validator": "^1.6.3" "async-validator": "^1.6.5"
} }
} }
packages/form/src/form-item.vue
View file @ 1c5c26b4
...@@ -2,14 +2,16 @@ ...@@ -2,14 +2,16 @@
<div class="el-form-item" :class="{ <div class="el-form-item" :class="{
'is-error': error !== '', 'is-error': error !== '',
'is-validating': validating, 'is-validating': validating,
'is-required': required 'is-required': isRequired || required
}"> }">
<label class="el-form-item__label" v-bind:style="labelStyle" v-if="label"> <label class="el-form-item__label" v-bind:style="labelStyle" v-if="label">
{{label + form.labelSuffix}} {{label + form.labelSuffix}}
</label> </label>
<div class="el-form-item__content" v-bind:style="contentStyle"> <div class="el-form-item__content" v-bind:style="contentStyle">
<slot></slot> <slot></slot>
<div class="el-form-item__error" v-if="error !== ''" transition="md-fade-bottom">{{error}}</div> <transition name="md-fade-bottom">
<div class="el-form-item__error" v-if="error !== ''">{{error}}</div>
</transition>
</div> </div>
</div> </div>
</template> </template>
...@@ -50,24 +52,23 @@ ...@@ -50,24 +52,23 @@
}, },
form() { form() {
var parent = this.$parent; var parent = this.$parent;
while (parent.$el.tagName !== 'FORM') { while (parent.$options.componentName !== 'form') {
parent = parent.$parent; parent = parent.$parent;
} }
return parent; return parent;
}, },
fieldValue() { fieldValue: {
var model = this.form.model; cache: false,
if (!model) { return; } get() {
var model = this.form.model;
if (!model[this.prop]) { if (!model || !this.prop) { return; }
let temp = this.prop.split(':');
return model[temp[0]][temp[1]]; var temp = this.prop.split(':');
} else {
return model[this.prop]; return temp.length > 1
? model[temp[0]][temp[1]]
: model[this.prop];
} }
},
fieldRule() {
return this.rules || (this.form.rules ? this.form.rules[this.prop] : null);
} }
}, },
data() { data() {
...@@ -76,7 +77,8 @@ ...@@ -76,7 +77,8 @@
error: '', error: '',
validateDisabled: false, validateDisabled: false,
validating: false, validating: false,
validator: {} validator: {},
isRequired: false
}; };
}, },
methods: { methods: {
...@@ -98,7 +100,7 @@ ...@@ -98,7 +100,7 @@
model[this.prop] = this.fieldValue; model[this.prop] = this.fieldValue;
validator.validate(model, { first: true, firstFields: true }, (errors, fields) => { validator.validate(model, { firstFields: true }, (errors, fields) => {
this.valid = !errors; this.valid = !errors;
this.error = errors ? errors[0].message : ''; this.error = errors ? errors[0].message : '';
...@@ -111,7 +113,7 @@ ...@@ -111,7 +113,7 @@
this.error = ''; this.error = '';
let model = this.form.model; let model = this.form.model;
let value = model[this.prop]; let value = this.fieldValue;
if (Array.isArray(value) && value.length > 0) { if (Array.isArray(value) && value.length > 0) {
this.validateDisabled = true; this.validateDisabled = true;
...@@ -124,60 +126,49 @@ ...@@ -124,60 +126,49 @@
model[this.prop] = 0; model[this.prop] = 0;
} }
}, },
getRules() {
if (!this.prop) { return []; }
var rules = this.rules || (this.form.rules ? this.form.rules[this.prop] : []);
return Array.isArray(rules) ? rules : [rules];
},
getFilteredRule(trigger) { getFilteredRule(trigger) {
var rules = this.fieldRule; var rules = this.getRules();
if (!rules) { return null; }
if (!trigger) { return rules; }
if (Array.isArray(rules)) {
return rules.filter(rule => {
return !rule.trigger || rule.trigger.indexOf(trigger) !== -1;
});
}
if (rules.trigger && rules.trigger.indexOf(trigger) === -1) { return rules.filter(rule => {
return null; return !rule.trigger || rule.trigger.indexOf(trigger) !== -1;
} else { });
return rules; },
} onFieldBlur() {
}
},
ready() {
var rules = this.fieldRule;
if (rules) {
if (Array.isArray(rules)) {
rules.every(rule => {
if (rule.required) {
this.required = true;
return false;
}
});
} else {
this.required = !!this.rules.required;
}
}
if (this.prop) {
this.dispatch('form', 'el.form.addField', this);
}
},
events: {
'el.form.blur'(value) {
this.validate('blur'); this.validate('blur');
}, },
'el.form.change'(value, useTrigger = true) { onFieldChange() {
if (this.validateDisabled) { if (this.validateDisabled) {
this.validateDisabled = false; this.validateDisabled = false;
return; return;
} }
var trigger = useTrigger ? 'change' : ''; this.validate('change');
this.validate(trigger); }
},
mounted() {
var rules = this.getRules();
rules.every(rule => {
if (rule.required) {
this.isRequired = true;
return false;
}
});
if (this.prop) {
this.dispatch('form', 'el.form.addField', [this]);
} }
this.$on('el.form.blur', this.onFieldBlur);
this.$on('el.form.change', this.onFieldChange);
}, },
beforeDestroy() { beforeDestroy() {
this.dispatch('form', 'el.form.removeField', this); this.dispatch('form', 'el.form.removeField', [this]);
} }
}; };
</script> </script>
packages/form/src/form.vue
View file @ 1c5c26b4
...@@ -7,8 +7,6 @@ ...@@ -7,8 +7,6 @@
</form> </form>
</template> </template>
<script> <script>
import AsyncValidator from 'async-validator';
export default { export default {
name: 'ElForm', name: 'ElForm',
...@@ -28,27 +26,21 @@ ...@@ -28,27 +26,21 @@
data() { data() {
return { return {
fields: {}, fields: {},
fieldLength: 0, fieldLength: 0
validator: {}
}; };
}, },
ready() { created() {
if (this.rules) { this.$on('el.form.addField', (field) => {
this.validator = new AsyncValidator(this.rules);
}
},
events: {
'el.form.addField'(field) {
this.fields[field.prop] = field; this.fields[field.prop] = field;
this.fieldLength++; this.fieldLength++;
}, });
'el.form.removeField'(field) { this.$on('el.form.removeField', (field) => {
delete this.fields[field.prop]; delete this.fields[field.prop];
this.fieldLength--; this.fieldLength--;
} });
}, },
methods: { methods: {
resetForm() { resetFields() {
for (let prop in this.fields) { for (let prop in this.fields) {
let field = this.fields[prop]; let field = this.fields[prop];
field.resetField(); field.resetField();
......
packages/input/src/input.vue
View file @ 1c5c26b4
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</div> </div>
</template> </template>
<!-- 写成垂直的方式会导致 placeholder 失效, 蜜汁bug --> <!-- 写成垂直的方式会导致 placeholder 失效, 蜜汁bug -->
<textarea v-else v-model="currentValue" class="el-textarea__inner" :name="name" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" @focus="$emit('onfocus', val)" @blur="handleBlur"></textarea> <textarea v-else v-model="currentValue" class="el-textarea__inner" :name="name" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" @focus="$emit('onfocus', currentValue)" @blur="handleBlur"></textarea>
</div> </div>
</template> </template>
<script> <script>
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
mixins: [emitter], mixins: [emitter],
props: { props: {
value: {}, value: [String, Number],
placeholder: { placeholder: {
type: String, type: String,
default: '' default: ''
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
'currentValue'(val) { 'currentValue'(val) {
this.$emit('input', val); this.$emit('input', val);
this.$emit('onchange', val); this.$emit('onchange', val);
this.dispatch('form-item', 'el.form.change', val); this.dispatch('form-item', 'el.form.change', [val]);
} }
} }
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment