[Vue + TS] Create Type-Safe Vue Directives in TypeScript

最新推荐文章于 2025-02-11 10:54:34 发布

转载最新推荐文章于 2025-02-11 10:54:34 发布 · 589 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/7510872.html

文章标签：

#javascript #ViewUI

本文介绍如何使用TypeScript为Vue组件创建自定义颜色指令，通过该指令可以改变组件的颜色及背景颜色，并展示了如何传递对象给指令以增加灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 {
  ...
}

转载于:https://www.cnblogs.com/Answer1215/p/7510872.html