feat(use-form-item): add useFormItem composable

demo/documentation/components/cascader/zhCN/index.demo-entry.md

@@ -2,12 +2,11 @@
 用来选一些树型信息。
 ## 演示
 ```demo
-
-multiple-lazy
-```
 single
 multiple
 single-lazy
+multiple-lazy
+```
 size
 
 ## Props

demo/documentation/components/cascader/zhCN/multiple-lazy.demo.md

@@ -63,7 +63,6 @@ export default {
         window.setTimeout(() => {
           option.children = genChildren(option)
           resolve()
-          console.log('on-load', this.options)
         }, 1000)
       })
     }

demo/documentation/components/cascader/zhCN/single-lazy.demo.md

@@ -63,7 +63,6 @@ export default {
         window.setTimeout(() => {
           option.children = genChildren(option)
           resolve()
-          console.log('on-load', this.options)
         }, 1000)
       })
     }

demo/documentation/components/message/enUS/manually-close.demo.md

@@ -14,7 +14,7 @@ export default {
       message: null
     }
   },
-  beforeDestroy () {
+  beforeUnmount () {
     this.closeMessage()
   },
   methods: {

demo/documentation/components/message/zhCN/manually-close.demo.md

@@ -12,24 +12,24 @@ export default {
   inject: ['message'],
   data () {
     return {
-      message: null
+      msg: null
     }
   },
-  beforeDestroy () {
+  beforeUnmount () {
     this.removeMessage()
   },
   methods: {
     createMessage () {
-      if (!this.message) {
-        this.message = this.message.info('3 * 3 * 4 * 4 * ?', {
+      if (!this.msg) {
+        this.msg = this.message.info('3 * 3 * 4 * 4 * ?', {
           duration: 0
         })
       }
     },
     removeMessage () {
-      if (this.message) {
-        this.message.destroy()
-        this.message = null
+      if (this.msg) {
+        this.msg.destroy()
+        this.msg = null
       }
     }
   }

demo/documentation/components/message/zhCN/modify-content.demo.md

@@ -14,7 +14,7 @@ export default {
       count: 0,
       typeIndex: 0,
       types: ['success', 'info', 'warning', 'error', 'loading'],
-      message: null
+      msg: null
     }
   },
   computed: {
@@ -24,19 +24,19 @@ export default {
   },
   methods: {
     plus () {
-      if (this.message) {
+      if (this.msg) {
         this.count++
-        this.message.content = '' + this.count
+        this.msg.content = '' + this.count
       }
     },
     changeType () {
-      if (this.message) {
+      if (this.msg) {
         this.typeIndex = (this.typeIndex + 1) % this.types.length
-        this.message.type = this.type
+        this.msg.type = this.type
       }
     },
     createMessage () {
-      this.message = this.message[this.type](
+      this.msg = this.message[this.type](
         '' + this.count, { duration: 10000 }
       )
     }

demo/documentation/components/notification/zhCN/basic.demo.md

@@ -58,7 +58,9 @@ I cant get no, I cant get no`,
               notification.destroy()
             }
           },
-          ['已读']
+          {
+            default: () => '已读'
+          }
         ),
         onClose: () => {
           if (!markAsRead) {

package.json

@@ -42,13 +42,13 @@
     "README.md"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.10.2",
-    "@babel/preset-env": "^7.10.2",
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
     "@rollup/plugin-node-resolve": "^6.1.0",
     "@rollup/plugin-strip": "^1.3.2",
     "@vue/babel-preset-app": "^3.12.1",
-    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/compiler-sfc": "^3.0.1",
     "@vue/eslint-config-standard": "^4.0.0",
     "@vue/test-utils": "^1.1.0",
     "angular-html-parser": "^1.4.0",
@@ -114,7 +114,7 @@
     "tinycolor2": "^1.4.2",
     "url-loader": "^1.1.2",
     "vite": "^1.0.0-rc.4",
-    "vue": "^3.0.0",
+    "vue": "^3.0.1",
     "vue-jest": "^4.0.0-rc.0",
     "vue-loader": "^16.0.0-beta.8",
     "vue-router": "^4.0.0-beta.13",

src/_composables/index.js

@@ -0,0 +1 @@
+export { default as useFormItem } from './use-form-item'

src/_composables/use-form-item.js

@@ -0,0 +1,52 @@
+import { computed, inject, provide, onBeforeUnmount } from 'vue'
+
+export default function useFormItem (props, options = {}) {
+  const {
+    defaultSize = 'medium'
+  } = options
+  const NFormItem = inject('NFormItem', null)
+  provide('NFormItem', null)
+  const mergedSizeRef = computed(() => {
+    const {
+      size
+    } = props
+    if (size) return size
+    if (NFormItem) {
+      const {
+        mergedSize
+      } = NFormItem
+      if (mergedSize) {
+        return mergedSize
+      }
+    }
+    return defaultSize
+  })
+  onBeforeUnmount(() => {
+    if (NFormItem) {
+      NFormItem.restoreValidation()
+    }
+  })
+  return {
+    mergedSize: mergedSizeRef,
+    nTriggerFormBlur () {
+      if (NFormItem) {
+        NFormItem.handleContentBlur()
+      }
+    },
+    nTriggerFormChange () {
+      if (NFormItem) {
+        NFormItem.handleContentChange()
+      }
+    },
+    nTriggerFormFocus () {
+      if (NFormItem) {
+        NFormItem.handleContentFocus()
+      }
+    },
+    nTriggerFormInput () {
+      if (NFormItem) {
+        NFormItem.handleContentInput()
+      }
+    }
+  }
+}

src/_mixins/asformitem.js

@@ -33,25 +33,25 @@ export default function (options = {}) {
       }
     },
     methods: {
-      __triggerFormBlur () {
+      nTriggerFormBlur () {
         const { NFormItem } = this
         if (NFormItem) {
           NFormItem.handleContentBlur()
         }
       },
-      __triggerFormChange () {
+      nTriggerFormChange () {
         const { NFormItem } = this
         if (NFormItem) {
           NFormItem.handleContentChange()
         }
       },
-      __triggerFormFocus () {
+      nTriggerFormFocus () {
         const { NFormItem } = this
         if (NFormItem) {
           NFormItem.handleContentFocus()
         }
       },
-      __triggerFormInput () {
+      nTriggerFormInput () {
         const { NFormItem } = this
         if (NFormItem) {
           NFormItem.handleContentInput()

src/auto-complete/src/AutoComplete.vue

@@ -206,39 +206,39 @@ export default {
       const {
         'onUpdate:value': onUpdateValue,
         onInput,
-        __triggerFormInput,
-        __triggerFormChange
+        nTriggerFormInput,
+        nTriggerFormChange
       } = this
       if (onUpdateValue) call(onUpdateValue, value)
       if (onInput) call(onInput, value)
-      __triggerFormInput()
-      __triggerFormChange()
+      nTriggerFormInput()
+      nTriggerFormChange()
     },
     doSelect (value) {
       const {
         onSelect,
-        __triggerFormInput,
-        __triggerFormChange
+        nTriggerFormInput,
+        nTriggerFormChange
       } = this
       if (onSelect) call(onSelect, value)
-      __triggerFormInput()
-      __triggerFormChange()
+      nTriggerFormInput()
+      nTriggerFormChange()
     },
     doBlur (value) {
       const {
         onBlur,
-        __triggerFormBlur
+        nTriggerFormBlur
       } = this
       if (onBlur) call(onBlur, value)
-      __triggerFormBlur()
+      nTriggerFormBlur()
     },
     doFocus (value) {
       const {
         onFocus,
-        __triggerFormFocus
+        nTriggerFormFocus
       } = this
       if (onFocus) call(onFocus, value)
-      __triggerFormFocus()
+      nTriggerFormFocus()
     },
     handleCompositionStart () {
       this.isComposing = true

src/cascader/src/Cascader.vue

@@ -80,8 +80,7 @@ import {
   configurable,
   themeable,
   locale,
-  usecssr,
-  asformitem
+  usecssr
 } from '../../_mixins'
 import { useCascader } from './composables'
 import { warn, call } from '../../_utils'
@@ -105,7 +104,6 @@ export default {
   mixins: [
     configurable,
     themeable,
-    asformitem(),
     locale('Cascader'),
     usecssr(styles, {
       themeKey: 'mergedTheme',
@@ -223,29 +221,29 @@ export default {
       const {
         'onUpdate:value': onUpdateValue,
         onChange,
-        __triggerFormInput,
-        __triggerFormChange
+        nTriggerFormInput,
+        nTriggerFormChange
       } = this
       if (onUpdateValue) call(onUpdateValue, ...args)
       if (onChange) call(onChange, ...args)
-      __triggerFormInput()
-      __triggerFormChange()
+      nTriggerFormInput()
+      nTriggerFormChange()
     },
     doBlur (...args) {
       const {
         onBlur,
-        __triggerFormBlur
+        nTriggerFormBlur
       } = this
       if (onBlur) call(onBlur, ...args)
-      __triggerFormBlur()
+      nTriggerFormBlur()
     },
     doFocus (...args) {
       const {
         onFocus,
-        __triggerFormFocus
+        nTriggerFormFocus
       } = this
       if (onFocus) call(onFocus, ...args)
-      __triggerFormFocus()
+      nTriggerFormFocus()
     },
     openMenu () {
       if (!this.disabled) {

src/cascader/src/composables.js

@@ -1,6 +1,5 @@
 import {
   computed,
-  getCurrentInstance,
   ref,
   watch
 } from 'vue'
@@ -9,8 +8,11 @@ import {
   SubtreeNotLoadedError
 } from 'treemate'
 import { useIsMounted } from 'vooks'
+import { useFormItem } from '../../_composables'
+import { call } from '../../_utils'
 
 export function useCascader (props) {
+  const formItem = useFormItem(props)
   const cascaderMenuRef = ref(null)
   const selectMenuRef = ref(null)
   const triggerRef = ref(null)
@@ -24,7 +26,6 @@ export function useCascader (props) {
     loadingKeySetRef.value.delete(key)
   }
   const treeMateRef = computed(() => {
-    console.log('build treemate', props.options)
     return TreeMate(props.options, {
       getKey ({ node }) {
         return node.value
@@ -68,10 +69,6 @@ export function useCascader (props) {
     }
     return ret
   })
-
-  console.log('value', props.value)
-  console.log('mergedKeysRef', mergedKeysRef.value)
-
   const hoverKeyPathRef = computed(() => {
     const {
       keyPath
@@ -84,7 +81,20 @@ export function useCascader (props) {
       keyboardKeyRef.value = null
     }
   })
-  const vm = getCurrentInstance().proxy
+  function doUpdateValue (...args) {
+    const {
+      'onUpdate:value': onUpdateValue,
+      onChange
+    } = props
+    const {
+      nTriggerFormInput,
+      nTriggerFormChange
+    } = formItem
+    if (onUpdateValue) call(onUpdateValue, ...args)
+    if (onChange) call(onChange, ...args)
+    nTriggerFormInput()
+    nTriggerFormChange()
+  }
   function updateKeyboardKey (key) {
     keyboardKeyRef.value = key
   }
@@ -109,7 +119,7 @@ export function useCascader (props) {
             leafOnly
           }
         )
-        vm.doUpdateValue(checkedKeys)
+        doUpdateValue(checkedKeys)
       } catch (err) {
         if (err instanceof SubtreeNotLoadedError) {
           if (cascaderMenuRef.value) {
@@ -128,12 +138,12 @@ export function useCascader (props) {
       if (leafOnly) {
         const node = treeMateRef.value.getNode(key)
         if (node !== null && node.isLeaf) {
-          vm.doUpdateValue(key)
+          doUpdateValue(key)
         } else {
           return false
         }
       } else {
-        vm.doUpdateValue(key)
+        doUpdateValue(key)
       }
     }
     return true
@@ -155,7 +165,7 @@ export function useCascader (props) {
           leafOnly
         }
       )
-      vm.doUpdateValue(checkedKeys)
+      doUpdateValue(checkedKeys)
     }
   }
   const selectedOptionsRef = computed(() => {
@@ -233,6 +243,7 @@ export function useCascader (props) {
     cascaderMenuRef,
     selectMenuRef,
     triggerRef,
+    ...formItem,
     updateKeyboardKey,
     updateHoverKey,
     doCheck,

src/checkbox/src/Checkbox.vue

@@ -181,14 +181,14 @@ export default {
         const {
           onChange,
           'onUpdate:checked': onUpdateChecked,
-          __triggerFormInput,
-          __triggerFormChange
+          nTriggerFormInput,
+          nTriggerFormChange
         } = this
         const nextChecked = !this.renderSafeChecked
         if (onUpdateChecked) onUpdateChecked(nextChecked)
         if (onChange) onChange(nextChecked) // deprecated
-        __triggerFormInput()
-        __triggerFormChange()
+        nTriggerFormInput()
+        nTriggerFormChange()
       }
     },
     handleClick (e) {

src/checkbox/src/CheckboxGroup.js

@@ -57,8 +57,8 @@ export default {
       const {
         onChange,
         'onUpdate:value': onUpdateValue,
-        __triggerFormInput,
-        __triggerFormChange
+        nTriggerFormInput,
+        nTriggerFormChange
       } = this
       if (Array.isArray(this.value)) {
         let groupValue = Array.from(this.value)
@@ -67,8 +67,8 @@ export default {
           if (!~index) {
             groupValue.push(checkboxValue)
             if (onUpdateValue) onUpdateValue(groupValue)
-            __triggerFormInput()
-            __triggerFormChange()
+            nTriggerFormInput()
+            nTriggerFormChange()
             // deprecated
             if (onChange) onChange(groupValue)
           }
@@ -77,21 +77,21 @@ export default {
             groupValue.splice(index, 1)
             if (onUpdateValue) onUpdateValue(groupValue)
             if (onChange) onChange(groupValue) // deprecated
-            __triggerFormInput()
-            __triggerFormChange()
+            nTriggerFormInput()
+            nTriggerFormChange()
           }
         }
       } else {
         if (checked) {
           if (onUpdateValue) onUpdateValue([checkboxValue])
           if (onChange) onChange([checkboxValue]) // deprecated
-          __triggerFormInput()
-          __triggerFormChange()
+          nTriggerFormInput()
+          nTriggerFormChange()
         } else {
           if (onUpdateValue) onUpdateValue([])
           if (onChange) onChange([]) // deprecated
-          __triggerFormInput()
-          __triggerFormChange()
+          nTriggerFormInput()
+          nTriggerFormChange()
         }
       }
     }

src/date-picker/src/DatePicker.vue

@@ -411,29 +411,29 @@ export default {
       const {
         'onUpdate:value': onUpdateValue,
         onChange,
-        __triggerFormChange,
-        __triggerFormInput
+        nTriggerFormChange,
+        nTriggerFormInput
       } = this
       if (onUpdateValue) call(onUpdateValue, ...args)
       if (onChange) call(onChange, ...args)
-      __triggerFormChange()
-      __triggerFormInput()
+      nTriggerFormChange()
+      nTriggerFormInput()
     },
     doFocus (...args) {
       const {
         onFocus,
-        __triggerFormFocus
+        nTriggerFormFocus
       } = this
       if (onFocus) call(onFocus, ...args)
-      __triggerFormFocus()
+      nTriggerFormFocus()
     },
     doBlur (...args) {
       const {
         onBlur,
-        __triggerFormBlur
+        nTriggerFormBlur
       } = this
       if (onBlur) call(onBlur, ...args)
-      __triggerFormBlur()
+      nTriggerFormBlur()
     },
     handleKeyDown (e) {
       const value = this.value

src/dynamic-tags/src/DynamicTags.vue

@@ -133,13 +133,13 @@ export default {
       const {
         onChange,
         'onUpdate:value': onUpdateValue,
-        __triggerFormInput,
-        __triggerFormChange
+        nTriggerFormInput,
+        nTriggerFormChange
       } = this
       if (onChange) call(onChange, value)
       if (onUpdateValue) call(onUpdateValue, value)
-      __triggerFormInput()
-      __triggerFormChange()
+      nTriggerFormInput()
+      nTriggerFormChange()
     },
     handleCloseClick (index) {
       const tags = this.value.slice(0)

src/input-number/src/InputNumber.vue

@@ -210,13 +210,13 @@ export default {
         const {
           'onUpdate:value': onUpdateValue,
           onChange,
-          __triggerFormInput,
-          __triggerFormChange
+          nTriggerFormInput,
+          nTriggerFormChange
         } = this
         if (onChange) onChange(value)
         if (onUpdateValue) onUpdateValue(value)
-        __triggerFormInput()
-        __triggerFormChange()
+        nTriggerFormInput()
+        nTriggerFormChange()
       }
     },
     createValidValue () {
@@ -238,10 +238,10 @@ export default {
     handleFocus (e) {
       const {
         onFocus,
-        __triggerFormFocus
+        nTriggerFormFocus
       } = this
       if (onFocus) onFocus(e)
-      __triggerFormFocus()
+      nTriggerFormFocus()
     },
     add () {
       if (!this.addable) return
@@ -296,10 +296,10 @@ export default {
       this.emitChangeEvent(value)
       const {
         onBlur,
-        __triggerFormBlur
+        nTriggerFormBlur
       } = this
       if (onBlur) onBlur(e)
-      __triggerFormBlur()
+      nTriggerFormBlur()
     }
   }
 }

src/input/src/Input.vue

@@ -387,35 +387,35 @@ export default {
       const {
         'onUpdate:value': onUpdateValue,
         onInput,
-        __triggerFormInput
+        nTriggerFormInput
       } = this
       if (onUpdateValue) call(onUpdateValue, value)
       if (onInput) call(onInput, value)
-      __triggerFormInput()
+      nTriggerFormInput()
     },
     doChange (value) {
       const {
         onChange,
-        __triggerFormChange
+        nTriggerFormChange
       } = this
       if (onChange) call(onChange, value)
-      __triggerFormChange()
+      nTriggerFormChange()
     },
     doBlur (e) {
       const {
         onBlur,
-        __triggerFormBlur
+        nTriggerFormBlur
       } = this
       if (onBlur) call(onBlur, e)
-      __triggerFormBlur()
+      nTriggerFormBlur()
     },
     doFocus (e) {
       const {
         onFocus,
-        __triggerFormFocus
+        nTriggerFormFocus
       } = this
       if (onFocus) call(onFocus, e)
-      __triggerFormFocus()
+      nTriggerFormFocus()
     },
     doClear (...args) {
       const {

src/message/src/MessageProvider.js

@@ -67,8 +67,8 @@ export default {
       [
         this.messageList.length ? h(Teleport, {
           to: this.to
-        }, [
-          h('div', {
+        }, {
+          default: () => h('div', {
             class: 'n-message-container',
             key: 'n-message-container'
           }, this.messageList.map(
@@ -78,7 +78,7 @@ export default {
               onInternalAfterLeave: this.handleAfterLeave
             })
           ))
-        ]) : null,
+        }) : null,
         this.$slots.default()
       ]
     )

src/radio/src/radio-mixin.js

@@ -100,24 +100,24 @@ export default {
         const {
           onChange,
           'onUpdate:value': updateValue,
-          __triggerFormInput,
-          __triggerFormChange
+          nTriggerFormInput,
+          nTriggerFormChange
         } = this.NRadioGroup
         if (updateValue) updateValue(value)
         if (onChange) onChange(value) // deprecated
-        __triggerFormInput()
-        __triggerFormChange()
+        nTriggerFormInput()
+        nTriggerFormChange()
       } else {
         const {
           onChange,
           'onUpdate:checkedValue': updateCheckedValue,
-          __triggerFormInput,
-          __triggerFormChange
+          nTriggerFormInput,
+          nTriggerFormChange
         } = this
         if (updateCheckedValue) updateCheckedValue(value)
         if (onChange) onChange(value) // deprecated
-        __triggerFormInput()
-        __triggerFormChange()
+        nTriggerFormInput()
+        nTriggerFormChange()
       }
     }
   }

src/select/src/Select.vue

@@ -408,29 +408,29 @@ export default {
       const {
         onChange,
         'onUpdate:value': onUpdateValue,
-        __triggerFormChange,
-        __triggerFormInput
+        nTriggerFormChange,
+        nTriggerFormInput
       } = this
       if (onChange) call(onChange, value)
       if (onUpdateValue) call(onUpdateValue, value)
-      __triggerFormChange()
-      __triggerFormInput()
+      nTriggerFormChange()
+      nTriggerFormInput()
     },
     doBlur (value) {
       const {
         onBlur,
-        __triggerFormBlur
+        nTriggerFormBlur
       } = this
       if (onBlur) call(onBlur, value)
-      __triggerFormBlur()
+      nTriggerFormBlur()
     },
     doFocus (value) {
       const {
         onFocus,
-        __triggerFormFocus
+        nTriggerFormFocus
       } = this
       if (onFocus) call(onFocus, value)
-      __triggerFormFocus()
+      nTriggerFormFocus()
     },
     doSearch (value) {
       const {

src/slider/src/Slider.vue

@@ -393,13 +393,13 @@ export default {
       const {
         onChange,
         'onUpdate:value': onUpdateValue,
-        __triggerFormInput,
-        __triggerFormChange
+        nTriggerFormInput,
+        nTriggerFormChange
       } = this
       if (onChange) call(onChange, value)
       if (onUpdateValue) call(onUpdateValue, value)
-      __triggerFormInput()
-      __triggerFormChange()
+      nTriggerFormInput()
+      nTriggerFormChange()
     },
     handleRailClick (e) {
       this.valueChangedByRailClick = true

src/switch/src/Switch.vue

@@ -69,29 +69,29 @@ export default {
       const {
         'onUpdate:value': onUpdateValue,
         onChange,
-        __triggerFormInput,
-        __triggerFormChange
+        nTriggerFormInput,
+        nTriggerFormChange
       } = this
       if (onUpdateValue) call(onUpdateValue, ...args)
       if (onChange) call(onChange, ...args)
-      __triggerFormInput()
-      __triggerFormChange()
+      nTriggerFormInput()
+      nTriggerFormChange()
     },
     doFocus (...args) {
       const {
         onFocus,
-        __triggerFormFocus
+        nTriggerFormFocus
       } = this
       if (onFocus) call(onFocus, ...args)
-      __triggerFormFocus()
+      nTriggerFormFocus()
     },
     doBlur (...args) {
       const {
         onBlur,
-        __triggerFormBlur
+        nTriggerFormBlur
       } = this
       if (onBlur) call(onBlur, ...args)
-      __triggerFormBlur()
+      nTriggerFormBlur()
     },
     handleClick () {
       if (!this.disabled) {

src/time-picker/src/TimePicker.vue

@@ -451,29 +451,29 @@ export default {
       const {
         'onUpdate:value': onUpdateValue,
         onChange,
-        __triggerFormChange,
-        __triggerFormInput
+        nTriggerFormChange,
+        nTriggerFormInput
       } = this
       if (onUpdateValue) call(onUpdateValue, value)
       if (onChange) call(onChange, value)
-      __triggerFormChange()
-      __triggerFormInput()
+      nTriggerFormChange()
+      nTriggerFormInput()
     },
     doFocus () {
       const {
         onFocus,
-        __triggerFormFocus
+        nTriggerFormFocus
       } = this
       if (onFocus) call(onFocus)
-      __triggerFormFocus()
+      nTriggerFormFocus()
     },
     doBlur () {
       const {
         onBlur,
-        __triggerFormBlur
+        nTriggerFormBlur
       } = this
       if (onBlur) call(onBlur)
-      __triggerFormBlur()
+      nTriggerFormBlur()
     },
     handleTimeInputClear (e) {
       e.stopPropagation()
@@ -605,20 +605,20 @@ export default {
       })
     },
     scrollTimer () {
-      if (this.hoursRef && this.hoursRef.$el) {
-        const hour = this.hoursRef.$el.querySelector('.n-time-picker-selector-time-row__item--active')
+      if (this.hoursRef && this.hoursRef.contentRef) {
+        const hour = this.hoursRef.contentRef.querySelector('.n-time-picker-selector-time-row__item--active')
         if (hour) {
           this.hoursRef.scrollTo(0, hour.offsetTop)
         }
       }
-      if (this.minutesRef && this.minutesRef.$el) {
-        const minute = this.minutesRef.$el.querySelector('.n-time-picker-selector-time-row__item--active')
+      if (this.minutesRef && this.minutesRef.contentRef) {
+        const minute = this.minutesRef.contentRef.querySelector('.n-time-picker-selector-time-row__item--active')
         if (minute) {
           this.minutesRef.scrollTo(0, minute.offsetTop)
         }
       }
-      if (this.secondsRef && this.secondsRef.$el) {
-        const second = this.secondsRef.$el.querySelector('.n-time-picker-selector-time-row__item--active')
+      if (this.secondsRef && this.secondsRef.contentRef) {
+        const second = this.secondsRef.contentRef.querySelector('.n-time-picker-selector-time-row__item--active')
         if (second) {
           this.secondsRef.scrollTo(0, second.offsetTop)
         }
@@ -654,10 +654,10 @@ export default {
         if (emitBlur) {
           const {
             onBlur,
-            __triggerFormBlur
+            nTriggerFormBlur
           } = this
           if (onBlur) onBlur()
-          __triggerFormBlur()
+          nTriggerFormBlur()
         }
       }
     },

src/transfer/src/Transfer.vue

@@ -307,13 +307,13 @@ export default {
       const {
         'onUpdate:value': onUpdateValue,
         onChange,
-        __triggerFormInput,
-        __triggerFormChange
+        nTriggerFormInput,
+        nTriggerFormChange
       } = this
       if (onUpdateValue) call(onUpdateValue, ...args)
       if (onChange) call(onChange, ...args)
-      __triggerFormInput()
-      __triggerFormChange()
+      nTriggerFormInput()
+      nTriggerFormChange()
     },
     handleSrcHeaderCheck (value) {
       const {