我们之前用过很多vue自带的指令了，比如v-if、v-show、v-html、v-model，其实我们也可以自己定义指令。
在vue中大部分功能都能通过数据驱动的方式来完成，我们只要控制数据，而不用去操作dom，但是有一些功能是数据驱动无法控制到的，比如我们之前说过的滚动、让输入框聚焦等等，这时候我们就又需要去操作dom了，自定义指令就派上了用场
咱们先来看一个vue官网的例子，让输入框在页面加载完成后获得焦点
我们写directive的还有一个原因就是为了方便复用，所以我们来定义全局directive
在main.js中，使用根vue对象来创建指令，那么在我们整个的项目都可以使用它
import { createApp } from 'vue'
import App from './App19.vue'
// 获取到createApp创建的全局vue对象
const app = createApp(App)
// 调用vue的directive方法来定义一个指令
app.directive('focus', {
mounted(el) {
// el就是获取到的dom元素
el.focus()
},
})
app.mount('#app')
用directive方法来定义一个指令
第一个参数：指令的名字，使用时候前面要加上v-，比如这里名字叫做focus，使用的时候要写成v-focus
第二个参数：是一个对象，里面写了mounted回调函数，跟我们之前写的mounted一样，表示这个元素挂载时，调用这个方法，它的第一个参数el，表示有这个指令的那个dom对象，
我们看一下怎么使用就知道了
<template>
<div>
<input type="text" v-focus />
</div>
</template>
<script>
// directives
export default {
name: 'App',
data() {
return {}
},
}
</script>
<style></style>
这段代码只有一个地方需要注意一下，就是我们指令的使用
<input type="text" v-focus />
1.使用时v-加上指令的名字，这里是v-focus
2.在定义指令时，mounted回调函数，具体到这个例子中就是input标签在挂载到页面上以后，自动调用的
3.mounted回调函数的第一个参数el，就是这个input的dom对象，我们直接调用了它的focus方法，所以它就得到了焦点
我们再来写一个常用的例子，比如在后台管理的项目中，每个人都有不同的权限，权限不同，能看到的内容也不同，
现在有一个删除按钮，它对应的权限是‘del’，有这个权限的人才能看到这个按钮，没有权限的人就看不到
我们这个指令名字叫hasPermi，从vue-element-admin学过来的
这次我们先写这个指令的使用
<button v-hasPermi="'del'">删除按钮</button>
表示有del权限的人，才能看到删除按钮
这个指令是这么写的
app.directive('hasPermi', {
mounted(el, binding) {
const permission = binding.value // 获取到指令绑定的值
const myPermission = ['add', 'update', 'del'] // 当前登录人的权限列表，这里模拟一下，写死了
if (!myPermission.includes(permission)) {
// 判断如果当前登录人没有这个元素绑定的权限，就把这个元素移除，所以没有权限的人就看不到这个内容了
el.parentNode && el.parentNode.removeChild(el)
}
},
})
这个例子的重点在于，回调函数的第二个参数binding，在binding的value里我们拿到了在使用指令时给它的值
v-hasPermi="'del'"
这里传给的是一个字符串，所以del用单引号包了起来
除了我们使用的mounted回调函数，还有很多其他的，就不一一介绍了
binding里还可以获取其他参数也不介绍了，一大堆看一遍也记不住，需要写directive时，大家再去官网查api就行了
下面我们来说重要的是，把代码写得优雅一点
现在，我们把指令都写在了main.js里面，显得main.js内容很乱，我们就要整理整理了
首先在src文件夹下建立一个directives文件夹，把我们的指令都放这里面
focus.js
export const focus = {
mounted(el) {
// el就是获取到的dom元素
el.focus()
},
}
hasPermi.js
export const hasPermi = {
mounted(el, binding) {
const permission = binding.value // 获取到指令绑定的值
const myPermission = ['add', 'update', 'del'] // 当前登录人的权限列表，这里模拟一下，写死了
if (!myPermission.includes(permission)) {
// 判断如果当前登录人没有这个元素绑定的权限，就把这个元素移除，所以没有权限的人就看不到这个内容了
el.parentNode && el.parentNode.removeChild(el)
}
},
}
然后在directives文件夹下再建立一个index.js，来统一导出这些文件
index.js
export * from './focus'
export * from './hasPermi'
最后在main.js里使用
import { createApp } from 'vue'
import App from './App19.vue'
import * as directives from './directives' // 把所有的directive都引入进来
const app = createApp(App)
console.log(directives)
// 利用循环把他们都添加到vue实例中
Object.keys(directives).forEach((key) => {
app.directive(key, directives[key])
})
app.mount('#app')
这样就完成了，使用时候还是一样的
还是那句话记住api不重要，重要的是我们要理解directive是干什么用的，最后用比较优雅的方式把代码组织起来。
网友评论