🍀简简单单结合 hooks 优雅使用弹窗🚀🚀

业务弹窗

js 复制代码
<template>
  <t-dialog v-model:visible="visible" :on-confirm="onConfirm" :on-close="onClose">
    <template #body>
      <!-- 添加业务逻辑  -->
    </template>
  </t-dialog>
</template>
<script setup lang="ts">
import { defineExpose, ref, defineProps } from 'vue';

interface DialogData {}; // 根据实际情况定义数据类型

interface Props {
  confirm?: Function;
  cancel?: Function;
  // 可以根据实际情况在配置其他参数
};

const props = defineProps<Props>();

const visible = ref(false);
const dialogData = ref<DialogData>();

const open = (data: DialogData) => {
  // 外层传递进来的参数
  dialogData.value = data;

  // TODO 处理弹窗打开前的业务逻辑

  visible.value = true;
}

// 确定
const onConfirm = () => {
  // TODO 处理弹窗关闭前的业务逻辑

  if (typeof props.confirm === 'function') {
    props.confirm({
      // 可以将数据传递给到外层
    });
  }

  visible.value = false;
}

// 取消
const onClose = () => {
  // TODO 处理弹窗里面的业务逻辑

  if (typeof props.cancel === 'function') {
    props.cancel({
      // 可以将数据传递给到外层
    });
  }

  visible.value = false;
}

defineExpose({
  open // 必须把 open 抛出
});

</script>

关键点

  • 弹窗组件需要抛出 open 方法。上层 Hooks 会通过 open 将数据传入到弹窗组件中。
  • 弹窗组件内部可以根据实际业务要求,定义 confirmcancel,将数据传到上层。

Hooks 统一处理弹窗

js 复制代码
import { h, render } from 'vue';

// 将弹窗导入
import EditDialog from '@/components/dialog/editDialog.vue';

interface Props {
  [key: string]: any;
  confirm?: Function;
  cancel?: Function;
}

// 渲染弹窗
export function createComponent(singleFileComponent: any, props?: any) {
  let container: HTMLDivElement = null;
  if (!container) {
    container = document.createElement('div');
    container.id = uuidv4();
  }
  const instance = h(singleFileComponent, props);
  render(instance, container);
  document.body.appendChild(container);
  const { exposed } = instance.component;
  return exposed;
}


// 将数据传入到弹窗中
const createDialog = (singleFileComponent: any) => {
  return (data? any; props?: Props) => {
    // 将上层传递的参数(props)传入,并返回业务弹窗组件实例
    const exposed = createComponent(singleFileComponent, props);
    // 调用 open
    exposed.open(data);
  }
}

// 初始化弹窗
const initEditDialog = createDialog(EditDialog);

export const useDialog = () => {
  return {
    initEditDialog
  }
}

使用弹窗

js 复制代码
<template>
  <div>
    <t-button @click="showDialog">显示弹窗</t-button>
  </div>
</template>
<script setup lang="ts">
import { useDialog } from '@/hooks/useDialog';

const { initEditDialog } = useDialog();

const showDialog = () => {
  initEditDialog({
    key1: '外层向弹窗传递的参数'
  }, {
    confirm: (data: any) => {
      console.log('弹窗向外层传递的参数')
    }
  })
}
</script>
相关推荐
namekong82 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天3 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄6 小时前
HTML 表单控件
前端·microsoft·html
学习笔记1017 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19437 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧7 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台7 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪1007 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc8 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
吃饺子不吃馅9 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学