vue自定义指令以及angular自定义指令（以禁止输入空格为例）

哈喽，小伙伴们，大家好啊，最近要实现一个vue自定义指令，就是让input输入框禁止输入空格

1. 建立一个directives的指令文件，里面专门用来建立各个指令的

1. 官方文档：

1. 自定义指令 | Vue.js (vuejs.org)

1. 我们都知道vue中有常见得指令 比如v-show v-for v-if v-on v-blind

1. vue还可以允许你注册自定义得指令（英文custom Directives

我们已经介绍了两种在 Vue 中重用代码的方式：组件和组合式函数。组件是主要的构建模块，而组合式函数则侧重于有状态的逻辑。另一方面，自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。

一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。下面是一个自定义指令的例子，当一个 input 元素被 Vue 插入到 DOM 中后，它会被自动聚焦：(vue片段原话)

可以写一个公共的自定义指令：

自定义一个directives.js文件

import Vue from 'vue';
 Vue.directive('input-no-space', {
    inserted(el) {
     // 监听键盘落下的事件，禁止输入空格
    // 监听输入事件，以防如果有带有空格的文本粘贴进来，可以给予替换
      el.addeventListenser('input',(e) => {
        })
    }
})

然后在main.js中：

import '@/utils/directives'

然后在组件中使用：

打印控制台：

就在监听输入事件：

vue中demo

还有一种方式，在组件中自定义：

上图截图原文：Vue进阶 之 自定义指令详解_请简述什么是vue的自定义指令?_八了个戒的博客-CSDN博客

对于自定义指令来说，一个很常见的情况是仅仅需要在mounted和updated上事项相同的行为

<div v-color="color"></div>

app.directive('color',(el,blinding) => {
    // 这会在mounted和updated时调用
    el.style.color = binding.value
})

对象字面量

如果你的指令需要多个值，你可以向它传递一个js对象字面量

<div v-demo="{color: 'white',text: 'hello！'}"></div>

app.directive('demo',(el,binding) => {
   console.log(binding.value.color)// white
   console.log(binding.value.text)// hello
})

angular自定义指令：

import { Directive,ElementRef,HostListener,Input } from "@angular/core";

@Directive({
    selector: '[input-no-space]'
})

export class InputNoSpaceDirective {
    constructor(
        private elementRef: ElementRef,
        ) {
        }

    // 禁止输入空格，即当用户按下空格键时便阻止输入
    @HostListener('keydown',['$event'])
    keydownFun(evt) {
       
    }

    // 监听输入事件，以防如果有带有空格的文本粘贴进来，可以给予替换
    @HostListener('keyup',['$event','$event.target'])
    keyupFun(evt,target) {
       
    }
}

好了，今天的文章就写到这里了