第二十八章 Vue之自定义指令

一、引言

二、自定义指令的注册和使用方式

2.1. 自定义指令-全局注册使用

2.2. 自定义指令-局部注册使用

三、自定义指令完整代码

3.1. 自定义指令全局注册/使用

3.1.1. main.js

3.1.2. App.vue

3.2. 自定义指令局部注册/使用

3.2.1. main.js

3.2.2. App.vue

四、自定义指令的指令值

文章中的动态加载效果图片夸克网盘地址：

链接：https://pan.quark.cn/s/d150042ddc5a

一、引言

需求: 当页面加载时，让元素将获得焦点

方式一：autofocus，在safari浏览器存在兼容性问题。

方式二：操作dom：dom元素.focus()。即在页面dom元素挂载渲染完成后通过ref和$refs获取焦点，这种方式还是不够便捷。

方式三：自定义指令，即本章节的主题，自己定义指令,封装输入框获取焦点的操作。

自己定义的指令作用：可以封装一些 dom 操作，扩展额外功能。

二、自定义指令的注册和使用方式

2.1. 自定义指令-全局注册使用

全局注册

使用自定义指令

2.2. 自定义指令-局部注册使用

局部注册

使用自定义指令

三、自定义指令完整代码

3.1. 自定义指令全局注册/使用

3.1.1. main.js

import Vue from 'vue'
import App from './App.vue'
// 消息提示的环境配置，设置为开发环境或者生产环境，生产环境一般设置不提示常见错误和陷阱
Vue.config.productionTip = false// 全局注册指令
Vue.directive('focus', {// inserted 会在指令所在的元素，被插入到页面中时触发inserted (el) {// el 就是指令所绑定的元素el.focus()}
})new Vue({render: h => h(App),
}).$mount('#app')

3.1.2. App.vue

<template><div><h1>自定义指令</h1><input v-focus type="text"></div>
</template><script>
export default {// mounted () {//   this.$refs.inp.focus()// }
}
</script><style></style>

3.2. 自定义指令局部注册/使用

3.2.1. main.js

import Vue from 'vue'
import App from './App.vue'
// 消息提示的环境配置，设置为开发环境或者生产环境，生产环境一般设置不提示常见错误和陷阱
Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

3.2.2. App.vue

<template><div><h1>自定义指令</h1><input v-focus type="text"></div>
</template><script>
export default {// 局部注册指令directives: {focus: {// inserted 会在指令所在的元素，被插入到页面中时触发inserted (el) {// el 就是指令所绑定的元素el.focus()}}}
}
</script><style></style>

四、自定义指令的指令值

我们在自定义指定时，可以在绑定指令的同时，为指令绑定（设定）具体的参数值。通过binding.value可以拿到指令值，

inserted：会在指令所在的元素，被插入到页面中时触发。

update：会在指令值修改时触发。

核心代码

<template><div><h1 v-color="color1">指令的值1测试</h1><h1 v-color="color2">指令的值2测试</h1></div>
</template><script>
export default {data () {return {color1: 'red',color2: 'green'}},// 局部注册指令directives: {color: {// inserted 会在指令所在的元素，被插入到页面中时触发inserted (el, binding) {// el 就是指令所绑定的元素el.style.color = binding.value},// update 指令的值修改变化时触发，更新domupdate (el, binding) {el.style.color = binding.value}}}
}
</script><style></style>

五、自定义v-loading加载中指令

实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态影响用户体验不好，这时候我们可以封装一个v-loading指令，实现加载中的效果。

5.1. loading实现

实现原理：

1. loading效果效果本质就是一个蒙层，盖在了盒子上

2. 数据请求中，开启loading状态，添加蒙层

3. 数据请求完毕，关闭loading状态，移除蒙层

实现步骤：

1. 准备一个 loading 类，通过伪元素定位，设置宽高，实现蒙层

2. 开启关闭 loading 状态（添加移除蒙层），本质只需要添加移除类即可

3. 结合自定义指令的语法进行封装复用

5.2. 完整代码

5.2.1. main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

5.2.2. App.vue

<template><div class="main"><!-- 通过自定义v-loading加载指令 动态添加/移除 加载效果的样式 来实现加载效果 --><div class="box" v-loading="isLoading"><ul><li v-for="item in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div><!-- 封装了v-loading加载指令后，我们可以任意的添加多个加载效果层 --><!-- <div class="box2" v-loading="isLoading2"></div> --></div>
</template><script>
// 安装axios =>  yarn add axios
import axios from 'axios'// 我本地部署的后端接口，大家可以在本地自己简单搞个SpringBoot服务
// 接口地址：http://localhost/api/news
// 请求方式：get
export default {data () {return {list: [],// 加载是否开启的开关isLoading: true,isLoading2: true}},async created () {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')setTimeout(() => {// 2. 更新到 list 中，用于页面渲染 v-forthis.list = res.data.data// 后端接口请求数据返回后则关闭加载效果this.isLoading = false}, 2000)},// 局部注册自定义的加载插件directives: {loading: {// inserted 会在指令所在的元素，被插入到页面中时触发（isLoading初始值我们设置成true开启加载效果）inserted (el, binding) {binding.value ? el.classList.add('loading') : el.classList.remove('loading')},// update 指令的值修改变化时触发，更新dom。即后端接口请求成功返回数据后，关闭加载效果（更改isLoading为false时触发）update (el, binding) {binding.value ? el.classList.add('loading') : el.classList.remove('loading')}}}
}
</script><style>
.loading:before {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff url('./loading.gif') no-repeat center;
}.box2 {width: 400px;height: 400px;border: 2px solid #000;position: relative;
}.box {width: 800px;min-height: 500px;border: 3px solid orange;border-radius: 5px;position: relative;
}
.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;
}
.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;
}
.news .left .title {font-size: 20px;
}
.news .left .info {color: #999999;
}
.news .left .info span {margin-right: 20px;
}
.news .right {width: 160px;height: 120px;
}
.news .right img {width: 100%;height: 100%;object-fit: cover;
}
</style>