81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
|
<template>
|
|||
|
<uvForm
|
|||
|
ref="uForm"
|
|||
|
:model="model"
|
|||
|
:rules="rules"
|
|||
|
:errorType="errorType"
|
|||
|
:borderBottom="borderBottom"
|
|||
|
:labelPosition="labelPosition"
|
|||
|
:labelWidth="labelWidth"
|
|||
|
:labelAlign="labelAlign"
|
|||
|
:labelStyle="labelStyle"
|
|||
|
:customStyle="customStyle"
|
|||
|
>
|
|||
|
<slot />
|
|||
|
</uvForm>
|
|||
|
</template>
|
|||
|
|
|||
|
<script>
|
|||
|
/**
|
|||
|
* 此组件存在的理由是,在nvue下,u-form被uni-app官方占用了,u-form在nvue中相当于form组件
|
|||
|
* 所以在nvue下,取名为u--form,内部其实还是u-form.vue,只不过做一层中转
|
|||
|
*/
|
|||
|
import uvForm from '../u-form/u-form.vue';
|
|||
|
import props from '../u-form/props.js';
|
|||
|
import mpMixin from '../../libs/mixin/mpMixin.js';
|
|||
|
import mixin from '../../libs/mixin/mixin.js';
|
|||
|
export default {
|
|||
|
// #ifdef MP-WEIXIN
|
|||
|
name: 'u-form',
|
|||
|
// #endif
|
|||
|
// #ifndef MP-WEIXIN
|
|||
|
name: 'u--form',
|
|||
|
// #endif
|
|||
|
mixins: [mpMixin, props, mixin],
|
|||
|
components: {
|
|||
|
uvForm
|
|||
|
},
|
|||
|
created() {
|
|||
|
this.children = []
|
|||
|
},
|
|||
|
methods: {
|
|||
|
// 手动设置校验的规则,如果规则中有函数的话,微信小程序中会过滤掉,所以只能手动调用设置规则
|
|||
|
setRules(rules) {
|
|||
|
this.$refs.uForm.setRules(rules)
|
|||
|
},
|
|||
|
validate() {
|
|||
|
/**
|
|||
|
* 在微信小程序中,通过this.$parent拿到的父组件是u--form,而不是其内嵌的u-form
|
|||
|
* 导致在u-form组件中,拿不到对应的children数组,从而校验无效,所以这里每次调用u-form组件中的
|
|||
|
* 对应方法的时候,在小程序中都先将u--form的children赋值给u-form中的children
|
|||
|
*/
|
|||
|
// #ifdef MP-WEIXIN
|
|||
|
this.setMpData()
|
|||
|
// #endif
|
|||
|
return this.$refs.uForm.validate()
|
|||
|
},
|
|||
|
validateField(value, callback) {
|
|||
|
// #ifdef MP-WEIXIN
|
|||
|
this.setMpData()
|
|||
|
// #endif
|
|||
|
return this.$refs.uForm.validateField(value, callback)
|
|||
|
},
|
|||
|
resetFields() {
|
|||
|
// #ifdef MP-WEIXIN
|
|||
|
this.setMpData()
|
|||
|
// #endif
|
|||
|
return this.$refs.uForm.resetFields()
|
|||
|
},
|
|||
|
clearValidate(props) {
|
|||
|
// #ifdef MP-WEIXIN
|
|||
|
this.setMpData()
|
|||
|
// #endif
|
|||
|
return this.$refs.uForm.clearValidate(props)
|
|||
|
},
|
|||
|
setMpData() {
|
|||
|
this.$refs.uForm.children = this.children
|
|||
|
}
|
|||
|
},
|
|||
|
}
|
|||
|
</script>
|