vue3自定义指令 点击弹窗外关闭弹窗

您可以使用自定义指令来实现点击弹窗外关闭弹窗的功能。

首先，在 Vue 组件中定义自定义指令：

directives: {
  closeOnClickOutside: {
    bind(el, binding, vnode) {
      // 获取指令的值，即要关闭的弹窗元素
      const dialog = document.querySelector(binding.value)
      // 在点击事件中关闭弹窗
      el.addEventListener('click', e => {
        // 如果点击的是弹窗本身或者弹窗内的元素，则不关闭弹窗
        if (el === dialog || el.contains(dialog)) return
        // 否则关闭弹窗
        dialog.style.display = 'none'
      })
    }
  }
}

然后，在要绑定点击弹窗外关闭弹窗功能的元素上使用自定义指令，并指定要关闭的弹窗元素的选择器：

<template>
  <div v-close-on-click-outside="#my-dialog">
    点击此处关闭弹窗
  </div>
</template>

这样，当用户点击了页面上的其他区域时，就会触发自定义指令绑定的点击事件，从而关闭弹窗。

注意：自定义指令在 Vue 3 中的使用方式与 Vue 2 中略有不同，请确保使用了正确的写法。

相关问题

vue3 点击弹窗外关闭当前弹窗

你可以在Vue3中使用事件修饰符来关闭弹窗。具体来说，你需要在文档对象上监听“点击”事件，以及在弹窗的容器上监听“点击”事件，并在容器中添加stop事件修饰符，以防止事件冒泡到文档对象。在容器上的“点击”事件中，你可以使用v-model来切换弹窗的显示状态。例如，你的代码可以如下所示：

<template>
  <div>
    <button @click="showPopup = true">显示弹窗</button>
    <div v-if="showPopup" class="popup-container" @click.stop="showPopup = false">
      <div class="popup">
        <!-- 内容 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
    };
  },
};
</script>

<style>
.popup-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
}
</style>

在这个例子中，当用户点击“显示弹窗”按钮时，弹窗的显示状态将变为true，并且在容器上添加一个类名为“popup-container”的元素。这个元素使用fixed定位，并填充整个窗口。弹窗通过绝对定位并使用transform属性使其在窗口中心正中间。同时，在容器上监听点击事件，并使用.stop事件修饰符以防止事件冒泡到文档对象中，从而在弹窗的外部单击时隐藏弹窗。

vue3自定义指令封装

Vue 3中的自定义指令封装是一种扩展Vue的能力，允许开发者在DOM元素上添加自定义行为。下面是Vue 3中自定义指令封装的步骤：

1. 创建自定义指令：使用`app.directive`方法来创建自定义指令。该方法接受两个参数，第一个参数是指令名称，第二个参数是一个对象，包含了指令的各种钩子函数和配置选项。

2. 钩子函数：自定义指令可以通过钩子函数来定义其行为。常用的钩子函数有：
- `beforeMount`：在指令绑定的元素挂载到DOM之前调用。
- `mounted`：在指令绑定的元素挂载到DOM之后调用。
- `beforeUpdate`：在指令所在组件更新之前调用。
- `updated`：在指令所在组件更新之后调用。
- `beforeUnmount`：在指令所在组件卸载之前调用。
- `unmounted`：在指令所在组件卸载之后调用。

3. 配置选项：除了钩子函数外，还可以通过配置选项来定义自定义指令的行为。常用的配置选项有：
- `bind`：在指令绑定到元素时立即调用，只调用一次。
- `update`：在指令所在组件的VNode更新时调用，可能会调用多次。
- `unbind`：在指令从元素上解绑时调用，只调用一次。

下面是一个示例，演示了如何在Vue 3中封装一个自定义指令：

// 创建Vue实例
const app = Vue.createApp({});

// 创建自定义指令
app.directive('my-directive', {
  beforeMount(el, binding, vnode) {
    // 指令绑定到元素之前的操作
  },
  mounted(el, binding, vnode) {
    // 指令绑定到元素之后的操作
  },
  beforeUpdate(el, binding, vnode) {
    // 指令所在组件更新之前的操作
  },
  updated(el, binding, vnode) {
    // 指令所在组件更新之后的操作
  },
  beforeUnmount(el, binding, vnode) {
    // 指令所在组件卸载之前的操作
  },
  unmounted(el, binding, vnode) {
    // 指令所在组件卸载之后的操作
  }
});

// 将Vue实例挂载到DOM元素上
app.mount('#app');