首页 > 其他分享 >ssts-hospital-web-master项目实战记录二十六：项目迁移-Hook函数（useDialog.ts）

ssts-hospital-web-master项目实战记录二十六：项目迁移-Hook函数（useDialog.ts）

时间：2024-02-27 09:58:36浏览次数：23  
标签：web const ssts hospital dialogState value 弹框 组件 message

记录时间：2024-02-27

【使用“文心一言”搜索】指令：Vue项目使用ts setup 语法，实现页面遮幕弹框，封装Hook函数，包含ShowAlert、ShowConfirm、ShowPrompt、ShowMsg、ShowError、HideMsg、PageLoading、PageLoaded、MenuUnableUse

 

在 Vue 3 项目中，结合 Composition API 和 TypeScript，我们可以封装一系列自定义的 Hook 函数来实现页面遮幕弹框、页面加载状态以及菜单使用状态的管理。

下面我会给你展示如何封装 useDialog.ts Hook 来实现 ShowAlert、ShowConfirm、ShowPrompt、ShowMsg、ShowError、HideMsg 这些功能，以及 usePageStatus.ts 来实现 PageLoading、PageLoaded 和 MenuUnableUse。

首先，我们需要创建 useDialog.ts 文件来封装与弹框相关的逻辑：

typescript复制代码
  import { ref } from 'vue';
   
  interface DialogState {
  isVisible: boolean;
  title: string;
  message: string;
  type: 'alert' | 'confirm' | 'prompt' | 'msg' | 'error';
  resolve?: (value?: string | boolean) => void;
  reject?: () => void;
  }
   
  export function useDialog() {
  const dialogState = ref<DialogState>({
  isVisible: false,
  title: '',
  message: '',
  type: 'msg',
  resolve: undefined,
  reject: undefined,
  });
   
  const showDialog = (options: Partial<DialogState>) => {
  dialogState.value = {
  ...dialogState.value,
  isVisible: true,
  ...options,
  };
  };
   
  const hideDialog = () => {
  dialogState.value.isVisible = false;
  };
   
  const showAlert = (message: string, title = 'Alert') => {
  showDialog({ type: 'alert', title, message });
  };
   
  const showConfirm = (message: string, title = 'Confirm') => {
  return new Promise<boolean>((resolve, reject) => {
  showDialog({
  type: 'confirm',
  title,
  message,
  resolve,
  reject,
  });
  });
  };
   
  // 类似的，你可以添加 showPrompt, showMsg, showError 方法
  // ...
   
  const hideMsg = () => {
  if (dialogState.value.type === 'msg' || dialogState.value.type === 'error') {
  hideDialog();
  }
  };
   
  return {
  dialogState,
  showAlert,
  showConfirm,
  // showPrompt,
  // showMsg,
  // showError,
  hideMsg,
  };
  }

接下来，创建 usePageStatus.ts 来封装页面状态和菜单状态：

typescript复制代码
  import { ref } from 'vue';
   
  export function usePageStatus() {
  const isLoading = ref(false);
  const isPageLoaded = ref(false);
  const isMenuDisabled = ref(false);
   
  const pageLoading = () => {
  isLoading.value = true;
  isPageLoaded.value = false;
  };
   
  const pageLoaded = () => {
  isLoading.value = false;
  isPageLoaded.value = true;
  };
   
  const menuUnableUse = () => {
  isMenuDisabled.value = true;
  };
   
  const menuAbleUse = () => {
  isMenuDisabled.value = false;
  };
   
  return {
  isLoading,
  isPageLoaded,
  isMenuDisabled,
  pageLoading,
  pageLoaded,
  menuUnableUse,
  menuAbleUse,
  };
  }

在 Vue 组件中使用这些自定义 Hook：

vue复制代码
  <template>
  <div>
  <!-- 遮罩层、弹框等组件可以根据 dialogState 来渲染 -->
  <!-- 页面加载状态可以根据 isLoading 来展示 -->
  <!-- 菜单使用状态可以根据 isMenuDisabled 来禁用或启用 -->
  </div>
  </template>
   
  <script lang="ts" setup>
  import { useDialog, usePageStatus } from '@/hooks'; // 假设你的 hooks 文件夹在项目的 src 目录下
   
  const {
  showAlert,
  showConfirm,
  // ...其他方法
  hideMsg,
  } = useDialog();
   
  const {
  isLoading,
  pageLoading,
  pageLoaded,
  menuUnableUse,
  // ...其他方法
  } = usePageStatus();
   
  // 示例：在某个操作开始时调用 pageLoading
  // 示例：在某个操作结束时调用 pageLoaded
  // 示例：在需要禁用菜单时调用 menuUnableUse
   
  // 你可以在这里调用 showAlert 或 showConfirm 来测试弹框功能
  </script>

请确保你已经在项目中安装了 Vue 3 和 TypeScript，并且配置了相应的 Vue 3 Composition API 和 TypeScript 支持。以上代码提供了一个大致的框架，具体的弹框 UI 组件、样式以及事件处理逻辑需要根据你的项目需求来实现。

 

 指令：接以上，Vue 组件中使用这些自定义 Hook，具体示例

在 Vue 组件中使用这些自定义 Hook 的具体示例中，我们需要先定义一些 UI 元素来响应这些状态，如弹框、加载指示器等。以下是一个简单的示例，展示了如何在组件中使用 useDialog 和 usePageStatus Hook。

首先，我们创建一个简单的弹框组件 Dialog.vue：

vue复制代码
  <template>
  <div v-if="dialogState.isVisible" class="dialog-overlay">
  <div class="dialog">
  <h2>{{ dialogState.title }}</h2>
  <p>{{ dialogState.message }}</p>
  <button @click="handleConfirm" v-if="dialogState.type === 'confirm'">Confirm</button>
  <button @click="handleCancel" v-if="dialogState.type === 'confirm'">Cancel</button>
  <button @click="handleClose" v-if="dialogState.type !== 'confirm'">Close</button>
  </div>
  </div>
  </template>
   
  <script lang="ts" setup>
  import { ref, watch } from 'vue';
   
  const props = defineProps<{
  dialogState: {
  isVisible: boolean;
  title: string;
  message: string;
  type: string;
  resolve?: (value?: any) => void;
  reject?: () => void;
  };
  }>();
   
  const handleConfirm = () => {
  if (props.dialogState.resolve) {
  props.dialogState.resolve(true);
  }
  props.dialogState.isVisible = false;
  };
   
  const handleCancel = () => {
  if (props.dialogState.reject) {
  props.dialogState.reject();
  }
  props.dialogState.isVisible = false;
  };
   
  const handleClose = () => {
  props.dialogState.isVisible = false;
  };
   
  watch(() => props.dialogState.isVisible, (newValue) => {
  if (!newValue) {
  // Reset the dialog state when it's closed
  props.dialogState.resolve = undefined;
  props.dialogState.reject = undefined;
  }
  });
  </script>
   
  <style>
  .dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
   
  display: flex;
  justify-content: center;
  align-items: center;
  }
   
  .dialog {
   
  padding: 20px;
  border-radius: 5px;
  }
  </style>

然后，我们在主组件中使用这个 Dialog 组件以及自定义的 Hook：

vue复制代码
  <template>
  <div>
  <button @click="showAlertMessage">Show Alert</button>
  <button @click="confirmAction">Confirm Action</button>
  <!-- ...其他按钮和操作 -->
   
  <Dialog :dialogState="dialogState" />
   
  <div v-if="isLoading" class="loading-spinner">Loading...</div>
  </div>
  </template>
   
  <script lang="ts" setup>
  import { useDialog, usePageStatus } from '@/hooks';
  import Dialog from './Dialog.vue';
   
  const { dialogState, showAlert, showConfirm } = useDialog();
  const { isLoading, pageLoading, pageLoaded } = usePageStatus();
   
  const showAlertMessage = () => {
  showAlert('This is an alert message!');
  };
   
  const confirmAction = async () => {
  pageLoading(); // 开始加载状态
  try {
  const result = await showConfirm('Are you sure you want to perform this action?');
  if (result) {
  // 用户点击了确认按钮
  pageLoaded(); // 结束加载状态
  // 执行确认后的操作...
  }
  } catch {
  // 用户点击了取消按钮或者关闭了弹框
  pageLoaded(); // 结束加载状态
  // 执行取消后的操作...
  }
  };
  </script>
   
  <style>
  .loading-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 添加加载指示器的样式 */
  }
  </style>

在这个示例中，我们创建了一个 Dialog 组件，它接收 dialogState 作为属性，并根据其状态来显示不同类型的弹框。在主组件中，我们导入了 useDialog 和 usePageStatus Hook，并使用它们来控制弹框的显示和页面的加载状态。通过调用 showAlert 和 showConfirm 方法，我们可以在用户交互时显示不同的弹框。同时，我们使用 isLoading 来控制加载指示器的显示。

 

指令：接以上，进一步封装成Vue插件，组件中动态调用弹框

要将自定义的弹框封装成 Vue 插件并在组件中动态调用，我们需要执行几个步骤：

  1. 创建一个插件文件，比如 DialogPlugin.js。
  2. 在插件文件中定义全局方法或属性，用于显示不同类型的弹框。
  3. 使用 app.use() 方法将插件注册到 Vue 应用中。
  4. 在组件中通过全局方法动态调用弹框。

首先，我们创建 DialogPlugin.js 文件，并定义插件：

javascript复制代码
  // DialogPlugin.js
  import DialogComponent from './Dialog.vue';
   
  const DialogPlugin = {
  install(app, options) {
  // 注册全局组件
  app.component('DialogComponent', DialogComponent);
   
  // 在原型上定义方法，以便在组件中通过 this.$dialog 访问
  app.config.globalProperties.$dialog = {
  showAlert(message) {
  // 这里需要实现显示警告弹框的逻辑
  // 可以使用事件总线、Vuex 或其他状态管理方案来触发弹框的显示
  console.log('Show alert:', message);
  // 实际实现中，这里会触发一个事件或更改全局状态来打开弹框
  },
  showConfirm(message) {
  // 这里需要实现显示确认弹框的逻辑，并返回一个 Promise
  return new Promise((resolve, reject) => {
  console.log('Show confirm:', message);
  // 实际实现中，这里会触发一个事件或更改全局状态来打开弹框，并在用户选择后调用 resolve 或 reject
  // 这里只是模拟用户点击确认
  setTimeout(() => resolve(true), 1000);
  });
  },
  };
  },
  };
   
  export default DialogPlugin;

注意：上面的 showAlert 和 showConfirm 方法目前只是打印消息到控制台，并没有真正触发弹框的显示。在实际应用中，你需要使用事件总线、Vuex 或其他状态管理方案来触发弹框组件的状态变更。

然后，在你的主应用文件（比如 main.js 或 main.ts）中注册这个插件：

javascript复制代码
  // main.js
  import { createApp } from 'vue';
  import App from './App.vue';
  import DialogPlugin from './DialogPlugin';
   
  const app = createApp(App);
   
  // 注册 Dialog 插件
  app.use(DialogPlugin);
   
  app.mount('#app');

现在，你可以在任何组件中通过 this.$dialog 访问弹框方法：

vue复制代码
  <template>
  <div>
  <button @click="showAlertMessage">Show Alert</button>
  <button @click="confirmAction">Confirm Action</button>
  </div>
  </template>
   
  <script>
  export default {
  methods: {
  showAlertMessage() {
  this.$dialog.showAlert('This is an alert message!');
  },
  async confirmAction() {
  try {
  const result = await this.$dialog.showConfirm('Are you sure you want to perform this action?');
  if (result) {
  // 用户点击了确认按钮
  console.log('User confirmed the action');
  }
  } catch (error) {
  // 用户点击了取消按钮或者关闭了弹框
  console.log('User canceled the action');
  }
  },
  },
  };
  </script>

请注意，上面的 DialogPlugin.js 文件中的 showAlert 和 showConfirm 方法并没有真正实现弹框的显示逻辑。你需要根据你的应用架构来实现这部分逻辑。例如，你可以使用 Vuex 来管理弹框的状态，或者使用事件总线来在组件之间通信。当这些方法被调用时，你可以更改全局状态或触发事件来通知弹框组件显示或隐藏。

 

翻译

搜索

复制

<iframe height="240" width="320"></iframe>

标签：web,const,ssts,hospital,dialogState,value,弹框,组件,message
From： https://www.cnblogs.com/lizhigang/p/18036220

相关文章

  • ssts-hospital-web-master项目实战记录二十四：项目迁移-Hook函数（useCountdown）
    记录时间：2024-02-26 【使用“文心一言”搜索】指令：Vue项目使用tssetup语法，实现页面倒计时，封装Hook函数，包含start、reset、stop在Vue3中，你可以使用<scriptsetup>语法和CompositionAPI来封装一个倒计时Hook函数，该函数包含start、reset和stop等方法。下面是如何实现这个倒......
  • ssts-hospital-web-master项目实战记录三十一：项目迁移-Vue项目Hook和插件的区别
    记录时间：2024-02-27一、准备工作【使用“文心一言”搜索】Vue中的生命周期钩子与React中的生命周期方法有何异同？Vue3中的Hook是组合式API的一部分，它们提供了一种新的方式来组织和复用组件逻辑。这些Hook函数，如setup、onMounted、onUpdated等，都是在组件的不同生命周期阶段被调......
  • Web页面请求历程
    本文仅对Web页面请求历程进行简单的介绍,由于作者初学计算机网络,同时也没有学习图论的知识,若有不妥之处还请指出.一、准备DHCP、UDP、IP和以太网以我的笔记本为例，我的笔记本与网络连接，此时笔记本没有ip地址，所以无法进行操作先获取ip地址，笔记本的操作系统生成一个DHCP请求......
  • ssts-hospital-web-master项目实战记录三十二：项目迁移-Vue项目Hook和插件的区别
    记录时间：2024-02-27一、准备工作【使用“文心一言”搜索】Vue3中的Hook（如setup、onMounted、onUpdated等）具体是如何工作的？它们与组件的生命周期有何关联？Vue3引入了CompositionAPI，这是一种新的、可选的方式来组织和重用Vue组件的逻辑。在CompositionAPI中，Hook（如setup、onMo......
  • webserver服务器学习记录
    利用IO复用技术Epoll与线程池实现多线程的Reactor高并发模型利用正则与状态机解析HTTP请求报文，实现处理静态资源的请求利用标准库容器封装char，实现自动增长的缓冲区基于小根堆实现的定时器，关闭超时的非活动连接利用单例模式与阻塞队列实现异步的日志系统，记录服务器......
  • Taurus.MVC WebMVC 入门开发教程2：一个简单的页面呈现
    前言：在上一篇中，我们了解了如何下载、配置和运行Taurus.MVCWebMVC框架。现在，让我们开始编写一个简单的页面并进行呈现。步骤1：创建控制器首先，我们需要创建一个控制器来处理页面呈现的逻辑。在VisualStudio中，右键单击项目文件夹，选择「添加」->「类」。在弹出的对话框中，......
  • ssts-hospital-web-master项目实战记录三十：项目迁移-插件实现说明
    记录时间：2024-02-26一、准备工作【使用“文心一言”搜索：Vue.js中模块和插件有什么区别？】在Vue.js中，模块（Modules）和插件（Plugins）都是用于扩展和增强Vue.js功能的方式，但它们在使用和目的上有一些不同。模块（Modules）模块是Vue.js中组织代码的一种方式，通常用于将应用程序划分为不同......
  • vue init webpack 和vue create的几点区别
    vueinitwebpack和vuecreate的几点区别：https://blog.csdn.net/xilejie/article/details/130061075?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170891269616800184194526%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request......
  • 一个支持Sora模型文本生成视频的Web客户端
    大家好，我是Java陈序员。最近OpenAI又火了一把，其新推出的文本生成视频模型——Sora,引起了巨大的关注。Sora目前仅仅只是发布预告视频，还未开放出具体的API.今天，给大家推荐一个最近十分火热的开源项目，一个支持使用Sora模型将文本生成视频的Web客户端。关注微信公众......
  • ssts-hospital-web-master项目实战记录十六：项目迁移-模块实现（page-info）
    记录时间：2024-02-25二、page-info模块实现framework/page-info/index.ts//javascript用来遍历指定对象所有的属性名称和值//obj需要遍历的对象constallProps=function(obj:any,props:string=''):string{ //使用Object.keys()获取对象自身的所有属性键 ......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99