自定义指令

vue之自定义指令解析和实现拖拽和上下左右滑长按指令

vue的自定义指令font-size的设置PC端拖拽移动端拖拽移动端上下左右滑长按注意点：bind和inserted共同点：dom插入都会调用，bind在inserted之前不同点：bind时父节点为nullinserted
牛先森家的牛奶·2023-11-17 17:33

vue常用自定义指令（弹窗拖拽、阻止重复点击、输入框失焦去空格等）

1、el-dialog弹窗拖拽：//v-dialogDrag:弹窗拖拽Vue.directive('dialogDrag',{bind(el,binding,vnode,oldVnode){constdialogHeaderEl=el.querySelector('.el-dialog__header')constdragDom=el.querySelector('.el-dialog')dial
晨昏742·2023-11-17 17:32

antdvue的model实现拖拽的自定义指令

constdraggable={install(Vue){Vue.directive('drag',{inserted(el,binding){if(window.Element&&!Element.prototype.closest){Element.prototype.closest=function(s){constmatches=(this.document||this.ownerDocu
喔烨鸭·2023-11-17 17:31

vue2自定义指令弹框拖拽、防抖节流

1.节流节流在日常的按钮点击事件中很常见，这里简单封装了一个vue的自定义指令在src目录下新建utils目录，在里面新建preventRepeatClick.jspreventRepeatClick.js
博客园实习巡查员（工号95270）·2023-11-17 17:31

vue 自定义指令弹窗鼠标拖拽弹窗表头，弹窗移动

拖拽整个过程由三个事件完成鼠标按下事件onmousedown鼠标移动事件onmousemove鼠标抬起事件onmouseupVue.directive('drag',{inserted:function(el){constdragDom=el.querySelector('.move');//鼠标拖动的区域添加movedragDom.style.cursor='move';//鼠标移动的样式dra
前端小菜菜·2023-11-17 17:01

vue 自定义指令directive的使用场景

1.一个指令定义对象可以提供如下几个钩子函数(均为可选)bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted:被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)。update:只要当前元素不被移除，其他操作几乎都会触发这2个生命周期，先触发update后触发componentUpdate。虚拟DOM什么时候更新：只要涉及到元素的隐
口袋の的天空·2023-11-17 17:00

Vue自定义指令实现弹窗(el-dialog)可拖拽功能

文件目录：directive/index.js/*todo全局批量注册自定义指令*/importelDragDialogfrom".
不做标题党！·2023-11-17 17:28

vue自定义指令弹窗拖拽

importVuefrom'vue'//v-dialogDrag:弹窗拖拽自定义指令，已在main.js引入,使用即可，每个el-dialog加指令Vue.directive('dialogDrag',
前端--李梓豪·2023-11-17 17:58

通过自定义指令实现 ant-design-vue 的a-modal弹窗可拖动

文章目录一、创建drag.js文件二、使用步骤1.全局使用，在main.js中引入drag2.代码中使用一、创建drag.js文件importVuefrom'vue'//自定义指令使弹窗可拖动//使用方式
Take-Your-Time·2023-11-17 17:28

Vue自定义指令实现弹窗拖拽，四边拉伸及对角线拉伸

Vue自定义指令实现弹窗拖拽，四边拉伸及对角线拉伸引言页面布局drag.js文件弹窗拖拽实现及边界限制鼠标指针悬停样式四边拉伸及对角线拉伸拉伸干涉引言近期公司vue前端项目需求：实现弹窗的拖拽，四边拉伸及对角线拉伸
一个小白web·2023-11-17 17:27

Vue自定义指令实现弹出框可拖拽可放大缩小效果

翻阅vue2官方文档和问度娘，发现可以用vue的自定义指令实现，所以把挣个过程记录在这篇文章中，供其它小伙伴参考使用。
BoBoAn0254·2023-11-17 17:56

vue自定义指令， 之dialog可拖拽指令封装

自定义指令这里以dialog可拖拽指令举例1、先在src中创建文件夹directives，其中建两个文件，一个index.js，一个自定义指令文件//index.js自定义指令importdraggablefrom
Joshua02·2023-11-17 17:56

Vue通过自定义指令实现元素拖动（弹窗拖动）

使用此自定义指令需要给弹窗的头部元素添加drag，class名，指明拖动那个元素会进行动态计算位置，*0.5是为了避免弹窗拖出可视区域。
勇敢小陈·2023-11-17 17:56

vue自定义指令：实现弹窗全屏和窗口化切换，拖动弹窗

缩放弹窗切换-步骤1：创建elDialogMax.ts文件，代码如下：exportdefault{bind(el,binding,vnode,oldVnode){letresizeEvent=newCustomEvent('drag-resize',{detail:'尺寸变化',bubbles:false});//初始化不最大化el.fullscreen=false;//弹框可拉伸最小宽高letm
Hello_Wade·2023-11-17 17:24

vue directive自定义指令实现弹窗可拖动

vue2创建一个js文件//draggable.jsexportdefault{//定义Vue插件install(Vue){Vue.directive('draggable',{//全局指令名为v-draggableinserted(el){el.onmousedown=function(ev){//获取鼠标按下时的偏移量（鼠标位置-元素位置）constdisX=ev.clientX-el.off
Hermia_yuan·2023-11-17 17:22

Vue实现封装自定义指令

目录一、什么是自定义指令？二、自定义指令的使用Vue中的自定义指令使用Vue.directive函数进行定义。该函数接受两个参数，第一个是指令名称，第二个是指令选项对象。
破浪前进·2023-11-17 08:31

【Vue原理解析】之插件系统

通过使用插件，我们可以轻松地添加第三方库、自定义指令或过滤器等功能到我们的应用程序中。Vue插件系统的原理解析Vue插件系统是通过Vue构造函数和原型链来
梦想是坚持·2023-11-16 20:29

Vue3封装自定义指令和hooks,并发布npm包

需求：封装一个函数要求监听DOM的宽高变化，并且支持自定义指令和hooks两种用法。
xyphf_和派孔明·2023-11-16 06:51

vue自定义指令控制权限

1、在main.js中注册全局指令importVuefrom'vue';//按钮权限控制指令Vue.directive('permission',{inserted:(el,binding)=>{const{value}=binding;//判断当前用户是否拥有该按钮权限if(!checkPermission(value)){el.parentNode.removeChild(el);}}});/
岳哥i·2023-11-15 13:37

vue自定义指令应用场景

1、输入框防抖//1.设置v-throttle自定义指令Vue.directive('throttle',{bind:(el,binding)=>{letthrottleTime=binding.value
岳哥i·2023-11-15 13:37

Vue3 自定义指令封装实现防抖 防止按钮暴力点击

本来项目前期没有做按钮防抖功能快结束时才想起来然后一个个写太慢了然后就想着封装一下新建directive.jsexportdefault{//自定义节流操作preventReClick:{mounted(el,binding){el.addEventListener('click',()=>{if(!el.disabled){el.disabled=truesetTimeout(()=>{el.d
CV工程师!!·2023-11-15 12:28

vue全局自定义指令

知识点：指令定义函数提供了几个钩子函数（可选）：bind:只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。update:被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值。componentUpdated:被绑定元素所在模板完成一次更新周期
妹妹你大胆地往前走啊！·2023-11-15 09:16

Vue中自定义指令用法

Vue中自定义指令认识自定义指令在Vue的模板语法中我们学习过各种各样的指令:v-show、v-for、v-model等等，除了使用这些指令之外，Vue也允许我们来自定义自己的指令注意:在Vue中，代码的复用和抽象主要还是通过组件通常在某些情况下
SevgiliD·2023-11-15 09:12

Vue3封装自定义指令+h()

官方install介绍directive/myDir/index.js定义指令import{h,render,ref}from"vue";constvMyDir={mounted(el,binding){renderElement(el,binding);},};//inserted是Vue2的生命周期钩子，所以在Vue3项目中要使用mountedconstrenderElement=(el,bi
珊珊而川·2023-11-15 04:23

vue鼠标右键自定义菜单_使用Vue自定义指令实现右键菜单

看了下vue的自定义指令文档后，经过一番折腾，终于实现我的这个想法，本文就跟大家分享下我的实现思路以及过程，欢迎各位感兴趣的开发
weixin_39673293·2023-11-15 04:09

Vue3 添加按钮权限自定义指令

1需求根据不同的权限展示或隐藏新增编辑的按钮2实现使用自定义指令来控制按钮，当有权限是就显示按钮，没有就移除元素3代码实现过程3.1创建指定要权限按钮控制文件src/directives/permission.ts
星期天!·2023-11-14 16:40

vue3自定义指令——元素平滑移动

vue提供一个用户可以高度自定义的指令入口directives利用这个入口我们实现一个常见的元素平滑移动的自定义指令‘sl’首先我们结合指令创建一个多元素的界面：这个场景我们在很多网站，商城都有见过，特别对于移动端的清单类界面我们的终极目标是在滚动的过程中出现在视口的元素移动
Eirice·2023-11-14 15:11

vue的常用指令【v-bind v-for v-on v-model 自定义指令】

vue的常用指令v-bind指令作用：动态绑定一个或多个属性，属性值是一个动态的【值是依赖于data中的数据源】使用方式：跳转跳转绑定绑定HTMLClass1.对象绑定–html代码–js代码varvue=newVue({el:'.app',data:{isOne:true,isTwo:true}})最终渲染为当data里的isOne或isTwo变化时，class列表会相应更新以上代码等价于//h
努力的地球人·2023-11-12 08:20

实现vue自定义指令v-loading

有了Vue.directive这个方法就可以在页面中使用自定义指令v-loading了//plugins/loading/index.jsimportloadingfrom'.
Ljsxx·2023-11-12 08:49

vue封装之六个非常实用的Vue自定义指令

vue封装之六个非常实用的Vue自定义指令一v-copy二v-longpress三v-debounce四v-permission五v-waterMarker六v-loadMore七源码集合：一v-copy
Dormiveglia-flx·2023-11-12 06:39

Vue 自定义指令绑定的处理函数中传递参数

需求背景现在需要为自定义指令绑定函数，并且需要向函数中传递参数，类似v-on="handleFunc(arg1,arg2)"。
June·DD·2023-11-11 23:51

vue 禁止重复点击 发送多次请求

2.使用Vue自定义指令//全局注册自定义
kite0121·2023-11-11 20:51

实现ElementUI的Dialog弹窗可以拖拽移动

实现ElementUI的Dialog弹窗可以拖拽移动ElementUI的Dialog对话框默认的位置是在屏幕居中靠上方并且不允许拖拽移动的（如下图所示）我么可以使用vue的自定义指令，绑定到需要拖拽移动的
RoddyLD·2023-11-09 12:38

ElementUI实现Dialog弹窗拖拽

一、指令式实现dialogDraggable.js//自定义指令：实现element-ui对话框dialog拖拽功能importVuefrom'vue'//v-draggable:弹窗拖拽Vue.dir
要不要吃烤肉·2023-11-09 12:08

ElementUI的Dialog弹窗实现拖拽移动功能

实现ElementUI的Dialog弹窗可以拖拽移动实现步骤：1.创建自定义指令在utils文件夹下新建文件夹utils/directive/el-dragDialog/index.jsimportdragfrom
新时代丘鸣山·2023-11-09 12:37

JS实现千分位分隔符；VUE3全局实现千分位分隔物 财务数字方法；VUE3使用自定义指令实现全局千分位分隔 财务数字

JS千分位分隔符方法//千分位分隔符exportfunctionnumberToCurrencyNo(value){if(!value)return0letisPositive=value>0//获取整数部分constintPart=Math.trunc(value)//整数部分处理，增加,constintPartFormat=intPart.toString().replace(/(\d)(?=
Web_Lys·2023-11-09 12:38

【vue3】el-input 的获取焦点——el挂载：自定义指令，focus使 input 获取焦点（el-input 的Input Methods）

参考网址：（适用vue2）让element-ui的输入框聚焦的4种方式ElementUI：使input自动聚焦的两种方法使el-form中的el-input自动获取焦点在vue3中，保留了自定义指令的特性
甜甜圈Sweet Donut·2023-11-08 17:43

速度与敏捷：解密Velocity的奥秘

：你只管努力，剩下的交给时间：小破站速度与敏捷：解密Velocity的奥秘前言第一：Velocity模板语法基础第二：变量和数据渲染第三：条件判断与逻辑实现第四：循环与迭代第五：自定义指令第六：宏第七：
一只牛博·2023-11-08 16:49

19 道高频 vue 面试题解答（下）

但是如果给每个属性都添加watcher用于更新的话，会产生大量的watcher从而降低性能而且粒度过细也得导致更新不准确的问题，所以vue采用了组件级的watcher配合diff来检测差异写过自定义指令吗原理是什么指令本质上是装饰器
bb_xiaxia1998·2023-11-08 00:48

Vue的详细知识点梳理

Vue的指令：包括内置指令（如v-model、v-if、v-for、v-on等）和自定义指令，指令的使用方法和参数含义等。Vue的组件
雪梅零落·2023-11-07 14:13

vue3的自定义指令

1.自定义指令的目的和简单介绍自定义指令主要是为了重用涉及普通元素的底层DOM访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。
努力学习的木子·2023-11-07 01:11

自定义指令

二、自定义指令1.指令介绍内置指令：v-html、v-if、v-bind、v-on…这都是Vue给咱们内置的一些指令，可以直接使用自定义指令：同时Vue也支持让开发者，自己注册一些指令。
清梦压星河_Ciao·2023-11-07 00:04

el-select下拉滚动加载

先给大家看一下实现的效果（带搜索）效果废话不多说直接上代码html代码//这里主要是一个地方需要注意就是自定义指令这里下面我们会使用到就是//**v-el-select-loadmore="handleLoadmore"js
TJHWM_·2023-11-06 17:28

[uni-app] 防重复点击处理 - 自定义指令

一般用节流防抖的方式处理,这里通过vue的自定义指令方式也可以实现:importVuefrom'vue'//自定义指令防止按钮重复点击v-debounceconstdebounce={install(Vue
iOSTianNan·2023-11-06 03:24

vue2实现卡片拖拽式课程表

目录一、效果展示二、代码分析2.1、表格编写与课程卡片2.2、初始化数据与渲染2.3、拖拽卡片到表格，进行插入2.4、自定义指令进行删除三、Js实现列表拖拽排序3.1、效果展示3.2、代码分析一、效果展示二
野槐·2023-11-05 15:43

Vue 3 迁移策略笔记—— 第6节：自定义指令

前言本笔记主要基于官方文档《迁移策略——自定义指令》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。
杰~JIE·2023-11-05 05:57

第十七节——指令

此外，你也可以自定义指令来满足特定的需求。二、常见指令1、v-model用于实现表单元素与Vue实例数据
爱在你心中·2023-11-05 05:15

8个非常实用的Vue自定义指令

在Vue，除了核心功能默认内置的指令(v-model和v-show)，Vue也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通DOM元素进行操作。
硅谷干货·2023-11-05 03:16

Vue3 的自定义指令图片懒加载

手把手带你写一个Vue3的自定义指令以下文章来源于老黄的前端私房菜，作者黄轶黄老师背景众所周知，Vue.js的核心思想是数据驱动+组件化，通常我们开发页面的过程就是在编写一些组件，并且通过修改数据的方式来驱动组件的重新渲染
李仁平·2023-11-04 22:49

Angular学习笔记：组件生命周期和自定义指令

本文是自己的学习笔记，主要参考资料如下。-B站《2020最新Angular实战教程》，老陈打码制作，https://www.bilibili.com/video/BV1i741157Fj?p=2。1、生命周期1.1、construct函数1.2、ngOnChanges1.2.1、示例1.3、ngOnInits1.4、其他hook2、指令2.1、使用命令行创建指令2.2、定义指令接收参数2.2.1、
大苏打seven·2023-11-04 21:43
上一页 3 4 5 6 7 8 9 10 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他