5分钟搞定vue3函数式弹窗

这篇具有很好参考价值的文章主要介绍了5分钟搞定vue3函数式弹窗。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

最近接到一个需求,需要在一些敏感操作进行前要求输入账号和密码,然后将输入的账号和密码加到接口请求的header里面。如果每个页面都去手动导入弹窗组件,在点击按钮后弹出弹窗。再拿到弹窗返回的账号密码后去请求接口也太累了,那么有没有更简单的实现方式呢?
5分钟搞定vue3函数式弹窗

函数式弹窗的使用场景

首先我们来看看什么是函数式弹窗?

函数式弹窗是一种使用函数来创建弹窗的技术。它可以简化弹窗的使用,只需要在需要弹窗的地方调用函数就可以了。那么这里使用函数式弹窗就能完美的解决我们的问题。

我们只需要封装一个showPasswordDialog函数,调用该函数后会弹出一个弹窗。该函数会返回一个resolve后的值就是账号密码的Promise。然后在http请求拦截器中加一个needValidatePassword字段,拦截请求时如果该字段为true,就await调用showPasswordDialog函数。拿到账号和密码后塞到请求的header里面。这样就我们就只需要在发起请求的地方加一个needValidatePassword: true配置就行了。

5分钟搞定vue3函数式弹窗

先来实现一个弹窗组件

这个是简化后template中的代码,和Element Plus官网中的demo代码差不多,没有什么说的。

<template>
  <el-dialog :model-value="visible" title="账号和密码" @close="handleClose">
    <!-- 省略账号、密码表单部分... -->
    <el-button type="primary" @click="submitForm()">提交</el-button>
  </el-dialog>
</template>

这个是简化后的script代码,大部分和Element Plus官网的demo代码差不多。需要注意的是我们这里将close关闭事件和confirm确认事件定义在了props中,而不是在emits中,因为后面函数式组件会通过props将这两个回调传入进来。具体的我们下面会讲。

<script setup lang="ts">
interface Props {
  visible: boolean;
  close?: () => void;
  confirm?: (data) => void;
}

const props = defineProps<Props>();

const emit = defineEmits(["update:visible"]);

const submitForm = async () => {
  // 省略validate表单校验的代码
  // 这里的data为表单中输入的账号密码
  props.confirm?.(data);
  handleClose();
};

const handleClose = () => {
  emit("update:visible", false);
  props.close?.();
};
</script>

再基于弹窗组件实现函数式弹窗

createApp函数和app.mount方法

createApp函数会创建和返回一个vue应用实例,也就是我们平时常说的app,该函数接受两个参数。第一个参数为接收一个组件,也就是我们平时写的vue文件。第二个参数为可选的对象,这个对象会传递给第一个参数组件的props

举个例子:

import MyComponent from "./MyComponent"

const app = createApp(MyComponent, {
  visible: true
})

在这个例子中我们基于MyComponent组件生成了一个app应用实例,如果MyComponent组件的props中有定义visible,那么visible就会被赋值为true

调用createApp函数创建的这个应用实例app实际就是在内存中创建的一个对象,并没有渲染到浏览器的dom上面。这个时候我们就要调用应用实例app暴露出来的mount方法将这个组件挂载到真实的dom上面去。mount方法接收一个“容器”参数,用于将组件挂载上去,可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串。比如下面这个例子是将组件挂载到body上面:

app.mount(document.body)

app提供了很多方法和属性,详见 vue官网。

封装一个showPasswordDialog函数

首先我们来看看期望如何使用showPasswordDialog函数?

我们希望showPasswordDialog函数返回一个Promiseresolve的值就是弹窗中输入的表单。例如,我们可以使用以下代码使用showPasswordDialog函数:

try {
  // 调用这个就会弹出弹窗
    const res: RuleForm = await showPasswordDialog();
    // 这个res就是输入的账号密码
    console.log("res", res);
  } catch (error) {
    console.log(error);
  }

具体如何实现showPasswordDialog函数?

经过上面的介绍我们知道了可以调用createApp函数传入指定组件生成app,然后使用app.mount方法将这个组件挂载到指定的dom上面去。那么现在思路就清晰了,我们只需要将我们前面实现的弹窗组件作为第一个参数传递给createApp函数。第二个参数传入一个对象给弹窗组件的props,用以控制打开弹窗和注册弹窗关闭和确认的事件回调。下面是实现的showPasswordDialog函数

import { App, createApp } from "vue";
import PasswordDialog from "./index.vue";
// 这个index.vue就是我们前面实现的弹窗组件

export async function showPasswordDialog(): Promise<RuleForm> {
  return new Promise((resolve, reject) => {
    let mountNode = document.createElement("div");
    let dialogApp: App<Element> | undefined = createApp(PasswordDialog, {
      visible: true,
      close: () => {
        if (dialogApp) {
          dialogApp.unmount();
          document.body.removeChild(mountNode);
          dialogApp = undefined;
          reject("close");
        }
      },
      confirm: (res: RuleForm) => {
        resolve(res);
        dialogApp?.unmount();
        document.body.removeChild(mountNode);
        dialogApp = undefined;
      },
    });
    document.body.appendChild(mountNode);
    dialogApp.mount(mountNode);
  });
}

在这个showPasswordDialog函数中我们先创建了一个div元素,再将弹窗组件传递给了createApp函数生成一个dialogApp的实例。然后将创建的div元素挂载到body上面,再调用mount方法将我们的弹窗组件挂载到创建的div元素上,至此我们实现了通过函数式调用将弹窗组件渲染到body中。

现在我们再来看看传入到createApp函数的第二个对象参数,我们给这个对象分别传入了visible属性、closeconfirm回调方法,分别会赋值给弹窗组件props中的visiblecloseconfirm

弹窗组件中触发关闭事件时会调用props.close?.(),实际这里就是在调用我们传入的close回调方法。在这个方法中我们调用了实例的unmount方法卸载组件,然后将创建的弹窗组件dom从body中移除,并且返回一个rejectPromise

当我们将账号和密码输入完成后,会调用props.confirm?.(ruleForm),这里的ruleForm就是我们表单中的账号和密码。实际这里就是在调用我们传入的confirm回调方法,接下来同样也是卸载组件和移除弹窗组件生成的dom,并且返回一个resolve值为账号密码表单的Promise

总结

这篇文章主要介绍了如何创建函数式弹窗:

  1. 创建一个常规的弹窗组件,有点不同的是closeconfirm事件不是定义在emits中,而是作为回调定义在props中。

  2. 创建一个showPasswordDialog函数,该函数返回一个Promiseresolve的值就是我们弹窗中输入的表单。

  3. 调用createApp函数将步骤一的弹窗组件作为第一个参数传入,并且第二个对象参数中传入属性visibletrue打开弹窗和注入弹窗close关闭和confirm确认的回调。

  4. 使用者只需await调用showPasswordDialog就可以打开弹窗和拿到表单中填入的账号和密码。

如果我的文章对你有点帮助,欢迎关注公众号:【欧阳码农】。你的支持就是我创造的最大动力,感谢感谢!文章来源地址https://www.toymoban.com/news/detail-777967.html

到了这里,关于5分钟搞定vue3函数式弹窗的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 毕业设计:Vue3+FastApi+Python+Neo4j实现主题知识图谱网页应用——前言

    资源链接:https://download.csdn.net/download/m0_46573428/87796553 前言:毕业设计:Vue3+FastApi+Python+Neo4j实现主题知识图谱网页应用——前言_人工智能技术小白修炼手册的博客-CSDN博客 首页与导航:毕业设计:Vue3+FastApi+Python+Neo4j实现主题知识图谱网页应用——前端:首页与导航栏_人工智

    2024年02月14日
    浏览(47)
  • vue3+elementPlus:el-drawer新增修改弹窗复用

    在el-drawer的属性里设置:title属性,和重置函数 上一篇文章,  uniapp踩坑之项目:使用过滤器将时间格式化为特定格式_uniapp过滤器-CSDN博客 文章浏览阅读446次。uniapp踩坑之项目:使用过滤器将时间格式化为特定格式,利用filters过滤器对数据直接进行格式化,注意:与method、

    2024年02月03日
    浏览(44)
  • Vue3使用element-plus实现弹窗效果-demo

    2024年02月13日
    浏览(50)
  • html 中vue3 的setup里调用element plus的弹窗 提示

     引入Elementplus之后,在setup()方法外面导入ElMessageBox 源码 : 相关 在vue3项目嵌套 导入老项目 jQuery项目,减少重复开发-CSDN博客 

    2024年02月04日
    浏览(41)
  • 十分钟,带你了解 Vue3 的新写法

    本文的目的,是为了让已经有 Vue2 开发经验的 人 ,快速掌握 Vue3 的写法。 因此, 本篇假定你已经掌握 Vue 的核心内容 ,只为你介绍编写 Vue3 代码,需要了解的内容。 首先,Vue3 新增了一个叫做组合式 api 的东西,英文名叫 Composition API。因此 Vue3 的  script  现在支持三种写法

    2024年02月05日
    浏览(51)
  • vue3探索——5分钟快速上手大菠萝pinia

    温馨提示:本文以vue3+vite+ts举例,vite配置和ts语法侧重较少,比较适合有vuex或者vue基础的小伙伴们儿查阅。 yarn npm pnpm 在 src/main.ts 中引入pinia(根存储),并传递给应用程序。 在根目录下新建文件夹,这里我命名为 store ,再在文件夹下新建一个 index.ts 文件( src/store/index.ts

    2024年02月09日
    浏览(39)
  • 超详细!10分钟开发一个Vue3的后台管理系统

    有很多人说 vue2 早就过时了,都 23年了竟然还有人在用 vue2?简直就是个土老帽! “你有说话的权利,但我不认同你的观点。”任何公司的技术架构不是一蹴而就的,而是随着业务的增长不断升级变化的。技术越新,用的人不一定会很多。 其实我敢说现在国内跟多公司还在用

    2024年02月16日
    浏览(34)
  • 5分钟搞定验证码

    本效果是利用easy-captcha工具包实现,首先需要添加相关依赖到pom.xml中,代码如下: 验证码格式 easy-captcha验证码工具支持GIF、中文、算术等类型,分别通过下面几个实例对象实现: SpecCaptcha(PNG类型的静态图片验证码) GifCaptcha(Gif类型的图片验证码) ChineseCaptcha(GIF类型中

    2024年02月06日
    浏览(44)
  • EasyExcel 三分钟搞定导入导出

    前言:本文章教你从零开始,三分钟搞定excel单sheet导出、导入、多sheet导出、导入、excel模板导入单个sheet、多个sheet,废话不多说,直接上代码 1.引入依赖 2.工具类-ExcelHandler 3.工具类-ExcelTemplateEnum 4.工具类-UploadDataListener 5.实体类-ExcelVO 6.业务层-ExcelService 7.实现层-ExcelService

    2024年02月15日
    浏览(30)
  • 教你1分钟搞定2小时字幕

    摘要: 本文将介绍如何使用录音文件识别极速版给无字幕视频自动生成字幕。 本文分享自华为云社区《利用录音文件极速版为视频生成字幕》,作者:戈兀。 越来越多的人们使用抖音、B站等视频app,记录、分享日常生活,随之互联网上产生了大量的长、短视频。字幕是影响

    2024年02月06日
    浏览(95)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包