Vue3 优雅的模态框封装方案 - 初探

最新推荐文章于 2024-07-26 19:57:34 发布

Mr_maoEr

最新推荐文章于 2024-07-26 19:57:34 发布

阅读量1.1k

点赞数 2

文章标签： vue.js javascript vue

本文链接：https://blog.csdn.net/leg_hair_king/article/details/118034772

版权

本文探讨Vue3中优雅地封装模态框的方法，涉及虚拟节点创建、渲染及Vue3的瞬移组件(Teleport)。通过封装模态框，实现模板和JS代码中的灵活调用，同时保持组件库模态框的复用性和扩展性。文章详细讲解了如何使用h函数创建虚拟节点，render函数渲染至DOM以及Teleport组件的使用特性。

摘要由CSDN通过智能技术生成

my-blog：https://tuimao233.gitee.io/mao-blog/

Vue3 优雅的模态框封装方法 - 初探

Vue3 优雅的模态框封装方法 - 实践

想必大家使用 Vue 开发时，都有使用过 Element 或 Ant Design of Vue 的模态框

例如 Ant Design of Vue 中的 a-message：

  <a-modal v-model="visible" title="Title" on-ok="handleOk">
    自定义内容
  </a-modal>

又或者直接在 js 代码中直接调起的 ElMessageBox：

import {
    ElMessageBox } from 'element-plus';

ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示')
    .then(()=> {
   
    })
    .

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Mr_maoEr

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

VUE3-利用teleport标签传送并制作模态框（20）

述安的博客

03-14

1058

关键词：teleport、模态框

ant-design-vue中实现modal模态框的复用（添加，编辑展示同一个模态框）

u012732909的博客

02-26

2261

用两个button（添加，编辑）按钮展示同一个模态框，并不是什么大问题，问题在于解决这两个模态框得有自己的确定和取消方法父页面完全接管子页面（利于子页面复用）父页面代码： <template> <div> 　　<-- 定义两个按钮，一个添加按钮，一个编辑按钮 --> <a-button type="primary" @click="showModal">添加</a-button> <a-button ty

1 条评论您还未登录，请先登录后发表或查看评论

使用await 方式控制ElMessageBox.confirm等弹窗确认简洁代码调用流程控制

最新发布

oMangGuoBuDing1的专栏

07-26

398

then(() => {}).catch(() => {}写重复大段的代码控制，现有了简洁理想的控制方式，因为 ElMessageBox.confirm的返回值是一个promise,通过await 然后阻塞等待然后接受确认后的返回值，根据内部return的true false返回，决定是否执行后面的代码块逻辑。

vue3 实现一个模态框

逆风优雅的博客

02-17

1937

<template> <div> <button @click="show">点我弹个窗</button> <teleport to="body">   <div class="mask" v-if="is.

16.Vue3.x Teleport、使用Teleport自定义一个模态对话框的组件

05-16

262

一、Vue3.x Teleport Vue3.x中组件模板属于该组件，有时候我们想把模板的内容移动到当前组件之外的Dom中，这个时候可以使用Teleport 表示teleport内包含的内容显示到body中 <teleport to="body"> 内容 </teleport> 二、使用Teleport自定义一个模态对话框的组件新建子组件Modal.vue模态框组件说明：关闭按钮调用父组件的自定义方法：$emit(‘close-modal’)，实现关闭 <template

vue3.0模态框组件应用实例

Betty_textbook的博客

09-13

396

<NButton class="addBtn" type="primary" @click="switchModel" >发布公告</NButton > // 默认模态框状态为false，绑定点击事件，点击后模态框的值为true，即可点击后展示 <NModal v-model:show="addBtn" preset="dialog" title="确认" content="...

Vue3 优雅的模态框封装方案

leg_hair_king的博客

06-21

1470

Mr Mao’blog - gitee.io/mao-blogVue3 优雅的模态框封装方法 - 初探Vue3 优雅的模态框封装方法 - 实践Vue3 优雅的模态框封装方法 - 定制上次说到利用虚拟节点和瞬移组件制作模态框组件，并支持 template 中调用和 JavaScript 中调起但实际上，我们在工作中不会花这么大的精力去做这些繁琐的工作，一般都会直接使用组件库的弹出层去修改（例如 element-plus）但所涉及到的问题又回到了通篇都在描述的点上：不通用，不能很方便的调用（例如我想在 /

vue 心跳监控_初探和实现websocket心跳重连(npm: websocket-heartbeat-js)

weixin_35677363的博客

01-30

739

提示：文章最下方有仓库地址心跳重连缘由websocket是前后端交互的长连接，前后端也都可能因为一些情况导致连接失效并且相互之间没有反馈提醒。因此为了保证连接的可持续性和稳定性，websocket心跳重连就应运而生。在使用原生websocket的时候，如果设备网络断开，不会触发websocket的任何事件函数，前端程序无法得知当前连接已经断开。这个时候如果调用websocket.send方法，浏览...

Vue 组件封装简单案例——小白入门

qwe122343的博客

07-17

3751

今天初步接触了 Vue 中的组件封装，将写好的公用组件封装在 src 的 components 文件夹下，在 views 文件夹下的 .vue 文件可以进行调用以最简单的 button 按钮封装为例，在 components 文件夹新建ComponentsPractice.vue文件 <template> <button @click="show">我是组件封装按钮</button> </template> <script> expor

初探 MicroApp，一个极致简洁的微前端框架

MonsterException的博客

01-28

3909

这个微前端框架真好吃

在vue3中自定义实现MessageBox弹窗

weixin_44815800的博客

07-27

5999

element自带的msgbox弹窗有限，自定义过于复杂，如何将自定义的组件封装成MessageBox弹窗的组件是本文的重点。

element ui MessageBox 弹框封装

weixin_44282046的博客

07-19

844

【代码】element ui MessageBox 弹框封装。

Vue3我这样使用弹窗

可乐会唱歌的博客

09-25

2577

vue3弹窗的使用

element-plus中ElmessageBox弹窗内容进行vnode操作

qq_44738313的博客

08-31

3340

在工作中遇到elmessagebox这个组件内容改变遇到的问题。elmessageBox大部分message部分为纯文字，但是也难免像我目前一样需要存入input框类似的功能。我自己琢磨了有一会才写出来，所以做个记录。

vue3中消息提示，确认框的封装：Message，MessageBox

qq_28813031的博客

09-24

5139

文件夹：msgBox.ts /** * 时间：2020/11/20 * Created by dingwangjun on * 说明：消息 */ import { ElNotification, ElMessage,ElMessageBox } from 'element-plus' /** * 如何调用，如下面调用案例 * import {succesMsg,warnMsg,infoMsg, errorMsg,alertBox,confirmBox} from '@/ut...

vue3+elementPlus ElMessageBox消息框取消按钮位置调整

liuzaixi的博客

10-07

1598

项目里修改element里的样式有些需要添加deep，小编也是试了很多都行不通，只有重新写一个且不加任何属性信息，将上面的样式放在里面才会生效，不清楚为什么，有知道原因的欢迎留言分享。该方法是通过给取消按钮添加class然后修改样式，也可以给确定按钮添加class修改样式。要求所有的ElMessageBox消息弹出框的取消按钮放在右边，如图。确定按钮的class属性名是confirmButtonClass。

Vue3使用createVNode和render函数实现仿 Antd 加载动效

都随它大小便吧

12-21

1095

项目是基于Vue3+Element plus框架设计的，本来使用Element plus的Loading加载动效已经是满足项目需求的，但是感觉AntDesign的加载动效图标好看一点点，于是自行实现一个基于Vue3，以及仿AntDesign的加载动效的示例。其主要用到Vue3的createVNode和render函数。

vue3使用Element ui plus中MessageBox消息框+radio框配合使用

m0_65544665的博客

10-24

1870

vue3使用Element ui plus中MessageBox消息框+radio框配合使用

vue3 怎么封装vue-ueditor-wrap

11-16

为了封装vue-ueditor-wrap，可以按照以下步骤进行操作： 1.安装vue-ueditor-wrap和ueditor ```shell npm install vue-ueditor-wrap ueditor --save ``` 2.在main.js中引入ueditor ```javascript import Vue from 'vue' import App from './App.vue' import UEditor from 'vue-ueditor-wrap' import 'ueditor/ueditor.config.js' import 'ueditor/ueditor.all.min.js' import 'ueditor/lang/zh-cn/zh-cn.js' Vue.component('u-editor', UEditor) new Vue({ el: '#app', render: h => h(App) }) ``` 3.在组件中使用vue-ueditor-wrap ```vue <template> <div> <u-editor v-model="content"></u-editor> </div> </template> <script> export default { data() { return { content: '' } } } </script> ``` 4.封装vue-ueditor-wrap为一个独立的组件 ```vue <template> <div> <u-editor v-model="content"></u-editor> </div> </template> <script> import UEditor from 'vue-ueditor-wrap' import 'ueditor/ueditor.config.js' import 'ueditor/ueditor.all.min.js' import 'ueditor/lang/zh-cn/zh-cn.js' export default { name: 'VueUeditorWrap', components: { UEditor }, props: { value: { type: String, default: '' } }, data() { return { content: this.value } }, watch: { value(val) { this.content = val }, content(val) { this.$emit('input', val) } } } </script> ``` 5.在其他组件中使用封装好的vue-ueditor-wrap组件 ```vue <template> <div> <vue-ueditor-wrap v-model="content"></vue-ueditor-wrap> </div> </template> <script> import VueUeditorWrap from './VueUeditorWrap.vue' export default { components: { VueUeditorWrap }, data() { return { content: '' } } } </script> ```