vue2自定义指令

二十雨辰2024-06-10 16:06

本节目标

快速入门
v-loading

快速入门

指令对比

基本语法

使用: v-指令名="指令值"
定义: 通过 directives 局部定义或者全局定义
通过事件对象 el 可以拿到指令所在元素
通过形参 binding 可以拿到指令的传值
通过update钩子, 可以监听指令值的变化,进行更新操作

局部注册

复制代码

<template>
  <div id="app">
    <input v-focus type="text" />
  </div>
</template>

<script>
export default {
  // 局部注册自定义指令
  directives: {
    focus: {
      // 指定的生命周期: 指令所在的元素, 挂载完毕后触发
      inserted(el) {
        // el就是指令绑定的元素
        el.focus();
      },
    },
  },
};
</script>

全局注册

复制代码

... ...

Vue.directive('focus', {
  // 指定所在的元素被加载后执行
  inserted: function (el) {
    // el就是所绑定的元素
    el.focus()
  }
})
  
... ...

指令传值

复制代码

<template>
  <div id="app">
    <h2 v-color="color1">我是一个标题</h2>
    <h2 v-color="color2">我是一个标题</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color1: "red",
      color2: "blue",
    }
  },
  // 局部注册自定义指令
  directives: {   
    color: {
      inserted(el, binding) {
        el.style.color = binding.value;
      },
      // 指令的值(binding)修改时触发
      update(el,binding) {
        el.style.color = binding.value;
      }
    }
  },
};
</script>

v-loading

封装一个v-loading指令, 实现加载中的效果

分析

本质loading效果就是一个蒙层, 盖在盒子上
数据请求时, 开启loading状态, 添加蒙层
数据请求完毕, 关闭loading状态, 移除蒙层

实现

准备一个loading类, 通过伪元素定位, 设置宽高, 实现蒙层
开启关闭loading状态, 本质只需要添加和移除类名即可
结合自定义指令的语法进行封装复用