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

编写自定义插件

// src/plugins/directive.ts
import type { App } from 'vue'
// 插件选项的类型
interface Options {
  // 文本高亮选项
  highlight?: {
    // 默认背景色
    backgroundColor: string
  }
}
/**
 * 自定义指令
 * @description 保证插件单一职责,当前插件只用于添加自定义指令
 */
export default {
  install: (app: App, options?: Options) => {
    /**
     * 权限控制
     * @description 用于在功能按钮上绑定权限,没权限时会销毁或隐藏对应 DOM 节点
     * @tips 指令传入的值是管理员的组别 id
     * @example <div v-permission="1" />
     */
    app.directive('permission', (el, binding) => {
      // 假设 1 是管理员组别的 id ,则无需处理
      if (binding.value === 1) return
      // 其他情况认为没有权限,需要隐藏掉界面上的 DOM 元素
      if (el.parentNode) {
        el.parentNode.removeChild(el)
      } else {
        el.style.display = 'none'
      }
    })
    /**
     * 文本高亮
     * @description 用于给指定的 DOM 节点添加背景色,搭配文本内容形成高亮效果
     * @tips 指令传入的值需要是合法的 CSS 颜色名称或者 Hex 值
     * @example <div v-highlight="`cyan`" />
     */
    app.directive('highlight', (el, binding) => {
      // 获取默认颜色
      let defaultColor = 'unset'
      if (
        Object.prototype.toString.call(options) === '[object Object]' &&
        options?.highlight?.backgroundColor
      ) {
        defaultColor = options.highlight.backgroundColor
      }
      // 设置背景色
      el.style.backgroundColor =
        typeof binding.value === 'string' ? binding.value : defaultColor
    })
  },
}

在 main.ts 中加载启用插件

// src/main.ts
import { createApp } from 'vue'
import App from '@/App.vue'
import directive from '@/plugins/directive' // 导入插件
createApp(App)
   // 自定义插件
  .use(directive, {
    highlight: {
      backgroundColor: '#ddd',
    },
  })
  .mount('#app')

在Vue组件中使用

<template>
  <!-- 测试 permission 指令 -->
  <div>根据 permission 指令的判断规则:</div>
  <div v-permission="1">这个可以显示</div>
  <div v-permission="2">这个没有权限,会被隐藏</div>
  <!-- 测试 permission 指令 -->

  <!-- 测试 highlight 指令 -->
  <div>根据 highlight 指令的判断规则:</div>
  <div v-highlight="`cyan`">这个是青色高亮</div>
  <div v-highlight="`yellow`">这个是黄色高亮</div>
  <div v-highlight="`red`">这个是红色高亮</div>
  <div v-highlight>这个是使用插件初始化时设置的灰色</div>
  <!-- 测试 highlight 指令 -->
</template>

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

时间: 2022-07-07

如何使用vue自定义指令构建拖放插件

我们都知道html5的拖放特性,利用它可以很方便的实现拖拽和放置功能,比如一些选择类操作的使用场景,让用户去拖拽比鼠标点击更容易接受和理解.今天我们就利用这一特性,结合vue的自定义指令,来实现一个简单但是实用的拖放插件. 为什么叫它插件?因为我们的目标不是开发一个vue组件,而是两个vue的自定义指令,并且最终会把这两个自定义指令封装到一个es6的class里,在实际项目中引入就可以很方便的使用了. 大部分的拖放使用场景都是把一些待选元素从A区域拖放到B区域.这里就涉及到两个概念,一个是可拖拽

使用vue自定义指令开发表单验证插件validate.js

这段时间在进行一个新项目的前期搭建,新项目框架采用vue-cli3和typescirpt搭建.因为项目比较轻量,所以基本没有使用额外的ui组件,有时候我们需要的一些基础组件我就直接自己开发了.今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过程. 1.vue插件开发 关于vue的插件开发,官方文档里有很清晰的说明,详情可以去阅读开发文档.我自己开发的表单验证插件validate.ts和loading,messageBox插件都是利用了这种方式.今天先来看表单验

vue自定义指令实现v-tap插件

放弃jQuery,拥抱MVVM,拥抱组件吧! vue-touch基于hammer,对于普通简单手势的页面来说过于庞大! 于是想自己实现一个最常用的手势tap.顺着自定义指令和插件文档,昨晚实现了一个v-tap指令,丢出这篇干货. 指令与插件介绍 自定义指令和插件官方文档中也介绍比较简单详细,就不过多介绍. 我先说下本插件就用了三个API,如果大家不了解最好先事先看下文档避免后面的代码看的迷糊. 指令部分 1.update(nVal,oVal) 2.acceptStatement 插件部分 Vue

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

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

如何写一个&nbsp;Vue3&nbsp;的自定义指令

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

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

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

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

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

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

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

vue3的自定义指令directives实现

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

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

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

vue3&nbsp;自定义指令详情

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

vue3 自定义指令控制按钮权限的操作代码

经过1个周的摸索和查阅资料,终于搞定VUE3中自定义指令,实现按钮级别的权限控制.当然,只是简单的对按钮进行隐藏和删除的dom操作比较容易,一直纠结的是当按钮无权限时,不是直接删除当前dom元素(button按钮),这样用户体验不好,让人感觉没有这个功能.为了提高用户体验,当该按钮无权使用时,使用el-tooltip功能进行提醒.以下是个人的做法,是否有弊端和不足,或者各位高手有更优的方案,欢迎指导和赐教! 1.总体效果如下: 2.permissionlist组件中的按钮设置为:增加.修改和删除