vue3.2自定义弹窗组件结合函数式调用示例详解

下面我来详细讲解“vue3.2自定义弹窗组件结合函数式调用示例详解”的完整攻略。

1. 简介

在Vue3.2中，我们可以通过自定义弹窗组件来方便地实现页面弹窗的功能，并且通过函数式调用的方式来减少对全局状态的依赖。

2. 自定义弹窗组件

首先，我们需要创建一个自定义的弹窗组件。可以使用Vue3的defineComponent函数来定义组件，代码如下：

import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MyDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    content: {
      type: String,
      default: '',
    },
    confirmText: {
      type: String,
      default: '确认',
    },
    cancelText: {
      type: String,
      default: '取消',
    },
    onConfirm: {
      type: Function,
      default: () => {},
    },
    onCancel: {
      type: Function,
      default: () => {},
    },
  },
  setup(props, { emit }) {
    const dialogVisible = ref(false);

    const handleConfirm = () => {
      emit('confirm');
      dialogVisible.value = false;
    };

    const handleCancel = () => {
      emit('cancel');
      dialogVisible.value = false;
    };

    const handleShowDialog = () => {
      dialogVisible.value = true;
    };

    return {
      dialogVisible,
      handleConfirm,
      handleCancel,
      handleShowDialog,
    };
  },
  render() {
    return (
      <div>
        <teleport to="body">
          <div class={['dialog-mask', { 'is-visible': this.dialogVisible }]}></div>
          <div class={['dialog', { 'is-visible': this.dialogVisible }]}>
            <div class="dialog-header">{this.title}</div>
            <div class="dialog-content">{this.content}</div>
            <div class="dialog-footer">
              <button class="btn-cancel" onClick={this.handleCancel}>
                {this.cancelText}
              </button>
              <button class="btn-confirm" onClick={this.handleConfirm}>
                {[this.confirmText]}
              </button>
            </div>
          </div>
        </teleport>
      </div>
    );
  },
});

在组件的setup函数中定义了一些状态和方法，包括弹窗的可见状态、确认和取消方法等。在render函数中，我们使用teleport组件将弹窗的内容渲染到body标签中，然后根据弹窗状态的值来动态设置弹窗的可见性。

3. 函数式调用

在使用自定义的弹窗组件时，我们可以通过函数式调用的方式来创建弹窗实例，而不需要依赖全局状态。

我们可以创建一个名为useDialog的hook，代码如下：

import { defineComponent, h, Teleport } from 'vue';
import MyDialog from './MyDialog';

export default function useDialog() {
  let vnode = null;

  function openDialog({ title, content, onConfirm, onCancel }) {
    const div = document.createElement('div');
    document.body.appendChild(div);

    const handleClose = () => {
      vnode.component.proxy.$destroy();
      vnode.el.parentNode.removeChild(vnode.el);
      vnode = null;
      onCancel && onCancel();
    };

    const handleConfirm = () => {
      vnode.component.proxy.$destroy();
      vnode.el.parentNode.removeChild(vnode.el);
      vnode = null;
      onConfirm && onConfirm();
    };

    const props = { title, content, onConfirm: handleConfirm, onCancel: handleClose };
    const dialog = h(MyDialog, { ...props, visible: true });

    vnode = h(Teleport, { to: 'body' }, dialog);
    vnode.component.render();
    vnode.el = vnode.component.subTree.el;
    div.appendChild(vnode.el);
  }

  return { openDialog };
}

useDialog函数会返回一个包含openDialog方法的对象，该方法可以传入弹窗的一些参数，并且在调用时创建弹窗实例并渲染到页面中。在函数内部，我们创建一个新的div元素，并且创建弹窗的确认和取消方法，同时将这些方法作为参数传递给自定义弹窗组件。最后，使用Teleport组件将弹窗渲染到body标签中。

4. 示例说明

以下是一个简单示例。我们可以在父组件中导入useDialog hook，并且可以通过按钮来打开弹窗。

<template>
  <button @click="handleClick">打开弹窗</button>
</template>

<script>
import { defineComponent } from 'vue';
import useDialog from './useDialog';

export default defineComponent({
  setup() {
    const { openDialog } = useDialog();

    const handleClick = () => {
      openDialog({
        title: '提示',
        content: '你确定要执行这个操作吗？',
        onConfirm: () => {
          alert('确认');
        },
        onCancel: () => {
          alert('取消');
        },
      });
    };

    return {
      handleClick,
    };
  },
});
</script>

以上是一个简单的使用自定义弹窗组件和函数式调用的示例，希望可以对你有所帮助。