vue学习-自定义指令

vue全局指令

在main.js注册全局指令

使用：元素上加上v-自定义指令名

// GlobalRedBG.js
export default {
  install: (app, option) => {
    app.directive("global-red-bg", {
      mounted(el) {
        el.style.background = option.color;
      },
    });
  },
};

import { createApp } from "vue";
import App from "./App.vue";
import { router } from "./router";
import GlobalRedBG from "./directives/GlobalRedBG";

const app = createApp(App).use(router);

// 注册全局指令
app.use(GlobalRedBG, { color: "red" });

app.mount("#app");

---

vue局部指令

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

<script>
export default {
  directives: {
    "my-focus": {
      mounted(el) {
        el.focus();
      },
    },
  },
};
</script>

当然指令也可以从外面引入

// Re