自定义指令

用法

全局注册：在main.ts文件中引入

Vue.directive('focus', {inserted: function (el) {if (focusTimer) {clearTimeout(focusTimer);}focusTimer = setTimeout(() => {// 100毫秒延迟解决第二次点击弹框，输入框不自动获取焦点的bugel.focus();}, 100);},
});

局部注册：在使用该指令的组件中申明
在模板中使用
```
<a-input v-focus></a-input>
```

应用场景

输入框自动聚焦：v-focus

let focusTimer: number | null = null;Vue.directive('focus', {inserted: function (el) {if (focusTimer) {clearTimeout(focusTimer);}focusTimer = setTimeout(() => {// 100毫秒延迟解决第二次点击弹框，输入框不自动获取焦点的bugel.focus();}, 100);},
});

表单的重复提交：v-throttle

// 传参 <button v-throttle="[()=>{showAddModal()}, 5000]" />
// 不传参 <button v-throttle="showAddModal" />
Vue.directive('throttle', {inserted: function (el, binding) {let cbFun: number | null = null;el.addEventListener('click', () => {let func;let throttleTime = 2000;if (binding.value instanceof Array) {[func, throttleTime] = binding.value;} else {func = binding.value;}// 如果是第一次执行或者到了节流时间if (!cbFun) {func();cbFun = setTimeout(() => {cbFun = null;}, throttleTime);}});},
});

自定义指令简介及用法相关推荐

Vue.js中的自定义指令directives
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.自定义指令,需要声明钩子函数.注册自定义指令也分为注册全局自定义指令和注册局部自定义指令.两者用法相同, ...
vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画
自定义指令: vue中通过directive方法自定义指令,如:自定义一个v-focus指令: <script>Vue.directive('focus', {//通过directive( ...
Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
VUE：自定义指令（directives ）选项的用法
自定义指令分为全局指令和局部指令.全局指令可在任意vue组件内生效,局部指令仅在注册了指令的组件内生效. 全局指令和局部指令写法几乎相同.全局指令是在main.js内使用Vue.directive注册 ...
Vue中directives用法--自定义指令控制按钮权限
1. 新建 hasPermission.js文件 const hasPermission = {install (Vue, options) {Vue.directive('has', {insert ...
Vue2自定义指令directives简介
我们在学习vue的时候会学习多个指令,如v-show,v-text,v-pre等等.但如果我们想要完成一些现有指令无法完成的操作的时候,就应该使用自定义指令来实现我们想要的操作.所以现在我们就来简单讲 ...
vue自定义指令用法
1.vue中的指令有: v-text v-html v-show v-if v-else v-else-if v-for v-on v-bind v-model v-pre v-cloak v-onc ...
angular directive自定义指令
先来看一下自定义指令的写法 app.directive('', ['', function(){// Runs during compilereturn {// name: '',// priorit ...
【15】Vue：02-Vue表单基本操作、表单修饰符、自定义指令、计算属性computed、侦听器watch、过滤器、生命周期、数组变异方法、替换数组、动态数组响应数据、图书列表案例、TODOS案例
文章目录 day02 Vue常用特性表单基本操作表单修饰符自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令带参数自定义指令局部指令计算属性 c ...

自定义指令简介及用法

自定义指令

自定义指令简介及用法相关推荐

最新文章

热门文章