feat(nvue): picker、form

packages/uni-components/src/nvue/form/index.tsx

-import { defineComponent, provide, ref } from 'vue'
-import {
-  useCustomEvent,
-  EmitEvent,
-  CustomEventTrigger,
-} from '../../helpers/useNVueEvent'
+import { defineComponent, provide, ref, VNode } from 'vue'
+import { useCustomEvent, EmitEvent } from '../../helpers/useNVueEvent'
 import { uniFormKey, UniFormCtx, UniFormFieldCtx } from '../../components/form'
 
 const NATIVE_COMPONENTS = ['u-input', 'u-textarea']
@@ -14,23 +10,60 @@ export default defineComponent({
   setup({}, { slots, emit }) {
     const rootRef = ref<HTMLElement | null>(null)
     const trigger = useCustomEvent<EmitEvent<typeof emit>>(rootRef, emit)
+    const fields: UniFormFieldCtx[] = []
 
-    const vnodes = slots.default && slots.default()
-    provideForm(trigger, vnodes)
+    let resetNative: Function
+
+    provide<UniFormCtx>(uniFormKey, {
+      addField(field: UniFormFieldCtx) {
+        fields.push(field)
+      },
+      removeField(field: UniFormFieldCtx) {
+        fields.splice(fields.indexOf(field), 1)
+      },
+      submit(evt: Event) {
+        // 获取原生组件值
+        let outFormData: any = {}
+        resetNative && resetNative(outFormData)
+
+        let formData = fields.reduce((res, field) => {
+          if (field.submit) {
+            const [name, value] = field.submit()
+            name && (res[name] = value)
+          }
+          return res
+        }, Object.create(null))
+
+        Object.assign(outFormData, formData)
+
+        trigger('submit', {
+          value: outFormData,
+        })
+      },
+      reset(evt: Event) {
+        // 清空原生组件值
+        resetNative && resetNative()
+
+        fields.forEach((field) => field.reset && field.reset())
+        trigger('reset', evt)
+      },
+    })
 
     return () => {
+      const vnodes = slots.default && slots.default()
+      resetNative = useResetNative(vnodes)
       return <view ref={rootRef}>{vnodes}</view>
     }
   },
 })
 
-function provideForm(trigger: CustomEventTrigger, children: any) {
+function useResetNative(children?: VNode[]) {
   const modulePlus = weex.requireModule('plus')
-  const fields: UniFormFieldCtx[] = []
-  const getOrClearNativeValue = (nodes: any, outResult: any): void => {
-    nodes.forEach(function (node: any) {
+  const getOrClearNativeValue = (outResult: any, nodes?: VNode[]): void => {
+    ;(nodes || children || []).forEach(function (node: VNode) {
       if (
-        NATIVE_COMPONENTS.indexOf(node.type) >= 0 &&
+        NATIVE_COMPONENTS.indexOf(String(node.type)) >= 0 &&
+        node.el &&
         node.el.attr &&
         node.el.attr.name
       ) {
@@ -45,44 +78,10 @@ function provideForm(trigger: CustomEventTrigger, children: any) {
         node.children &&
         node.children.length
       ) {
-        getOrClearNativeValue(node.children, outResult)
+        getOrClearNativeValue(outResult, node.children as VNode[])
       }
     })
   }
 
-  provide<UniFormCtx>(uniFormKey, {
-    addField(field: UniFormFieldCtx) {
-      fields.push(field)
-    },
-    removeField(field: UniFormFieldCtx) {
-      fields.splice(fields.indexOf(field), 1)
-    },
-    submit(evt: Event) {
-      // 获取原生组件值
-      let outFormData: any = {}
-      getOrClearNativeValue(children, outFormData)
-
-      let formData = fields.reduce((res, field) => {
-        if (field.submit) {
-          const [name, value] = field.submit()
-          name && (res[name] = value)
-        }
-        return res
-      }, Object.create(null))
-
-      Object.assign(outFormData, formData)
-
-      trigger('submit', {
-        value: outFormData,
-      })
-    },
-    reset(evt: Event) {
-      // 清空原生组件值
-      getOrClearNativeValue(children, null)
-
-      fields.forEach((field) => field.reset && field.reset())
-      trigger('reset', evt)
-    },
-  })
-  return fields
+  return getOrClearNativeValue
 }

packages/uni-components/src/nvue/helpers/dom.ts

 export type Size = { width: number; height: number; top: number; left: number }
 export const getComponentSize = (el: HTMLElement) => {
-  const dom = weex.requireModule('dom')
-  return new Promise<Size>((resolve) => {
+  return new Promise<Size>((resolve, reject) => {
+    if (!el) return resolve({ width: 0, height: 0, top: 0, left: 0 })
+    const dom = weex.requireModule('dom')
     dom.getComponentRect(el, ({ size }: { size: Size }) => {
       resolve(size)
     })

packages/uni-components/src/nvue/picker-view-column/index.tsx

@@ -118,8 +118,8 @@ export default defineComponent({
           if (height_ && indicatorHeight_) {
             // 初始化时iOS直接滚动经常出错
             setTimeout(() => {
-              setCurrent(current.value, false, true)
               instance.data._isMounted = true
+              setCurrent(current.value, false, true)
             }, 50)
           } else {
             checkMounted()
@@ -167,7 +167,6 @@ export default defineComponent({
               ref={contentRef}
               class="uni-picker-view-content"
               style={{
-                flexDirection: 'column',
                 paddingTop: `${padding}px`,
                 paddingBottom: `${padding}px`,
               }}
@@ -239,6 +238,7 @@ export default defineComponent({
       },
       'uni-picker-view-content': {
         '': {
+          flexDirection: 'column',
           paddingTop: 0,
           paddingRight: 0,
           paddingBottom: 0,

packages/uni-components/src/nvue/picker-view/index.tsx

@@ -69,10 +69,14 @@ export default defineComponent({
     return () => {
       const defaultSlots = slots.default && slots.default()
       columnVNodes = flatVNode(defaultSlots)
+      const style = props.height
+        ? { height: `${parseFloat(props.height as string)}px` }
+        : {}
       return (
         <view
           ref={rootRef}
           class="uni-picker-view"
+          style={style}
           {...{
             preventGesture: true,
           }}

packages/uni-components/src/nvue/picker/index.tsx

 import { extend } from '@vue/shared'
-import { Ref, ref, watch, ExtractPropTypes, defineComponent } from 'vue'
+import {
+  Ref,
+  ref,
+  watch,
+  ExtractPropTypes,
+  defineComponent,
+  onBeforeUnmount,
+  inject,
+} from 'vue'
 import { useCustomEvent, EmitEvent } from '../../helpers/useNVueEvent'
 import { showPage, Page } from '@dcloudio/uni-core'
+import { UniFormCtx, uniFormKey } from '../../components/form'
 
 type Mode = 'selector' | 'multiSelector' | 'time' | 'date'
 type Field = 'year' | 'month' | 'day'
@@ -264,7 +273,7 @@ export default /*#__PURE__*/ defineComponent({
       )
     }
 
-    /* const uniForm = inject<UniFormCtx>(
+    const uniForm = inject<UniFormCtx>(
       uniFormKey,
       false as unknown as UniFormCtx
     )
@@ -291,7 +300,7 @@ export default /*#__PURE__*/ defineComponent({
     if (uniForm) {
       uniForm.addField(formField)
       onBeforeUnmount(() => uniForm.removeField(formField))
-    } */
+    }
 
     Object.keys(props).forEach((key) => {
       watch(