directives 自定义指令

(鼠标拖拽dialog框小案例)

自定义指令：复用普通元素的底层DOM访问逻辑（能很好的使逻辑和视图分离）ps：可参考官网定义

1、新建js文件或者直接在组件中写也可以（一下是js文件）

export const dialgDrag = {directives: {drag: {// 指令的定义bind: function (el) {// 获取当前元素const oDiv = eloDiv.onmousedown = (e) => {// 算出鼠标相对元素的位置const disX = e.clientX - oDiv.offsetLeftconst disY = e.clientY - oDiv.offsetTop// console.log('disX', disX, 'disY', disY)document.onmousemove = (e) => {// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置const left = e.clientX - disXconst top = e.clientY - disY// console.log('left', left, 'top', top, 'oDiv', oDiv)oDiv.style.left = left + 'px'oDiv.style.top = top + 'px'}document.onmouseup = () => {document.onmousemove = nulldocument.onmouseup = null}}},},},
}

2、组件中注册指令（分为全局注册或者局部注册）

a:全局注册，在main.js/.ts中引入导出模块指令（dialgDrag），并进行注册：app.directive('dialgDrag')

b:局部注册：

在组件中添加配置项:

directives:{dialgDrag}

3、DOM中使用指令

在需要用到指令的元素中添加v-指令名即可(v-drag)

<el-dialog :title="topTitles" class="addBooks" :visible.sync="dialogVisible" width="100%" v-drag></el-dialog>

如果使用的是vue3语法糖<script setup></script>,任何以v开头的驼峰命名的变量都可以被用作一个自定义的指令，然后可以直接在模板中使用，无需注册。

如:

const vFocus={ 逻辑代码段}

directives 自定义指令相关推荐

Vue API(directives) 自定义指令
前言:除了vue的内置指令以外,我们可以定义自定义指令.内置指令表相见:https://www.cnblogs.com/ilovexiaoming/p/6840383.html 我们定义一个最简单的 ...
vue directives自定义指令的使用
有的情况下,需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令. 自定义指令使用情景: 1.按钮级别权限的控制. 2.按钮的波纹动态效果. 3.一键copy的功能. 4.输入框自动聚焦. ...
二，本地应用（v-text,v-html,v-on；v-show,v-if,*v-bind；v-for,v-model；v-cloak ；v-once； v-pre ；自定义指令）
经常使用 v-bind:v-for,v-model 二.本地应用用vue的方式来开发常见的网页效果. (一).内容绑定 ...
Vue自定义指令介绍
[自定义指令灵魂三问] 是什么:是程序员在vue中自己定义的指令,用在标签上为什么:为了获取标签,扩展额外的功能(vue自带的指令不能满足我们的需求时用) 怎么用:全局使用和局部使用 1.全局自 ...
【前端技巧】JS自定义指令 —— 无限滚动(改写el-table-infinite-scroll)
@Author:Outman @Date:2023-03-08 JS自定义指令 -- 无限滚动(改写el-table-infinite-scroll) 自定义指令实现 // directives/in ...
Vue基础复习(2)Vue2.X过渡、动画和自定义指令
vue2.X过渡&动画和自定义指令 1. 过渡效果 2. 动画效果 3. Vue内置指令 4. 自定义指令 vue2.X过渡&动画和自定义指令 transition(过渡) anima ...
Vue.js中的自定义指令directives
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.自定义指令,需要声明钩子函数.注册自定义指令也分为注册全局自定义指令和注册局部自定义指令.两者用法相同, ...
VUE：自定义指令（directives ）选项的用法
自定义指令分为全局指令和局部指令.全局指令可在任意vue组件内生效,局部指令仅在注册了指令的组件内生效. 全局指令和局部指令写法几乎相同.全局指令是在main.js内使用Vue.directive注册 ...
vue3的自定义指令directives
一.什么是自定义指令我们已经熟悉Vue内置的一系列指令 ,比如 v-model, v-show, v-if, v-for等等,自定义指令从命名上看主要区别于Vue自带的内置指令,我们可以创建自己想要 ...

directives 自定义指令

directives 自定义指令相关推荐

最新文章

热门文章