• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

[Vue+TS]CreateType-SafeVueDirectivesinTypeScript

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript作业发布时间:2022-07-18
下一篇:
typescript 忽略检查发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap