前言在某个月黑风高的晚上...没剧刷的我无意想起以前处理的一些弹窗的坑。然后又无意间刷到“Portal”，才知道Modal的实现还有如此妙的方式，顺而想着干脆把UI组件库的实现原理看完。本文将讲述以下三种 Modal弹窗类的实现原理：1. Modal弹窗的基本原理我给弹窗类的定义是脱离固定的层级关系，不再受制于层叠上下文的组件。常见的Modal模态框、Dialog对话框、Notification通
转载
2024-06-18 22:50:49
307阅读
1.实现效果图2.第一步，新建一个.
vue文件 定义一个弹框的基本模板style样式放在了文章的最底部，如果需要看效果，需要将样式放入这个
vue文件里
，样式是用less写的，需要你的项目引入less
注意：我这里的组件右上角关闭是一张图片 需要换成你自己本地的路径<template>
<div id="tip_alertModal">
<div cl
转载
2024-10-22 06:58:22
504阅读
2021.12.20 更新因为最近用 vue3 新写了一个官网类型的网站，当时也是有用 vue3 的模式写一个手动挂载的登录弹窗组件，但是也是为了写的比较满意使用的单例模式来做，之后发现之前这篇博文在介绍单例模式方面的写法是没有问题的，但是在举例 vue 单例弹窗应用的时候有一些细节没有介绍到。import Vue from 'vue'
import loginPopupComponent fro
转载
2024-09-27 16:23:50
10000+阅读
在子组件中编写弹窗，在父组件中引用弹窗文章目录编写子组件编写父组件把子组件的弹窗引入到父组件中引入子组件方法注册子组件通过$emit把子组件的值传入到父组件中父组件接收子组件传来的值通过v-if条件确定数据的显示与隐藏整体代码参考 编写子组件效果图： 代码：<template>
<ModalComponent
name="import-set"
title="
转载
2024-02-23 11:22:27
524阅读
在移动端页面开发中，经常会去封装一个遮罩层（全屏弹窗），遮罩层（全屏弹窗），遮罩层（全屏弹窗）的组件，但是如果是固定定位的position：fixed；在弹出的时候会遇到一些小坑，之前搜索了一下，网上的博客也好评论也罢，总是有点缺陷或者累赘代码太多。就比如今天的主题，如何防止遮罩层（全屏弹窗）下方body内容继续滚动呢？移动端开发遮罩层（弹窗）防止滚动穿透完美解决方案首先，pc的肯定直接就给bod
转载
2024-10-22 07:15:25
203阅读
多个文件上传的核心就是将文件append进FormData的实例中，向后台请求时将实例对象传送过去。页面结构： 多个文件上传，传送的数据：先上代码：html部分：<el-upload
class="upload-demo"
ref="upload"
action=""
:on-change="handl
转载
2024-04-06 22:37:07
560阅读
【代码】基于vue+element实现的弹窗。
原创
2022-12-10 00:13:04
469阅读
对于后台管理系统，有很多弹框的功能，这时候，我们就可以将弹框封装成一个公共组件进行复用。1. 新建
弹窗组件页在公共组件文件夹（components）下建一个弹框组件文件夹（EditboxForm）<template>
<div>
<transition name="slide">
<div class="editBoxFrom" v-show=
转载
2024-04-11 14:33:44
3232阅读
建立多个Vue实例对象这里在同一个js文件中创建了两个Vue实例对象，它们各自能完成前面学的那些功能，同时使用对象名称也可以互相访问，协同实现一些功能。index.html<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta c
转载
2024-03-21 10:21:39
101阅读
前端项目目前是elementUI+Vue开发的，遇到一个需求就是将计算结果展示在弹窗上，并进行复制到剪切板上。
我们将需求进行拆解：
第一步是，点击构建按钮，将结果计算出来，并把结果展示在弹窗的文案中
第二步是，点击复制按钮，直接将结果复制到剪切板上
需求很简单，重要的是实现步骤以及怎样以最简洁快速的方式实现它。
转载
2024-06-06 11:06:04
115阅读
目录欢迎来到萌小问题分享环节问题开始组件创建组件使用结束 问题开始弹框问题： 1.由于管理平台里含有很多的弹框,每个界面几乎都有新增和编辑弹框,若是新增和编辑一直重复写会增加代码量,而且需要增加字段时,需要修改两处代码,这样就会增加任务量,对于这个问题,于是就想到了vue里的组件封装及使用,将弹框封装成组件,通过判断去使用,这样修改的时候只需要修改组件就可以了,接下来就说说封装的步骤吧.组件创建
转载
2024-02-28 11:10:29
244阅读
热爱vue开发的同学肯定知道awesome-vue 这个github地址，里面包含了数以千计的vue开源插件，而这些插件大都来自第三方开发者们，是他们为vue社区提供了大量的技术支持和解决方案。本文立足vue开源的理念，主要为vue开发者讲解编写vue插件的方法和步骤，通过理论与实践相结合的方式来加深大家对vue插件编写的认识。vue插件介绍1. 插件与组件在讲解插件之前，我们首先来了解下vue插
Element Plus是Vue.js的一套基于Element UI的组件库，提供了丰富的组件用于构建现代化的Web应用程序。其中，<el-select>是一个常用的下拉选择器组件，但在某些情况下，当<el-select>组件嵌套在<el-dialog>（对话框）组件中时，可能会出现层级过低的问题。本文将介绍如何使用popper-class属性解决这个问题，使得
1.JS获取iframe下面的内容document.getElementById('IFRAME1').contentDocument;2.dialog 弹出层,定位:postion:'bottom',['right','bottom'],['left','bottom'].3.IIS上部署WCF; 调用wcf或webapii一定要做安全认证。 cd d: cd C
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、vue+element table弹窗组件二、代码展示
1.表格数据展示
2.弹窗组件总结 前言本人爬虫菜鸟一枚，最近公司业务要求使用vue+flask搭建一个公司使用的后台管理系统，在此做个记录。也是本人第一次写博客，多多指点。 废话不多说...直捣黄龙，在表格数据展示经常需要有编
转载
2024-02-12 19:54:09
855阅读
element-ui upload组件多文件上传之前有一篇写的如何同时传递form表单及upload组件文件，如果有多个upload文件该如何传递呢上代码
转载
2022-05-26 12:25:08
1702阅读
在某个月黑风高的晚上...没剧刷的我无意想起以前处理的一些弹窗的坑。然后又无意间刷到“Portal”，才知道Modal的实现还有如此妙的方式，顺而想着干脆把UI组件库的实现原理看完。本文将讲述 Modal弹窗类的实现原理：1. Modal弹窗的基本原理我给弹窗类的定义是脱离固定的层级关系，不再受制于层叠上下文的组件。常见的Modal模态框、Dialog对话框、Notificat
转载
2024-07-30 10:15:03
122阅读
dialog弹窗 父子组件之间传值及方法调用一、前言二、模板ref1 访问模板ref三、父给子传值1 子组件使用prop声明接收的参数2 父组件使用v-model传递值四、父调子的方法1 子组件定义方法，并暴露它2 父组件调用子组件的方法五、子组件调用父组件方法1 在父组件中定义方法，并在子组件标签上指定调用2 子组件通过emit调用父组件的方法，并传值六、子给父传值，配合v-model:使用1
转载
2024-09-02 13:14:51
140阅读
Vue.extend()的使用。覆盖引入的Element UI组件的默认模态框样式
问题背景前端交互中经常使用确认框。在删除、修改等操作时，调用后端接口之前，先跳出弹框显示提示信息，提示用户确认，避免用户误操作。
项目中全局引入了Element UI，提供了一套模态对话框组件，用于消息提示、确认消息、提交内容，使用起来也非常简便。
（什么是“模态”？可将
转载
2024-07-16 12:57:15
1681阅读
相信普通的vue组件大家都会写,定义 -> 引入 -> 注册 -> 使用,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢?首先,我们来分析一下弹窗组件的特性(需求): 0. 轻量 --一个组件小于 1Kib (实际打包完不到0.8k)一般都是多处使用 --需要解决每个页面重复引用+注册一般都是跟js交互的 --无需 在<template>里面写 <
转载
2024-05-16 08:51:42
981阅读
