带有组件的 Vue.js 自定义指令

介绍

Vue.js 是一个渐进式框架，因为他的核心库只关注视图层，因此需要通过插件或者自定义指令来完成一些复杂功能。

自定义指令是一个用于注册全局或局部指令的函数。指令函数接收两个参数：第一个参数是指令绑定的元素(element)，第二个参数是包含指令信息的对象(binding)。

在Vue.js中，自定义指令有很多种用途，如权限控制、页面样式控制、防抖等等。

在本文中，我们将讲解如何创建带有组件的Vue.js自定义指令。

目标

我们将创建一个popup组件，并创建一个自定义指令来触发这个组件，实现弹窗的效果。

创建popup组件

我们先来创建一个popup组件，并注册到Vue实例中：

<template>
  <div class="popup" v-if="show">
    <div class="popup-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "Popup",
  props: {
    show: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style scoped>
.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: #fff;
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
</style>

这个popup组件非常简单，只有一个基本的结构和一个布尔类型的show属性，用于控制弹窗的展示和关闭。

创建自定义指令

我们先来了解一下自定义指令的基本结构：

Vue.directive('directive-name', {
  bind: function (el, binding, vnode) {
    // 指令绑定时的处理逻辑
  },
  inserted: function (el, binding, vnode) {
    // 指令插入到DOM节点后的处理逻辑
  },
  update: function (el, binding, vnode, oldVnode) {
    // 指令更新时的处理逻辑
  },
  componentUpdated: function (el, binding, vnode, oldVnode) {
    // 组件更新完成后的处理逻辑
  },
  unbind: function (el, binding, vnode) {
    // 指令解绑时的处理逻辑
  }
})

然后我们来创建一个叫做popup的自定义指令，并在inserted中弹出popup组件：

import Vue from 'vue'
import Popup from '@/components/Popup'

Vue.directive('popup', {
  inserted: function (el, binding) {
    const show = binding.value
    const popup = new Vue({
      render: h => h(Popup, { props: { show }})
    }).$mount()
    el.appendChild(popup.$el)
    el.popup = popup
  },
  unbind: function (el, binding) {
    el.popup.$destroy()
    el.removeChild(el.popup.$el)
    el.popup = null
  }
})

• 在inserted函数中，我们用传入的binding.value来控制popup组件的show属性。
• 然后我们通过new Vue创建一个Popup实例，并通过$mount函数来挂载，同时将组件的根节点($el)添加为el元素的子元素。
• 最后将实例赋值给el.popup，这样就可以在unbind中销毁实例了。
• 在unbind中，我们逐个清除已经创建的popup实例。

使用自定义指令

最后，我们来看一下如何使用自定义指令。

我们需要在需要显示popup的元素上添加popup指令，将要显示的内容放到元素内部，通过指令的参数来控制popup组件的显示和隐藏。

<div class="container" v-popup="showPopup">
  <button @click="showPopup = true">弹窗</button>
  <template>
    <p>这是弹窗的内容</p>
  </template>
</div>

在vue实例中添加showPopup变量和handlePopup函数处理组件的显示和隐藏。

export default {
  name: 'App',
  data () {
    return {
      showPopup: false
    }
  },
  methods: {
    handlePopup (show) {
      this.showPopup = show
    }
  }
}

通过这种方式我们就可以创建出一个具有弹窗效果的组件了。

总结

本文主要介绍了带有组件的Vue.js自定义指令的创建过程，以一个具有实用性的popup组件为实例，通过创建自定义指令来实现弹窗的展示和关闭。

实际开发中，我们可以根据自己的需求来扩展自定义指令的功能，如表单验证、图片懒加载等。