Vue

声明指令类型

directive.d.ts

import type { ElLoadingDirective } from 'element-plus'
// import type { vShow } from 'vue'

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    Component: (props: { is: Component | string }) => void
  }

  export interface ComponentCustomProperties {
    // vShow: typeof vShow
    vLoading: typeof ElLoadingDirective
  }
}

export {}

element-ui 自定义表单组件

主要目的是使用非element表单组件可以触发el-form-item的表单操作(校验或者清除校验)

通过inject获取到elFormItem，监听当前组件的model-value的change事件,使用this.dispatch('ElFormItem', 'el.form.change')触发表单中rules的change >

export default {
  inject: {
    elForm: {
      default: ''
    },
    elFormItem: {
      default: ''
    }
  },
  methods: {
    dispatch(componentName, eventName, params) {
      let parent = this.$parent || this.$root
      let name = parent.$options.componentName
      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent
        if (parent) {
          name = parent.$options.componentName
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params))
      }
    }
  }
}

声明指令类型

element-ui 自定义表单组件

On this page