vue3的自定义指令directives实现

目录
  • 一、什么是自定义指令
  • 二、指令的分类
  • 三、指令的作用
  • 四、指令的钩子
  • 五、钩子参数
  • 六、指令的使用
    • 指令的参数和修饰符

一、什么是自定义指令

我们已经熟悉Vue内置的一系列指令 ,比如 v-model, v-show, v-if, v-for等等,自定义指令从命名上看主要区别于Vue自带的内置指令,我们可以创建自己想要的指令,使用必须以v-为前缀

二、指令的分类

局部指令:组件中通过directives选项实现,只能在当前组件中使用

全局指令:应用实例的directive方法,可以在任意组件中被使用(所有内置指令都为全局指令)

三、指令的作用

  • 代码重用
  • 处理普通元素的底层 DOM 访问的逻辑

四、指令的钩子

指令的钩子和组件的生命周期很像,只是没有beforeCreate

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount() {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted() {},
  // 绑定元素的父组件更新前调用
  beforeUpdate() {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated() {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount() {},
  // 绑定元素的父组件卸载后调用
  unmounted() {}
}

五、钩子参数

指令的钩子会传递以下几种参数:

  • el:指令绑定到的元素。这可以用于直接操作 DOM。
  • binding:一个对象,包含以下 property:
    • value:传递给指令的值。例如在 v-my-directive=“1 + 1” 中,值是 2。
    • oldValue:之前的值,仅在 beforeUpdate 和 updated 中可用。无论值是否更改,它都可用。
    • arg:传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中,参数是 “foo”。
    • modifiers:一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中,修饰符对象是 { foo: true, bar: true }。
    • instance:使用该指令的组件实例。
    • dir:指令的定义对象。
  • vnode:代表绑定元素的底层 VNode。
  • prevNode:之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

六、指令的使用

简单需求: 当某个元素挂载完成后可以自定获取焦点

默认的实现方式,假如有多个地方需要使用时,这种实现方式的代码会显得繁杂冗余

<template>
  <div>
    <input type="text" ref="input" />
  </div>
</template>

<script>
import { ref, onMounted } from "vue";

export default {
  setup () {
    const input = ref(null);

    onMounted(() => {
      input.value.focus();
    })

    return {
      input
    }
  }
}
</script>

<style scoped>
</style>

使用自定义指令实现

<template>
  <input type="text" v-focus />
</template>
<script setup>
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

注:在<script setup> 中,任何以 v 开头的驼峰式命名的变量都可以被用作一个自定义指令,vFocus 即可以在模板中以 v-focus 的形式使用

如果不使用 <script setup>,自定义指令可以通过 directives 选项注册

<template>
  <input type="text" v-focus />
</template>
<script>
export default {
  setup() {
    /*...*/
  },
  directives: {
    focus: {
       mounted: (el) => el.focus()
    }
  }
}
</script>

也可以全局注册该指令,这样所有组件都可以使用v-focus

const app = createApp({})

// 使 v-focus 在所有组件中都可用
app.directive('focus', {
 	mounted: (el) => el.focus()
})

指令的参数和修饰符

假如我们使用这样一个指令v-example

<div v-example:params.lazy="someValue"></div>

此时指令钩子函数的binding 参数会是一个这样的对象:

{
  arg: 'params',
  modifiers: { lazy: true },
  value: /* `someValue` 的值 */,
  oldValue: /* 上一次更新时 `someValue` 的值 */
}

也就是说指令:后面跟着的是指令的参数,.后面跟着的是指令的修饰符

简单示例一:

背景高亮

<template>
  <div>
    <div v-highlight>默认的高亮颜色</div>
    <div v-highlight="{ bgColor: 'red', color: 'yellow' }">这是一个简单的例子</div>
  </div>
</template>
<script>
export default {
  setup() {
    /*...*/
  },
  directives: {
    highlight: {
      mounted(el, binding) {
        console.log('binding', binding)
        const color = binding.value && binding.value.color ? binding.value.color : '#fff'
        const bgColor = binding.value && binding.value.bgColor ? binding.value.bgColor : 'blue'
        el.style.color = color
        el.style.backgroundColor = bgColor
      }
    }
  }
}
</script>

简单示例二:

<template>
  <div>
    <div v-letter:uppercase>hello world</div>
  </div>
</template>
<script>
export default {
  setup() {
    /*...*/
  },
  directives: {
    letter: {
      mounted(el, binding) {
        const text = el.innerHTML
        if (binding.arg === 'uppercase') {
          el.innerHTML = text.toUpperCase()
        } else if (binding.arg === 'lowercase') {
          el.innerHTML = text.toLowerCase()
        } else {
          el.innerHTML = text.split('')
        }
      }
    }
  }
}
</script>

到此这篇关于vue3的自定义指令directives实现的文章就介绍到这了,更多相关vue3 directives内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • VUE中的自定义指令钩子函数讲解

    目录 自定义指令钩子函数 自定义指令 先上官方解释 小贴士 钩子函数运行顺序 自定义指令钩子函数 自定义指令 除了VUE 内置指令外,VUE也支持我们自定义注册指令,分为局部和全局注册 但这些想必大家都不陌生,其中官方API也是写的明明白白 官方API点这里 而且自定义指令也会极大程度上帮助我们日常的编程,但这是很有意思的事情出现了,就是钩子函数,很多老铁都弄不明白这五个函数的具体区别 先上官方解释 bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. inser

  • vue自定义指令实现元素滑动移动端适配及边界处理

    目录 效果演示 核心属性 实现思路 代码 注意 自定义指令this指向问题 滑动后点击事件被触发 移动端滑动问题 效果演示 核心属性 Element.clientWidth:元素可视宽度. Element.clientHeight:元素可视高度. MouseEvent.clientX:鼠标相对于浏览器左上顶点的水平坐标. MouseEvent.clientY:鼠标相对于浏览器左上顶点的垂直坐标. Touch.clientX:触点相对于浏览器左上顶点的水平坐标(移动端属性). Touch.clie

  • vue使用自定义指令来控制页面按钮组的权限思想

    目录 自定义指令来控制页面按钮组的权限思想 vue添加按钮权限~通过自定义指令 1.需求 2.思路 3.代码实现 自定义指令来控制页面按钮组的权限思想 在vuejs中, 我们可以自定义一些指令,来控制一些按钮加载之前的动作, 比如现有的 v-if 或者 v-show 这些功能是我们可以手写的, 现在们来做一个初级的页面级的权限控制的例子 vue自定义指令 <template>   <div class="table-wrapper">     <div c

  • vue关于自定义指令与v-if冲突的问题

    目录 自定义指令与v-if冲突 问题 解决 vue指令v-for和v-if为什么不能同时使用 自定义指令与v-if冲突 问题 当同时存在 v-if 和自定义隐藏的指令(后面统一称为v-power) el 会被删除,单元素上的指令依旧会执行,修改的是上一个元素的显示影藏 解决 第一种方式,将v-if 替换为v-show,这样元素一直存在,就不会出现问题,(如果你的自定义指令会动态改变display属性,那就可能和v-show冲突 v-show是通过display:none来控制影藏,这点需要注意,

  • Vue自定义指令中无法获取this的问题及解决

    目录 自定义指令中无法获取this 解决方法 Vue使用this的这几个坑你都知道吗 一.普通函数 二.Vue中的this 自定义指令中无法获取this 问题 最近在使用自定义指令时遇到一个问题,我想在指令里通过this直接去访问vue实例数据,但是显示未定义,经大佬提醒,里面的this很可能不是指向vue实例 解决方法 在函数里增加第三个参数vnode,vnode.context就是指向当前的vue实例 总结 指令里的this不是指向vue实例,可以使用vnode.context获取this

  • vue3使用自定义指令实现el dialog拖拽功能示例详解

    目录 实现el-dialog的拖拽功能 通过自定义指令实现拖拽功能 实现拖拽功能 使用方式 实现el-dialog的拖拽功能 这里指的是 element-plus 的el-dialog组件,一开始该组件并没有实现拖拽的功能,当然现在可以通过设置属性的方式实现拖拽. 自带的拖拽功能非常严谨,拖拽时判断是否拖拽出窗口,如果出去了会阻止拖拽. 如果自带的拖拽功能可以满足需求的话,可以跳过本文. 通过自定义指令实现拖拽功能 因为要自己操作dom(设置事件),所以感觉还是使用自定义指令更直接一些,而且对原

  • vue3的自定义指令directives实现

    目录 一.什么是自定义指令 二.指令的分类 三.指令的作用 四.指令的钩子 五.钩子参数 六.指令的使用 指令的参数和修饰符 一.什么是自定义指令 我们已经熟悉Vue内置的一系列指令 ,比如 v-model, v-show, v-if, v-for等等,自定义指令从命名上看主要区别于Vue自带的内置指令,我们可以创建自己想要的指令,使用必须以v-为前缀 二.指令的分类 局部指令:组件中通过directives选项实现,只能在当前组件中使用 全局指令:应用实例的directive方法,可以在任意组

  • vue3.0自定义指令(drectives)知识点总结

    在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能会这么做. const app = Vue.createApp({ mounted(){ this.$refs.input.focus(); }, template: `<input type="text" ref="input" />`, }); 在mou

  • 理解Vue2.x和Vue3.x自定义指令用法及钩子函数原理

    目录 Vue2.x用法 全局注册 局部注册 使用 钩子函数 钩子函数的参数 Vue3.x用法 全局注册 局部注册 使用 钩子函数 较 Vue2.x 相比, 钩子函数有变化 Vue2.x用法 全局注册 Vue.directive( 指令名, { 自定义指令生命周期 } ) 局部注册 directives: { 指令名, { 自定义指令生命周期 } } 使用 v-指令名: 属性名.修饰符="value值" 钩子函数 bind - 自定义指令绑定到 DOM 后调用. 只调用一次, 注意: 只

  • 如何写一个 Vue3 的自定义指令

    目录 背景 插件 指令的实现 前端巅峰 以下文章来源于微信公众号前端巅峰 背景 众所周知,Vue.js 的核心思想是数据驱动 + 组件化,通常我们开发页面的过程就是在编写一些组件,并且通过修改数据的方式来驱动组件的重新渲染.在这个过程中,我们不需要去手动操作 DOM. 然而在有些场景下,我们还是避免不了要操作 DOM.由于 Vue.js 框架接管了 DOM 元素的创建和更新的过程,因此它可以在 DOM 元素的生命周期内注入用户的代码,于是 Vue.js 设计并提供了自定义指令,允许用户进行一些底

  • vue 自定义指令directives及其常用钩子函数说明

    目录 自定义指令directives及常用钩子函数 说明 钩子函数 vue 全局定义 局部定义(vue-cli) 钩子函数里面的参数 vue 自定义指令 directives选项 directives选项中定义 指令 自定义指令directives及常用钩子函数 说明 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令 使用的地方:有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令 钩子函数 inserted:被绑定元素插

  • Vue3 编写自定义指令插件的示例代码

    编写自定义插件 // src/plugins/directive.ts import type { App } from 'vue' // 插件选项的类型 interface Options { // 文本高亮选项 highlight?: { // 默认背景色 backgroundColor: string } } /** * 自定义指令 * @description 保证插件单一职责,当前插件只用于添加自定义指令 */ export default { install: (app: App,

  • Vue3.0写自定义指令的简单步骤记录

    前言 vue中提供了丰富的内置指令,如v-if,v-bind,v-on......,除此之外我们还可以通过Vue.directive({})或者directives:{}来定义指令 在开始学习之前我们应该理解,自定义指令的应用场景,任何功能的开发都是为了解决具体的问题的, 通过自定义指令,我们可以对DOM进行更多的底层操作,这样不仅可以在某些场景下为我们提供快速解决问题的思路,而且让我们对vue的底层有了进一步的了解 第一步 在main.js 在src下简历对应的文件夹 import Direc

  • vue3 自定义指令详情

    目录 一.注册自定义指令 1.1.全局自定义指令 1.2.局部自定义指令 二.自定义指令中的生命周期钩子函数 三.自定义指令钩子函数的参数 四.自定义指令参数 一.注册自定义指令 以下实例都是实现一个输入框自动获取焦点的自定义指令. 1.1.全局自定义指令 在vue2中,全局自定义指令通过 directive 挂载到 Vue 对象上,使用 Vue.directive('name',opt). 实例1:Vue2 全局自定义指令 Vue.directive('focus',{ inserted:(e

  • 如何在Vue3中实现自定义指令(超详细!)

    目录 前言 生命周期 钩子的参数 简化形式 对象字面量 在组件上使用指令 几个实用的自定义指令 自动聚焦v-focus 防抖v-debounce 节流v-throttle 弹窗隐藏v-hide 总结 在开发Vue项目时,大多数人都会使用到Vue内置的一些指令,例如v-model.v-if等,在使用的时候不知道有没有想过自己也来实现一个指令呢.本文就以Vue3项目为基础,从原理.方法到实际案例.注意事项,尽可能细致的讲解如何自定义指令. 前言 我们需要明白为什么需要自定义一个指令,其实就是想更加简

随机推荐