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-指令名=“指令值”，绑定指令的值

我是内容

通过 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) {
        // 指令触发后执行当前钩子  inserted
        binding.value ? el.classList.add('loading') : el.classList.remove('loading')
      },
      update (el,binding) {
        // 指令值被修改执行当前钩子 update
        binding.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-for
      this.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>