【vueUse库Utilities模块各函数简介及使用方法--第3篇】

vueUse库是一个专门为Vue打造的工具库，提供了丰富的功能，包括监听页面元素的各种行为以及调用浏览器提供的各种能力等。其中的Browser模块包含了一些实用的函数，以下是这些函数的简介和使用方法：

vueUse

Utilities

函数

1. useConfirmDialog

useConfirmDialog简介及使用方法

在 vueUse 库中，Utilities 模块可能并不直接包含名为 useConfirmDialog 的函数，因为 vueUse 主要提供的是与 Vue 3 Composition API 相关的实用函数，这些函数通常用于处理常见的异步操作、监听器、状态管理等。然而，vueUse 或其社区可能提供了自定义的 composable 函数来处理对话框（如确认对话框），但这些函数可能不是库的核心部分，而是作为扩展或示例存在。

不过，我们可以根据 useConfirmDialog 的名称和用途，来构想一个如何在 Vue 3 中使用类似功能的 composable 函数，并展示一个自定义实现的方法。

自定义 useConfirmDialog

在 Vue 3 中，你可以使用 vueUse 的其他功能（如状态管理）结合 Vue 的响应性系统和模板语法来创建一个 useConfirmDialog 函数。这个函数可以返回一个对象，该对象包含显示对话框的方法、对话框的显示状态以及处理用户确认或取消操作的方法。

以下是一个简单的 useConfirmDialog 实现示例：

// useConfirmDialog.js
import {
    ref } from 'vue';

export function useConfirmDialog() {
   
  const isVisible = ref(false);
  const message = ref('');
  const confirmed = ref(false);

  function show(msg) {
   
    message.value = msg;
    isVisible.value = true;
    confirmed.value = false; // 重置确认状态
  }

  function hide() {
   
    isVisible.value = false;
  }

  function confirm() {
   
    confirmed.value = true;
    hide(); // 通常在确认后隐藏对话框
  }

  function cancel() {
   
    confirmed.value = false;
    hide(); // 取消操作也隐藏对话框
  }

  return {
   
    isVisible,
    message,
    confirmed,
    show,
    hide,
    confirm,
    cancel
  };
}

使用方法

在你的 Vue 组件中，你可以这样使用 useConfirmDialog：

<template>
  <div>
    <button @click="showConfirm">显示确认对话框</button>
    <div v-if="confirmDialog.isVisible">
      <p>{
  { confirmDialog.message }}</p>
      <button @click="confirmDialog.confirm">确认</button>
      <button @click="confirmDialog.cancel">取消</button>
    </div>
    <p v-if="confirmDialog.confirmed">用户已确认</p>
  </div>
</template>

<script>
import { useConfirmDialog } from './useConfirmDialog'; // 引入自定义的 useConfirmDialog

export default {
  setup() {
    const confirmDialog = useConfirmDialog();

    function showConfirm() {
      confirmDialog.show('你确定要执行这个操作吗？');
    }

    return {
      confirmDialog,
      showConfirm
    };