自定义指令基本用法

- - 1.自定义指令案例一：输入框自动聚焦
  - 2.自定义指令生命周期和参数-修饰符
  - 3.封装全局自定义指令
  - - 3.1 创建directive目录，创建index.js，创建format-xx文件
    - 3.1 main.js文件引入并传入全局对象
    - 3.3 组件中引用

自定义指令
Vue可以根据项目实际情况需要自定义指令。
注意：要对DOM元素进行底层操作就会需要自定义指令
自定义指令分为两种：
1. 自定义局部指令：组件中通过directives选项，只能在当前组件使用；
2. 自定义全局指令：app的directive方法，可以任意组件被使用；

1.自定义指令案例一：输入框自动聚焦

<template><div><input type="text" ref="input" v-focus></div>
</template><script>
import { ref, onMounted } from 'vue'export default {// 局部指令directives: {focus: {// 当input元素或者组件挂载到页面上的时候执行mounted(el, bingdings, vnode, preVnode){console.log('focus mounted');el.focus();}}},setup () {const input = ref(null)onMounted(() => {input.value.focus();})return {input}}}
</script>

2.自定义指令生命周期和参数-修饰符

指令的生命周期
created: 在绑定元素的attribute或事件监听器被应用之前调用。
beforeMounted: 当指令第一次绑定到元素并且在挂载父组件之前调用；
mounted: 在绑定元素的父组件被挂载后调用；
beforeUpdate: 在更新包含自建的VNode之前调用；
updated: 在包含组件的VNode及其子组件的VNode更新后调用；
beforeUnmount: 在卸载绑定元素的父组件之前调用；
unmounted: 当指令与元素解除绑定且父组件已卸载时，只调用一次

<template><div><input type="text" ref="input" v-focus><button v-why.aaaa.bbb="'coderwhy'" v-if="counter < 2 " @click="incremnt">当前计数；{{ counter }}</button></div>
</template><script>
import { ref, onMounted } from 'vue'export default {// 局部指令directives: {// focus: {//   // 当input元素或者组件挂载到页面上的时候执行//  mounted(el, bingdings, vnode, preVnode){//   console.log('focus mounted');//   el.focus();//  }// }why: {created (el,bingdings,vnode,preVnode) {console.log('why created',el,bingdings,vnode,preVnode);console.log(bingdings.value); // 取传参console.log(bingdings.modifiers); // 取修饰符},beforeMount () {console.log('why beforeMount');},mounted () {console.log('why mounted');},beforeUpdate () {console.log('why beforeUpdate');},updated () {console.log('why updated');},beforeUnmount () {console.log('why beforeUnmount');},unmounted () {console.log('why unmounted');}}},setup () {const input = ref(null)const counter = ref(0)const incremnt = () => {counter.value++}onMounted(() => {input.value.focus();})return {input,counter,incremnt}}}
</script>

3.封装全局自定义指令

3.1 创建directive目录，创建index.js，创建format-xx文件

// 1.index.js
import formatTime from './format-time'
export default function registerDirectives (app) {formatTime(app)
}// 2.format-time.js
import dayjs from 'dayjs'
export default function (app) {let formatString = 'YYYY-MM-DD HH:mm:ss'app.directive('format-time',{created(el,bingdings){if(bingdings.value){formatString = bingdings.value}},mounted(el,bingdings){console.log('format-time');let textContent = el.textContent;let timeStamp = parseInt(textContent);if(textContent.length === 10){  el.textContent = timeStamp * 1000;}el.textContent = dayjs(timeStamp).format(formatString)}})
}

3.1 main.js文件引入并传入全局对象

import registerDirectives from './11_自定义指令/directive'
registerDirectives(app)

3.3 组件中引用

<template><div><input type="text" ref="input" v-focus><button v-why.aaaa.bbb="'coderwhy'" v-if="counter < 2 " @click="incremnt">当前计数；{{ counter }}</button><h2 v-format-time="'YYYY/MM/DD HH:mm:ss'">{{ timeStamp }}</h2></div>
</template><script>
import { ref, onMounted } from 'vue'export default {// 局部指令directives: {setup () {const timeStamp = 1715001108724return {timeStamp}}}
</script>