@58fe/p5
Version:
pc端vue组件
250 lines (226 loc) • 6.9 kB
Markdown
<script>
module.exports = {
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.form3.checkPass !== '') {
this.$refs.form3.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.form3.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
switch1: true,
labelPosition: 'right',
form1: {
name: '配置名称',
isEmail: false,
way: ['iblog', 'italk'],
desc: '这是大一段描述'
},
form: {
name: '配置名称',
isEmail: false,
way: ['iblog', 'italk'],
desc: '这是大一段描述'
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur'},
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
isEmail: [{required: true, type: 'boolean', message: '请至少选择一种方式', trigger: 'change'}],
way: [
{required: true, type: 'array', message: '请至少选择一种方式', trigger: 'change'}
],
desc: [
{required: true, message: '请填写活动形式', trigger: 'blur'},
{min: 3, message: '不能少于3字', trigger: 'blur'}
]
},
form3: {
pass: '',
checkPass: ''
},
rules3: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
]
},
form4: {
},
rules4: {
age: [
{ required: true, message: '年龄不能为空'},
// {type: 'number', message: '年龄必须为数字值', trigger: 'change'}
// { required: true, message: '年龄不能为空'},
{ type: 'number', message: '年龄必须为数字值'}
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log('submit: sucee');
} else {
console.log('校验未通过');
}
});
},
resetForm(formName) {
this.$refs['ruleForm'].resetFields();
}
}
}
</script>
<style lang="scss">
.p5-demo-example {
.p5-form{
width: 460px;
}
}
</style>
## Form 表单
### 引入
```javascript
import { form, fromItem } from '@58fe/p5'
```
引用的组件使用过程中，可以加前缀`p5-`进行使用，`p5-form`、`p5-form-item`。
### 基本用法
:::demo
```html
<p5-form label-width=80 v-model="form1">
<p5-form-item label="活动名称">
<p5-input v-model="form1.name"></p5-input>
</p5-form-item>
<p5-form-item label="活动开启">
<pswitch v-model="form1.isEmail"></pswitch>
</p5-form-item>
<p5-form-item label="活动人员">
<checkbox-group v-model="form1.way">
<checkbox label="iblog"></checkbox>
<checkbox label="italk"></checkbox>
<checkbox label="李四"></checkbox>
<checkbox :disabled=true label="小淘气"></checkbox>
</checkbox-group>
</p5-form-item>
<p5-form-item label="活动内容">
<p5-input type="textarea" v-model="form1.desc"></p5-input>
</p5-form-item>
<p5-form-item>
<btn type="primary">立即创建</btn>
<btn>取消</btn>
</p5-form-item>
</p5-form>
```
:::
### 对齐方式
:::demo
```html
<btn type="primary" @click="labelPosition='left'">左对齐</btn>
<btn type="primary" @click="labelPosition='right'">右对齐</btn>
<btn type="primary" @click="labelPosition='top'">顶部</btn>
<br/><br/>
<p5-form label-width=110 :label-position="labelPosition">
<p5-form-item label="名称">
<p5-input></p5-input>
</p5-form-item>
<p5-form-item label="描述">
<p5-input></p5-input>
</p5-form-item>
<p5-form-item label="活动具体内容">
<p5-input></p5-input>
</p5-form-item>
</p5-form>
```
:::
### 表单校验
:::demo
```html
<p5-form label-width=80 v-model="form" :rules="rules" ref="ruleForm">
<p5-form-item label="配置名称" prop="name">
<p5-input v-model="form.name"></p5-input>
</p5-form-item>
<p5-form-item label="发送邮件" prop="isEmail">
<pswitch v-model="form.isEmail"></pswitch>
</p5-form-item>
<p5-form-item label="适用平台" prop="way">
<checkbox-group v-model="form.way">
<checkbox label="iblog"></checkbox>
<checkbox label="italk"></checkbox>
<checkbox label="李四"></checkbox>
<checkbox :disabled=true label="小淘气"></checkbox>
</checkbox-group>
</p5-form-item>
<p5-form-item label="内容描述" prop="desc">
<p5-input type="textarea" v-model="form.desc"></p5-input>
</p5-form-item>
<p5-form-item>
<btn type="primary" @click="submitForm('ruleForm')">立即创建</btn>
<btn @click="resetForm('ruleForm')">重置</btn>
</p5-form-item>
</p5-form>
```
:::
### 自定义校验规则
:::demo
```html
<p5-form label-width=80 v-model="form3" :rules="rules3" ref="form3">
<p5-form-item label="密码" prop="pass">
<p5-input v-model="form3.pass"></p5-input>
</p5-form-item>
<p5-form-item label="确认密码" prop="checkPass">
<p5-input v-model="form3.checkPass"></p5-input>
</p5-form-item>
<p5-form-item>
<btn type="primary" @click="submitForm('form3')">立即创建</btn>
<btn>取消</btn>
</p5-form-item>
</p5-form>
```
:::
### 校验数字类型
数字类型的需要在`v-model`处加`.number`修饰符，源于Vue会将绑定值转化为string类型。
:::demo
```html
<p5-form label-width=80 v-model="form4" :rules="rules4" ref="form4">
<p5-form-item label="年龄" prop="age">
<p5-input v-model.number="form4.age"></p5-input>
</p5-form-item>
<p5-form-item>
<btn type="primary" @click="submitForm('form4')">立即创建</btn>
<btn>取消</btn>
</p5-form-item>
</p5-form>
```
:::
### 参数
#### Form
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | -------------- | ------------------- | ------------ | ------- |
| value | v-model方式 表单数据对象 | Object | —— | —— |
| labelWidth | 描述文案宽度 | Number|String | —— | —— |
| labelPosition | 描述文案位置 | String | left、right、top | left |
| rules | 表单校验规则,具体规则可查看[async-validator](https://www.npmjs.com/package/async-validator) | Object | —— | {} |
<br/>
#### FormItem
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | -------------- | ------------------- | ------------ | ------- |
| label | 描述文案 | String | —— | —— |
| prop | 校验属性名称 | String | —— | —— |