vue 之usePop弹窗控制

2023-11-25 00:35:22

使用 Vue.js 构建一个强大的弹窗控制器

在现代 Web 开发中，弹窗已成为一种必不可少的工具，用于显示重要信息、收集用户输入或提供额外的上下文。使用 Vue.js，我们可以轻松创建交互式且高度可定制的弹窗。本文将指导您使用 Vue.js 和 usePop 库构建一个功能齐全的弹窗控制器，让您轻松管理多个弹窗、自定义外观并控制关闭行为。

创建弹窗组件

首先，让我们创建一个可重用的弹窗组件，称为 Popup.vue：

<template>
  <div class="popup" :class="{ 'popup--active': isActive }">
    <div class="popup__content">
      <slot />
    </div>
  </div>
</template>

<script>
import { usePop } from 'use-pop';

export default {
  name: 'Popup',

  props: {
    active: {
      type: Boolean,
      default: false,
    },
  },

  setup() {
    const { isActive } = usePop();

    return {
      isActive,
    };
  },
};
</script>

<style>
/* ... 自定义样式 ... */
</style>

创建弹窗控制器

接下来，我们将创建一个用于管理弹窗的控制器，称为 usePopup.js：

import { ref } from 'vue';
import { usePop } from 'use-pop';

export default function usePopup() {
  /* ... 代码实现 ... */
}

在组件中使用控制器

现在，您可以在组件中导入和使用此控制器，例如：

<template>
  <div>
    <button @click="openPopup('my-popup')">Open Popup</button>

    <Popup :active="popupController.activePopup === 'my-popup'">
      <h1>This is a popup!</h1>
    </Popup>
  </div>
</template>

<script>
import { usePopup } from '@/usePopup';

export default {
  /* ... 代码实现 ... */
};
</script>