You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.1 KiB
80 lines
2.1 KiB
<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>
|
|
|