u--form.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <uvForm
  3. ref="uForm"
  4. :model="model"
  5. :rules="rules"
  6. :errorType="errorType"
  7. :borderBottom="borderBottom"
  8. :labelPosition="labelPosition"
  9. :labelWidth="labelWidth"
  10. :labelAlign="labelAlign"
  11. :labelStyle="labelStyle"
  12. :customStyle="customStyle"
  13. >
  14. <slot />
  15. </uvForm>
  16. </template>
  17. <script>
  18. /**
  19. * 此组件存在的理由是,在nvue下,u-form被uni-app官方占用了,u-form在nvue中相当于form组件
  20. * 所以在nvue下,取名为u--form,内部其实还是u-form.vue,只不过做一层中转
  21. */
  22. import uvForm from '../u-form/u-form.vue';
  23. import props from '../u-form/props.js'
  24. export default {
  25. // #ifdef MP-WEIXIN
  26. name: 'u-form',
  27. // #endif
  28. // #ifndef MP-WEIXIN
  29. name: 'u--form',
  30. // #endif
  31. mixins: [uni.$u.mpMixin, props, uni.$u.mixin],
  32. components: {
  33. uvForm
  34. },
  35. created() {
  36. this.children = []
  37. },
  38. methods: {
  39. // 手动设置校验的规则,如果规则中有函数的话,微信小程序中会过滤掉,所以只能手动调用设置规则
  40. setRules(rules) {
  41. this.$refs.uForm.setRules(rules)
  42. },
  43. validate() {
  44. /**
  45. * 在微信小程序中,通过this.$parent拿到的父组件是u--form,而不是其内嵌的u-form
  46. * 导致在u-form组件中,拿不到对应的children数组,从而校验无效,所以这里每次调用u-form组件中的
  47. * 对应方法的时候,在小程序中都先将u--form的children赋值给u-form中的children
  48. */
  49. // #ifdef MP-WEIXIN
  50. this.setMpData()
  51. // #endif
  52. return this.$refs.uForm.validate()
  53. },
  54. validateField(value, callback, event) {
  55. // #ifdef MP-WEIXIN
  56. this.setMpData()
  57. // #endif
  58. return this.$refs.uForm.validateField(value, callback, event)
  59. },
  60. resetFields() {
  61. // #ifdef MP-WEIXIN
  62. this.setMpData()
  63. // #endif
  64. return this.$refs.uForm.resetFields()
  65. },
  66. clearValidate(props) {
  67. // #ifdef MP-WEIXIN
  68. this.setMpData()
  69. // #endif
  70. return this.$refs.uForm.clearValidate(props)
  71. },
  72. setMpData() {
  73. this.$refs.uForm.children = this.children
  74. }
  75. },
  76. }
  77. </script>