How to use the vue.directive function in vue

/**
             * When the user logs in, set the whole app to be "authenticated" and initialize it.
             */
            'user:loggedin': function () {
                this.authenticated = true;
                this.init();
            },
        },
    };

    // Register our custom filters…
    Vue.filter('filterSongBy', filterSongBy);
    Vue.filter('caseInsensitiveOrderBy', caseInsensitiveOrderBy);

    // …and the global directives
    Vue.directive('koel-focus', focusDirective);

el.addEventListener('focus', (evt) => {
            if (el.value === '0' || el.value === '0.00') {
                el.dataset.originalValue = el.value;
                el.value = '';
            }
        });

        el.addEventListener('blur', (evt) => {
            if (el.value === '') {
                el.value = el.dataset.originalValue || '0';
            }
        });
    },
});

Vue.directive('click-outside', {
    inserted(el, binding) {
        const handler = (evt) => {
            if (el.contains(evt.target)) {
                return;
            }
            if (binding && typeof binding.value === 'function') {
                binding.value();
            }
        };

        window.addEventListener('click', handler);

        // Store handler to clean up later
        el.dataset.clickoutside = uniqueId();
        store.commit('addDirectiveInstance', { key: el.dataset.clickoutside, value: handler });
    },

*/

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

/* eslint-disable no-new, no-unused-vars, prefer-template, prefer-arrow-callback, func-names, no-else-return */

import Vue from 'vue';
import { VTooltip } from 'v-tooltip';
import VueCookies from 'vue-cookies';
import AWS from 'aws-sdk';
import App from './App';
import Logger from './logger';

Vue.config.productionTip = false;
Vue.directive('my-tooltip', VTooltip);
Vue.use(VueCookies);

/**
 * Set in index.html to drive multiple components
 */
const poolId = localStorage.getItem('poolid');
const region = localStorage.getItem('awsregionname');
const idtoken = localStorage.getItem('idtokenjwt');
const poolName = localStorage.getItem('poolname');
const noauth = localStorage.getItem('noauth');

Logger.debug('idtoken is: ' + idtoken);

/**
 * Initializes credentials
 */

Object.keys(directives).forEach(key => {
    Vue.directive(
        key,
        (directives as { [key: string]: DirectiveOptions })[key]
    );
});
// 过滤器

* @description 注册admin内置插件
 */
installPlugin(Vue)
/**
 * @description 生产环境关掉提示
 */
Vue.config.productionTip = false
/**
 * @description 全局注册应用配置
 */
Vue.prototype.$config = config
/**
 * 注册指令
 */
importDirective(Vue)
Vue.directive('clickOutside', clickOutside)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n,
  store,
  render: h => h(App)
})

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from './vuex/store'
import { configRouter } from './route'
import App from './views/App.vue'
import dTap from './util/directives/tap'
require('es6-promise').polyfill()

import './styles/css/global.scss'

Vue.config.debug = true

// install router
Vue.use(VueRouter)

Vue.directive('tap', dTap)

// 路由相关
// create router
const router = new VueRouter({
  history: true,
  saveScrollPosition: true
})

// configure router
configRouter(router)

App.store = store
// boostrap the app
router.start(Vue.extend(App), '#root')

// just for debugging

import './polyfills'

import Vue from 'vue'
import createApp, { runPlugins, runMain } from './app'
import config from '~/.temp/config'
import plugins from '~/.temp/plugins-client'
import linkDirective from './directives/link'
import imageDirective from './directives/image'
import { stripPathPrefix } from './utils/helpers'
import { isFunc, isNil } from './utils/lang'

Vue.directive('g-link', linkDirective)
Vue.directive('g-image', imageDirective)

runPlugins(plugins)
runMain()

const { app, router } = createApp()

if (process.env.NODE_ENV === 'production') {
  router.beforeEach((to, from, next) => {
    const components = router.getMatchedComponents(to).map(
      c => isFunc(c) && isNil(c.cid) ? c() : c
    )

    Promise.all(components)
      .then(() => next())
      .catch(err => {
        // reload page if a component failed to load

// https://vuejs.org/v2/guide/custom-directive.html
import Vue from "vue";

Vue.directive("temp", {
  inserted: function(el, binding) {
    // ...
  }
});

const { value } = el;
    if (value && el.setSelectionRange) {
      el.setSelectionRange(0, value.length);
    }
  },
});

const setVisible = (el, value) => {
  el.style.display = value ? '' : 'none';
  if (value) {
    el.removeAttribute('aria-hidden');
  } else {
    el.setAttribute('aria-hidden', 'true');
  }
};
Vue.directive('show', {
  bind(el, { value }) {
    setVisible(el, value);
  },
  update(el, { value, oldValue }) {
    if (value !== oldValue) {
      setVisible(el, value);
    }
  },
});

const setElTitle = (el, title) => {
  el.title = title;
  el.setAttribute('aria-label', title);
};
Vue.directive('title', {
  bind(el, { value }) {