How to use the vue-property-decorator.Vue.directive function in vue-property-decorator

mouseover: () => {
          this.hover = true;
        },
        mouseleave: () => {
          this.hover = false;
        },
      },
      style: this.style,
      class: 'text-default',
    }, [text, spacer, shortcut]);
  }
}

// NOT SUre if we should render this globally
// ....... oh well
Vue.directive('focus', {
  inserted(el) {
    el.focus();
  },
});

@Component
export class TextField extends Vue {
  @Prop({ type: String, required: true }) public value!: string;
  @Prop({ type: Boolean, default: false }) public autofocus!: boolean;
  @Prop({ type: String, default: '' }) public placeholder!: string;

  public render(h: CreateElement) {
    const directives = this.autofocus ? [{ name: 'focus' }] : [];

    return h('input', {
      props: {

import { isArray } from '@/helper/type';
  import {
    OptionsEntity,
    FieldNamesEntity,
    ReturnParamsEntity,
    fieldNamesDefault,
  } from './entity';
  import RenderOption from './renderoption';
  import { setPostion } from '@/helper/poper';
  import { handleName, findEnabled, toggleItem } from '@/helper/option';
  import { noop } from '@/helper/noop';
  import poperMixin from '@/helper/popermixin';

  Vue.directive('transfer-dom', TransferDom as any);

  Vue.directive('doc-click', docClick as any);

  @Component({
    components: {
      RenderOption,
    },
  })
  export default class Select extends mixins(poperMixin) {
    name: string = 'WSelect';

    optStatus: boolean = false;

    loadingValue: boolean = false;

    slotsData: any[] = [];

    nameTags: any[] = [];

import docClick from '@/directives/doclick';
  import { hasOwn } from '@/helper/o';
  import { isArray } from '@/helper/type';
  import {
    OptionsEntity,
    FieldNamesEntity,
    ReturnParamsEntity,
    fieldNamesDefault,
  } from './entity';
  import RenderOption from './renderoption';
  import { setPostion } from '@/helper/poper';
  import { handleName, findEnabled, toggleItem } from '@/helper/option';
  import { noop } from '@/helper/noop';
  import poperMixin from '@/helper/popermixin';

  Vue.directive('transfer-dom', TransferDom as any);

  Vue.directive('doc-click', docClick as any);

  @Component({
    components: {
      RenderOption,
    },
  })
  export default class Select extends mixins(poperMixin) {
    name: string = 'WSelect';

    optStatus: boolean = false;

    loadingValue: boolean = false;

    slotsData: any[] = [];

} from '@/components/datepicker/src/DatePickerTable.vue';
  import TimePanel, {
    PanelChangeEntity,
  } from '@/components/timepicker/src/TimePanel.vue';
  import WInput from '@/components/input/src/Input.vue';
  import WIcon from '@/components/icon/src/Icon.vue';
  import { pickerSvg, PickerSvgEntity } from '@/helper/pickersvg';
  import { hasOwn } from '@/helper/o';
  import poperMixin from '@/helper/popermixin';
  import { isString, isUndefined } from '@/helper/type';
  import { setPostion } from '@/helper/poper';
  import { noop } from '@/helper/noop';

  Vue.directive('transfer-dom', TransferDom as any);

  Vue.directive('doc-click', docClick as any);

  export interface ChangeEntity extends PickerTableChangeEntity {
    tableType: string;
  }

  export interface TablePanelChangeEntity {
    tableType: String;
    tableOptions:
      | DateEntity[]
      | MonthInMonthsEntity[]
      | AgesInAgesEntity[]
      | YearInYearsEntity[];
    nowRangeYear: string;
    nowRangeAge: string;
    value: string;
    nowYear: number;