vue2自定义指令

本节目标

  • 快速入门
  • v-loading

快速入门

指令对比

基本语法

  1. 使用: v-指令名="指令值"
  2. 定义: 通过 directives 局部定义或者全局定义
  3. 通过事件对象 el 可以拿到指令所在元素
  4. 通过形参 binding 可以拿到指令的传值
  5. 通过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指令, 实现加载中的效果

分析

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

实现

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

  2. 开启关闭loading状态, 本质只需要添加和移除类名即可

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

    <template>
    • 我是内容{{ item }}
    </template> <script> export default { data () { return { list: [], isLoading: true, } }, async created () { setTimeout(() => { this.list = [1,2,3,4,5] // 3,关闭loading效果 this.isLoading = false }, 2000) }, directives: { // 1, 注册loading指令 loading: { inserted(el, binding) { binding.value ? el.classList.add('loading') : el.classList.remove('loading') }, 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; }

    .box {
    width: 800px;
    min-height: 500px;
    border: 3px solid orange;
    position: relative;
    }
    </style>

相关推荐
咚咚咚小柒1 分钟前
【前端】用el-popover做通用悬停气泡(可设置弹框宽度)
前端·javascript·vue.js·elementui·html·scss
Ares-Wang2 分钟前
CSS3》》 transform、transition、translate、animation 区别
前端·css·css3
fsnine15 分钟前
Python Web框架对比与模型部署
开发语言·前端·python
广州华水科技32 分钟前
单北斗GNSS形变监测系统在桥梁安全中的应用与技术解析
前端
打小就很皮...44 分钟前
ShowCountCard 功能迭代:新增周月对比属性,完善数据可视化场景
前端·react.js·信息可视化
JAVA学习通1 小时前
OJ竞赛平台----C端题目列表
java·开发语言·jvm·vue.js·elasticsearch
IT_陈寒1 小时前
Redis性能翻倍的7个冷门技巧:从P5到P8都在偷偷用的优化策略!
前端·人工智能·后端
Moonbit1 小时前
MoonBit Meetup 丨 手把手带你走进 AI 编程新世代
前端·后端·程序员
携欢1 小时前
PortSwigger靶场之 CSRF where token is not tied to user session通关秘籍
前端·csrf
执剑、天涯1 小时前
通过一个typescript的小游戏,使用单元测试实战(二)
javascript·typescript·单元测试