标签：com lin more ini types objects pes nbsp lang
Directives allow us to apply DOM manipulations as side effects. We’ll show you how you can create your own Vue directive to change a component’s colors and type-safe it with TypeScript.
We’ll additionally show how you can pass objects to your directives and make them more flexible!
Create a directive definition:
// 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;
Using directive inside component:
<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 {
...
}
[Vue + TS] Create Type-Safe Vue Directives in TypeScript
标签：com lin more ini types objects pes nbsp lang
原文地址：http://www.cnblogs.com/Answer1215/p/7510872.html
