[Vue + TS] Create Type-Safe Vue Directives in TypeScript
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的更多相关文章
- [Vue + TS] Create your own Decorators in Vue with TypeScript
We’ve used @Watch, @Inject and more decorators from vue-property-decorator. In this lesson however w ...
- [Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript
With properties we can follow a one-way parent→child flow communication between components. This les ...
- vue bug & data type bug
vue bug & data type bug [Vue warn]: Invalid prop: type check failed for prop "value". ...
- vue+ts搭建项目
Tip: 为了避免浪费您的时间,本文符合满足以下条件的同学借鉴参考 1.本文模版不适用于小型项目,两三个页面的也没必要用vue2.对typescript.vue全家桶能够掌握和运用 此次项目模版主要涉 ...
- [Vue + TS] Using Route events inside Vue
vue-router introduces new hooks into the component. In this lesson we’ll show you how to use these n ...
- 【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践
1.使用官方脚手架构建 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择 ...
- vue.esm.js?efeb:628 [Vue warn]: Invalid prop: type check failed for prop "defaultActive". Expected String with value "0", got Number with value 0.
vue.esm.js?efeb:628 [Vue warn]: Invalid prop: type check failed for prop "defaultActive". ...
- Vue源码学习三 ———— Vue构造函数包装
Vue源码学习二 是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数 来到 src/core/index.js 代码是: import Vue from './instanc ...
- Vue.js源码解析-Vue初始化流程
目录 前言 1. 初始化流程概述图.代码流程图 1.1 初始化流程概述 1.2 初始化代码执行流程图 2. 初始化相关代码分析 2.1 initGlobalAPI(Vue) 初始化Vue的全局静态AP ...
随机推荐
- js阻止默认事件与js阻止事件冒泡
e.stopPropagation(); //阻止事件冒泡 功能:停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e &am ...
- How Hystrix Works?--官方
https://github.com/Netflix/Hystrix/wiki/How-it-Works Contents Flow Chart Circuit Breaker Isolation T ...
- LINQ的基本语法包含如下的8个上下文关键字,这些关键字和具体的说明如下
出于工作需要,准备把LINQ的相关知识梳理一遍,希望能填补下之前学习漏掉的或是没有注意的地方,也为未来减轻压力~ LINQ查询表达式的基本语法很容易掌握,它使用C#常见的语言构造,从外观上看,和我们常 ...
- update-alternatives 命令
update-alternatives 命令 1.功能作用 update-alternatives是dpkg的实用工具,用来维护系统命令的符号链接,以决定系统默认使用什么命令. 在Debian系统中, ...
- Codefroces 731C. Socks
C. Socks time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...
- MHP 宿舍摄像头在门卫显示方案
通过VPN拨入公司内网,实现访问外网摄像头. 1. 宿舍和MHP公司各增加一条上网线路(可用移动) 2.宿舍处理: 2台带TF卡 摄像头,加入到萤石云端 130万摄像头+64G TF卡 3.宿 ...
- FreeBSD是UNIX系统的重要分支,其命令与Linux大部分通用,少部分是其特有。
FreeBSD是UNIX系统的重要分支,其命令与Linux大部分通用,少部分是其特有. 1: man 在线查询 man ls2: ls 查看目录与档案 ls -la3: ln 建立链接文件 ln -f ...
- 虚拟摄像头vivi的测试(二)
(前一部分的基础操作来源于作者:LingXiaokai 的 Ubuntu 9.10 下如何使用笔记本摄像头以及虚拟摄像头vivi的测试) 自己仅对实际操作中需要注意的点进行阐述 一.先在Ubuntu ...
- hdparm
https://www.douban.com/note/244813504/ http://blog.sina.com.cn/s/blog_413d250e0101jtr7.html http://m ...
- leetCode 82.Remove Duplicates from Sorted List II (删除排序链表的反复II) 解题思路和方法
Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...