vue自定义指令

全局指令(常用)，调用方法在最底部

在src文件夹下创建directives文件夹，内部创建index.js文件和其他指令文件，如focus.js文件

focus.js文件内部(自己写的指令，名称和操作)

//暴露一个指令函数，里面写指令
export default function directiveFocus(app) {
    app.directive("focus",{
        //vue2用inserted代替mounted
        mounted(el，bindings) {
            console.log("v-fovus应用的元素被挂载了", el);
            el?.focus();
            //向自定义指令中传入参数数据,bindings查看传入的数据，下图
            console.log(bindings);
            //用传入的文本替换掉原来的文本
            el.textContent = bindings.value
         }
    })
}

Vue3小案例，将时间戳转为日期，time.js文件内部

//需要安装dayjs
import dayjs from 'dayjs';
export default function directiveTime(app) {
    app.directive('time', (el, bindings) => {
        //获取元素内的文本
        let timeContent = el.textContent
        //时间戳是十位就转成13位
        if (timeContent.length === 10) {
            timeContent = timeContent * 1000
        }else {
            timeContent = Number(timeContent)
        }
        //没传日期格式就输出默认格式
        if (!bindings.value) {
            el.textContent = dayjs(timeContent).format('YYYY-MM-DD')
        } else {
            el.textContent = dayjs(timeContent).format(bindings.value)
        }
    })
}

//使用，传格式要字符串形式
<h2 v-time="'YYYY/MM/DD'">1234586571</h2>

index.js文件内部

//引入各个指令文件并创建一个函数集中暴露
import directiveFocus from './focus';
export default function directives(app) {
    directiveFocus(app)
}

main.js文件内部

//引入使用传入参数app
import  directives  from './directives/index';
directives(app)

局部指令vue3

<script>
//需要以v开头，后面跟指令名称
const vFocus = {
  //mounted生命周期,el获取绑定的整个元素
  mounted(el) {
    console.log("v-fovus应用的元素被挂载了", el);
    //页面加载获取焦点
    el?.focus();
  },
};
</script>

局部指令vue2

<script>
export default {
  //在这个对象里自定义
  directives: {
    //指令名称
    focus: {
      //mounted生命周期,el获取绑定的整个元素
      mounted(el) {
        console.log("v-fovus应用的元素被挂载了", el);
        //页面加载获取焦点
        el?.focus();
      },
    },
  },
};

调用

<template>
  <div class="home">
     //v-方式调用
    <input type="text" v-focus />
    //传入参数，两个修饰符，参数值
    <h2 v-focus:kobe.abc.vba="'替换后的内容'">替换前的内容</h2>
  </div>
</template>