vue2全局自定义指令

Vue 2 中可以通过 Vue.directive() 方法来定义全局自定义指令。下面是一个示例：

// main.js
import Vue from 'vue'
import App from './App.vue'

// 自定义指令
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

new Vue({
  render: h => h(App),
}).$mount('#app')

在上面的例子中，我们定义了一个名为 "focus" 的全局自定义指令，它会在元素被插入到 DOM 中时将焦点设置到该元素上。

使用自定义指令时，可以在模板中使用 v- 前缀来调用指令。例如，在一个组件的模板中使用 "focus" 指令：

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

这样，当组件渲染到页面上时，输入框会自动获得焦点。注意，这里的 "v-" 前缀是用来标识指令的，在使用时需要加上。

相关问题

vue2全局自定义指令实现图片懒加载

图片懒加载是指在页面滚动时，只加载当前可视区域内的图片，从而优化页面加载速度和性能。在Vue2中，我们可以通过全局自定义指令来实现图片懒加载。

首先，在Vue实例中定义一个全局指令v-lazy，用于处理图片的懒加载。代码如下：

Vue.directive('lazy', {
  inserted: function (el, binding) {
    let io = new IntersectionObserver((entries) => {
      let img = entries[0]
      if (img.isIntersecting) { // 判断图片是否进入可视区域
        el.src = binding.value // 给图片设置真实的src属性
        io.unobserve(el)
      }
    })
    io.observe(el)
  }
})

然后，在需要懒加载的图片上使用v-lazy指令，在src属性上绑定一个占位符，例如"loading.gif"。例如：

<img v-lazy="'http://example.com/image.jpg'" src="loading.gif">

在图片进入可视区域时，Intersection Observer会触发回调函数，将真实的图片路径赋值给图片的src属性，从而实现图片的懒加载。使用Intersection Observer可以更好地监听元素进入可视区域的事件，比传统的scroll事件更高效。

需要注意的是，为了实现图片懒加载，需要引入Intersection Observer的polyfill，以确保在不支持该API的浏览器上也能正常使用。

通过以上的步骤，我们就可以利用全局自定义指令v-lazy实现图片懒加载，提升页面加载速度和性能。

vue3全局自定义指令

在Vue3中，我们可以使用`app.directive`方法来注册全局自定义指令。下面是一个简单的示例：

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.directive('mydirective', {
  mounted(el, binding) {
    // 指令绑定到元素上时调用
    el.style.color = binding.value;
  },
  updated(el, binding) {
    // 元素更新时调用
    el.style.color = binding.value;
  },
  unmounted(el) {
    // 指令与元素解绑时调用
    // 清除一些工作
  }
});

app.mount('#app');

在上面的例子中，我们注册了一个名为`mydirective`的全局指令。指令对象包含了三个生命周期钩子函数：`mounted`、`updated`和`unmounted`。其中`mounted`函数在指令绑定到元素时调用，`updated`函数在元素更新时调用，`unmounted`函数在指令与元素解绑时调用。