| New file |
| | |
|---|
| | | <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' |
|---|
| | | export default { |
|---|
| | | // #ifdef MP-WEIXIN |
|---|
| | | name: 'u-form', |
|---|
| | | // #endif |
|---|
| | | // #ifndef MP-WEIXIN |
|---|
| | | name: 'u--form', |
|---|
| | | // #endif |
|---|
| | | mixins: [uni.$u.mpMixin, props, uni.$u.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> |
|---|
