Vue自定义指令

main.js

 

import Vue from "vue";
import App from "./App.vue";

Vue.directive("font", {
  bind(el, binding, vnode) {
    console.log(binding);
    el.style.fontFamily = binding.arg==='micro'?'Microsoft Yahei':'Arail';
    el.style.fontWeight = binding.modifiers.bold ? "bold" : "";
    el.style.fontStyle = binding.modifiers.italic ? "italic" : "";
    el.style.color = binding.value;
  }
});

new Vue({
  render: h => h(App)
}).$mount("#app");

 

App.vue

 

<template>
  <div id="app">
    <div v-font:micro.bold.italic="color">加勒比海盗</div>
  </div>
</template>

<script>
export default {
  name: "app",
  data: () => {
    return { color: "gold" };
  }
};
</script>

<style>
</style>

 

运行效果