1.定义一个过滤器
// color-directive.ts
import { DirectiveOptions } from 'vue'
const directive: DirectiveOptions = {
inserted(el, node) {
/**
* Using value:
* v-colorDirective={color: 'red', backgroundColor: 'blue'}
*/
if (node.value) {
el.style.backgroundColor = node.value.backgroundColor;
el.style.color = node.value.color;
}
/**Using modifiers:
* v-colorDirective.color
* v-colorDirective.backgroundColor
*/
if (node.modifiers.color){
el.style.color = node.value;
}
if (node.modifiers.backgroundColor) {
el.style.backgroundColor = node.value;
}
}
};
export default directive;
2.使用
<template>
<div class="hello">
<h1 v-colorDirective="{color: 'red', backgroundColor: 'blue'}">{{ message }}</h1>
<button @click="clicked">Click</button>
<router-link to="/hello-ts">Hello Ts</router-link>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import colorDirective from '../color-directive';
@Component({
directives: {
colorDirective
}
})
export default class Hello extends Vue {
....
}
<template>
<div>
<h3 v-colorDirective.color="'green'">HelloTs</h3>
<router-link to="/">Hello</router-link>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import colorDirective from '../color-directive';
@Component({
directives: {
colorDirective
}
})
export default class HelloTs extends Vue {
...
}
.