vue自定义指令

需求:进入页面input获取焦点
实现:

<template>
  <div>
    <input type="text" ref="input" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const input = ref(null);
onMounted(() => {
  input.value.focus();
});
</script>

<style scoped></style>

局部自定义指令

<template>
  <div>
    <input type="text" v-focus />
  </div>
</template>

<script>
export default {
  // 局部指令
  directives: {
    focus: {
      mounted(el, bindings, vnode, preVnode) {
        console.log("focus 进入");
        el.focus();
      },
    },
  },
};
</script>

<style scoped></style>

参照地址:自定义指令

setup顶层写法
在 script setup 中，任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令。vFocus 即可以在模板中以 v-focus 的形式使用。
在没有使用

<template>
  <div>
    setup顶层写法
    <input type="text" v-focus />
  </div>
</template>

<script setup>
const vFocus = {
  mounted(el) {
    return el.focus();
  },
};
</script>

<style scoped></style>

全局自定义指令

main.js

import {
  createApp
} from 'vue';
import router from './router';
 import App from './02_自定义指令/04_全局自定义指令.vue';
 const app = createApp(App);
 app.use(router);
//全局自定义或指令
 app.directive("focus", {
   mounted(el, bindings, vnode, preVnode) {
   console.log("进入全局自定义指令mounted");
    el.focus();
  }
 });
 app.mount('#app');

使用

<template>
 <div>
   <h2>全局自定义指令</h2>
   <input type="text" v-focus />
 </div>
</template>

<script>
export default {};
</script>

<style scoped></style>

指令的生命周期

一个指令定义的对象，Vue提供了一下几个钩子：
created：在绑定元素的attribute或事件监听器被应用之前调用；
beforeMount：当指令第一次绑定到元素并挂载父组件之前调用；
mounted：在绑定元素的父组件被挂载后调用；
beforeUpdate：在更新包含组件的VNode之前调用；
updated：在包含组件的VNode及其子组件的VNode更新后调用；
beforeUnmount：在卸载绑定元素的父组件之前调用；
unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次；

<template>
  <div>
    <button v-customInstruction.aaa="123" @click="increment">
      当前计数:{{ counter }}
    </button>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  // 局部指令
  directives: {
    customInstruction: {
      created(el, bindings, vnode, preVnode) {
        console.log("created", el, bindings, vnode, preVnode);
        console.log(bindings.value);
        console.log(bindings.modifiers);
      },
      beforeMount() {
        console.log(" beforeMount");
      },
      beforeUpdate() {
        console.log(" beforeUpdate");
      },
      updated() {
        console.log(" updated");
      },
      beforeUnmount() {
        console.log(" beforeUnmount");
      },
      unmounted() {
        console.log(" unmounted");
      },
    },
  },
  setup() {
    const counter = ref(0);
    const increment = () => counter.value++;
    return {
      counter,
      increment,
    };
  },
};
</script>

<style scoped></style>

使用自定义指令实现时间戳转化

main.js

import {
  createApp
} from 'vue';
import router from './router';
import App from './02_自定义指令/App.vue';
 const app = createApp(App);
 app.use(router);
import registerDirectives from '@/02_自定义指令/directives';

registerDirectives(app);

app.mount('#app');

directives/index.js

import registerFormatTime from './format-time';

export default function registerDirectives(app) {
  registerFormatTime(app);
}

directives/format-time.js
npm install dayjs

import dayjs from 'dayjs';
export default function (app) {
  app.directive("format-time", {
    created(el, bindings) {
      bindings.formatString = "YYYY-MM-DD HH:mm:ss";
      if (bindings.value) {
        bindings.formatString = bindings.value;
      }
    },
    mounted(el, bindings) {
      const textContent = el.textContent;
      let timestamp = parseInt(textContent);
      if (textContent.length === 10) {
        timestamp = timestamp * 1000;
      }
      console.log("timestamp", timestamp);
      el.textContent = dayjs(timestamp).format(bindings.formatString);

    }
  });
}

App.vue

<template>
  <div>
    <h2 v-format-time="`YYYY/MM/DD`">{{ timestamp }}</h2>
    <h2 v-format-time>{{timestamp}}</h2>
  </div>
</template>

<script>
export default {
  setup() {
    const timestamp = 1624452193;
    return {
      timestamp,
    };
  },
};
</script>

<style scoped></style>