发门网
Vue模态框的封装
创始人
2024-05-26 23:51:25
0次

一、模态框

1、模态框：若对话框不关闭，不能操作其父窗口

2、非模态框：对话框不关闭，可以操作其窗口

二、Vue组件实现模态框的功能

1、模态框是一个子组件

2、显示和隐藏由父组件决定

3、对话框的标题也是由父组件传递的

4、对话框的主显示区的内容由父组件决定的，使用插槽

5、对话框的宽度、高度、位置也是由父组件决定的

三、示例

将登录的功能加入模态框中

子组件HTML代码

注意

其中标签为插槽，插槽相当于起到占位符的作用，插槽里面的内容由父组件决定。

子组件JS代码

注意

模态框的开启和关闭由父组件决定，父组件传递boolean控制模态框，子组件通过props接收

自组件的Css代码

父组件代码

将表格写入插槽的位置

父组件JS代码：

父组件的CSS代码：

在这里应用的scss编译修饰

这里需要注意的是，当制作登录框时会碰到，input输入框和前面的文字往往无法对齐，这里采取的

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：第一个 Spring MVC 注解式开发案例（初学必看）

下一篇：C#开发的OpenRA的加载界面边框的细节

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播，要解决的几个问题是：1&...
Windows10添加群晖磁盘... 在使用群晖NAS时，我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章，在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
【PdgCntEditor】解... 一、问题背景 大部分的图书对应的PDF，目录中的页码并非PDF中直接索引的页码...
修复 爱普生 EPSON L4... L4151 L4153 L4156 L4158 L4163 L4165 L4166 L4168 L4...
Fluent中创建监测点 1 概述某些仿真问题，需要创建监测点，用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装（Wind... 前言：刚换了一台电脑，里面所有东西都需要重新配置，习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile，这个类提供了一个没有缓存的二进制格式的磁盘...