pco/app/uview-ui/components/u--form/u--form.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'

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>