自定义指令

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

语法：

<input v-指令名 type="text">

• 全局注册

Vue.directive('指令名', {
  "inserted" (el) {
    // 可以对 el 标签，扩展额外功能
    el.focus()
  }
})

• 局部注册

directives: {
  // 调用指令时直接 v-指令名  (v-focus)
  "指令名": {
    // inserted 会在页面插入元素时触发  （生命周期钩子函数）
    inserted () {
      // 可以对 el 标签，扩展额外功能
      el.focus()
    }
  }
}

指令的值

需求：实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

• 语法：在绑定指令时，可以通过“等号”的形式为指令 绑定 具体的参数值

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

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

directives: {
  color: {
    inserted (el, binding) {
      el.style.color = binding.value
    },
    update (el, binding) {
      el.style.color = binding.value
    }
  }
}

v-loading指令封装

场景：实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态 => 用户体验不好

分析：

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

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

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

实现：

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

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

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

.loading:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff url("./loading.gif")
  no-repeat center;
}