Vue自定义指令- v-loading封装

Vue自定义指令- v-loading封装

01-自定义指令

---

什么是自定义指令？

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

1、例如：完成自动聚焦的功能：

自定义指令的两种注册语法：

• 全局注册-语法：

// 全局注册指令
Vue.directive('focus',{// inserted会在 指令所在的元素，被插入到页面中的时候触发inserted (el) {// el 就是我们指令所绑定的元素el.focus()}
})

• 局部注册-语法：

  // 2.局部注册指令directives: {// 指令名：指令配置项focus: {// el 是我么指令所绑定的元素inserted (el) {el.focus()}}}

根据使用场景：选择不同的注册方式。

---

02自定义指令的值

2、例如：实现一个color指令 - 传入不同的颜色，给标签设置文字颜色

语法：

我们再绑定指令的时候，可以通过 等号 给我们指令绑定具体的参数。

v-指令名=“指令值”，绑定指令的值

<div v-color="color">我是内容</div>

通过 binding.value可以可以拿到指令值，指令值修改会 触发 update 函数

binding.value可以拿到color的值，当我们指令被修改后，会执行update函数

  <div class="app"><h1 v-color="color1">指令的值1</h1><h1 v-color="color2">指令的值2</h1></div><script>
export default {data () {return {color1: 'red',color2: 'green'}},// 注册自定义指令directives: {color: {// 1、inserted 元素被添加到页面时的逻辑inserted (el,binding) {// binding.value 就是指令的值el.style.color = binding.value},// 2、update 指令的值修改的时候触发，提供dom更新后的逻辑update (el, binding) {el.style.color = binding.value}}}
}
</script>

---

03-自定义指令- v-loading指令封装

---

分析 v-loading指令封装

1. 本质 loading 效果就是一个蒙层，盖在了盒子上
2. 数据请求中，开启loading状态，添加蒙层
3. 数据请求完毕后，关闭loading装状态，移除蒙层。

---

实现：

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

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

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

   ---

  <div class="box" v-loading="isLoading"><script>
// 安装axios =>  yarn add axios
import axios from 'axios'// 接口地址：http://hmajax.itheima.net/api/news
// 请求方式：get
export default {data () {return {list: [],isLoading: true}},// 定义局部指令directives: {loading: {inserted (el,binding) {// 指令触发后执行当前钩子  insertedbinding.value ? el.classList.add('loading') : el.classList.remove('loading')},update (el,binding) {// 指令值被修改执行当前钩子 updatebinding.value ? el.classList.add('loading') : el.classList.remove('loading')}}},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)}
}
</script><style>
.loading:before {content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff url('./loading.gif') no-repeat center;
}
</style>