51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
信创认证
公众号矩阵
移动端
视频课 免费课 排行榜 短视频 直播课 软考学堂
全部课程 软考 信创认证 华为认证 厂商认证 IT技术 PMP项目管理 免费题库
在线学习
文章 资源 问答 课堂 专栏 直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
CKA（Kubernetes 管理员认证）精品班
按照企业k8s需求进行技能培训，帮助用户快速拿下CKA认证，K8S采用新版本进行授课，课程内容全、讲解详细 。 免费试学
软考高级：系统架构设计师精品班
根据考试大纲对知识点、高频考点进行深入讲解，传授答题技巧及判断标准，助力高效备考。 免费试学
信创认证：系统架构师精品班（高级）
信息技术应用创新人才考试评价 免费试学

vue3:modal组件开发
项目环境@vue/cli 4.5.8最终效果需求分析显示/隐藏 点击遮罩层能否关闭 宽度和zIndex自定义 标题栏 -显示标题和关闭按钮 主体 底部 -内置取消和确定功能前置知识​​teleport​​​通过其to属性可以把实例插入到对应的​​body​​中实现过程搭建大体的html模版<template> <teleport to="body"> &
Modal
vue
component
ide
Boo
原创
Fly丶知秋
2023-03-06 03:56:20
325阅读

Vue 组件：给Bootstrap Modal增加缩放功能
需求 Bootstrap 应该还是目前最流行的前端基础框架之一。因为架构方面的优势，它的侵入性很低，可以以各种方式集成到其它项目当中。在我厂的各种产品里，都有它的用武之地。 前两天，老板抱怨，说 Modal（弹窗）在他的屏幕上太小，浪费他的 5K 显示器。 我看了一下，按照 Bootstrap 的设
缩放
bootstrap
拖拽
块级元素
宽高
转载
mb5ffd6f777f4e8
2020-10-04 14:30:00
344阅读
2评论

vue3【组件封装】确认对话框 Modal
src/components/Modal.vue<template> <transition name="fade"> <div class="fixed w-full h-full z-100 top-0 left-0 bg-black bg-opaci
vue3
组件封装
ci
原创
朝阳39
11月前
182阅读

ant vue 修改modal样式
<style lang="less" scoped> div /deep/ .ant-modal-content{ height: 600px; width: 1000px; } div /deep/ .ant-modal-body{ height: 80%; width: 100%; } </st
s
原创
wx5b6d6c951e615
2022-09-20 11:59:47
443阅读

移动端 Modal 组件开发杂谈
Vant 是有赞开发的一套基于 Vue 2.0 的 Mobile 组件库，在开发的过程中也踩了很多坑，今天我们就来聊一聊开发一个移动端 Modal 组件（在有赞该组件被称为 Popup ）需要注意的一些坑。 在任何一个合格的UI组件库中，Modal 组件应该是必备的组件之一。它一般用于用户处理事物，
移动端
代码实现
垂直居中
水平垂直居中
css
转载
mb5fe55a1c73221
2018-11-15 09:55:00
168阅读
2评论

bootstrap jQuery 怎么打开modal组件
随着HTML 5时代的来临,移动开发开始进入了一个新的时代,现在只需要懂得HTML5,配合一定的开发框架,就可以开发出十分漂亮的HTML5的移动应用。在众多的 移动HTML5开发框架中，比较著名的是jQuery Mobile。最近，jQuery Mobile宣布发布了最新的1.1版本，其中的一些新特性必1.0时代有了很大的提升。在本文中，将会就这些新的特性进行介绍，还将讨论在1.2版本中 估计会新
移动开发
javascript
ViewUI
jQuery
jquery
转载
mob64ca13fe1aa6
11月前
15阅读

React 模态框 Modal 组件详解
引言 模态框（Modal）是一种常见的 UI 元素，用于显示重要信息或请求用户输入。在 React 中，实现一个功能完善的模态框组件并不复杂，但也有许多细节需要注意。本文将从基础概念出发，逐步深入到 React 模态框组件的实现，包括常见问题、易错点及如何避免，并提供代码案例解释。 什么是模态框？ 模态框是一种临时性的对话框，它会阻止用户与页面的其他部分交互，直到模态框被关闭。模态框通常用于显示
模态框
App
CSS
原创
尔等氏人
11月前
348阅读

Vue3 & React Hooks 新UI组件原理：Modal 弹窗
Vue3 & React Hooks 新UI组件原理：Modal 弹窗
Modal 弹窗
转载
mb60efb0123ab42
2021-07-25 23:50:38
1813阅读

ant design vue3 modal 调整弹窗大小 vue自定义弹窗组件
方式: 利用js代码,在必要时候动态弹出组件, 而不需要Vue.use,也必在页面上写组件.依据: vm.$mount( [elementOrSelector] )参数：• {Element | string} [elementOrSelector] • {boolean} [hydrating]返回值：vm - 实例自身用法：如果 Vue 实例在实例化时没有收到 el 选项，
Vue
构造函数
赋值
转载
云端筑梦工匠
2024-03-15 10:16:22
1433阅读

引用antd-vue中的modal组件样式只在当前vue组件生效的解决方案
如题，前端开发当中，经常会团队多人合作开发，而为了避免页面样式覆盖，除了要遵守公司或团队制定的前端开发标准规范之外，一定要仔细阅读相关框架中所使用组件的API说明。我们开发时为防止页面样式影响其他人的页面，通常都会在.vue文件的style样式上加上scoped声明该样式的作用域，但是antd-vu ...
前端开发
作用域
html
标准规范
其他
转载
mob604756e65292
2021-08-16 10:53:00
956阅读
2评论

antd design react modal 组件样式 antd常用组件
一、Antd(Ant Design)的使用：引入全部Css样式1.1 antd官网：https://ant.design/docs/react/introduce-cn1.2 React中使用Antd1、在项目根目录安装antd【每个项目都安装一次】： npm install antd --save / yarn add antd / cnpm install antd
css
App
ide
转载
colddawn
2024-04-22 23:08:49
413阅读

antd vue 修改modal弹窗样式
默认支持modal宽度修改但是高度.ant-modal-body，默认不支持修改，所以需要先通过挂在元素再css穿透/deep/ .ant-modal-body{} 修改样式 可以看到修改成功效果：
css
原创
wx5b6d6c951e615
2022-09-20 12:03:18
1612阅读

【uniapp】【Vue3】 超简单全局自定义弹窗组件Modal
H5下需要正确设置 Canvas 的大小。其实自动引入后使用变得很
uni-app
ico
文件名
ide
原创
厦门外里科技有限公司
2023-08-07 08:21:08
2078阅读

antdesign vue modal无法打开 ant design vue mobile
低版本的antd table组件 官网文档上有可伸缩列功能，但是用起来有很明显的bug，无法直接拿来用；接下来给大家提供一个手写的拖拽方案：1.首先，写好v-table组件,这里最重要的就是table组件中的‘components’属性，官方对component的描述是"覆盖默认的 table 元素",意思就是对table进行重写<a-table :components="component
前端
vue.js
html
javascript
anti-design-vue
转载
mob64ca140ac564
2024-03-30 09:44:47
396阅读

VUE3（二十五）自定义Modal对话框组件
接着自定义组件，这里是我自定义的一个modal对话框组件。效果如下图所示：Modal.vue<template>   <div class="modal-backdrop" v-if="modalShow">      <div class="modal" >         <div class="modal-header">           
VUE3
转载
mb6066e2a67dd68
2021-04-20 21:57:00
556阅读
2评论

深度解析！Vue3 & React Hooks 新UI组件原理：Modal 弹窗
在某个月黑风高的晚上...没剧刷的我无意想起以前处理的一些弹窗的坑。 然后又无意间刷到“Portal”，才知道Modal的实现还有如此妙的方式，顺而想着干脆把UI组件库的实现原理看完。 1. Modal弹窗的基本原理 我给弹窗类的定义是脱离固定的层级关系，不再受制于层叠上下文的…
React.js
Vue.js
ide
数据
jquery
原创
笑妄²º²¹
2022-03-18 13:57:37
375阅读

antDesignVue Modal中文 ant design admin vue
平台开发一. vue-antd-admin简介二. git拉取vue-antd-admin三. 项目结构四. 通用设置五. 登录打通后端1、前端项目配置环境2、修改src/services/api.js文件3、修改src/services/user.js文件4、修改src/pages/login/Login.vue文件六. 效果展示 一. vue-antd-admin简介Vue Antd Adm
python
git
ide
API
转载
mob64ca140d2323
2024-04-25 23:10:01
154阅读

微信小程序 自定义组件（modal） 引入组件
项目结构： 步骤一：创建组件 声明这一组文件为自定义组件 modal.json 步骤二：编写组件代码 1.逻辑层 modal.js 2.页面布局 modal.wxml 3.样式 modal.wxss 步骤三：使用组件 这里我是在 pages/index/index 页面调用 pages/modal/
微信小程序
自定义组件
数据
json
xml
转载
mob604756ea03d0
2018-01-23 19:11:00
292阅读
2评论

React15.6.0实现Modal弹层组件
注：本文Demo环境使用的是我平时开发用的配置：这里是地址。本文适合对象了解React。使用过webpack3。熟悉es6语法。项目说明项目结构截图项目运行说明npm installnpm run startnpm run startfe登录localhost:8088查看demoModal组件分析Modal组件是属于一个网站中比较常用的基础组件，但是在实现方面上稍微复杂一些，对场景支持的需求度较
对象
弹层
react
回调函数
动画效果
原创
676015863
2023-06-01 00:39:13
287阅读

modal
数据
转载
mob60475700baf7
2017-06-08 23:19:00
89阅读
2评论
  • 1
  • 2
  • 3
  • 4
  • 5
精品课程领资料
免费资料>
2025软考
系统架构设计师 系统规划与管理师 软件设计师 系统集成项目管理工程师
信创认证
系统架构师 信创集成项目管理师 信创规划管理师 系统开发工程师
厂商认证
CKA/CKS架构师 红帽认证工程师 Oracle-OCP认证 Oracle-OCM认证
IT技术
数据库高级工程师 AIGC大模型实战 Linux云计算架构师 Python全栈开发
华为认证
数通HCIP认证 云计算HCIE认证 华为存储HCIE认证 HCIP安全认证
相关文章

【Modal】

modal

$modal

vue functional组件 vue组件使用

vue组件template VUE组件遍历

从小程序指南针功能中看modal组件

vue组件转typescript vue组件转react组件

vue展示组件和容器组件 vue组件选项

antd-design-vue modal模态框组件自定义footer脚部的按钮

Copyright © 2005-2025 51CTO.COM 版权所有 京ICP证060544号

关于我们
官方博客 全部文章 热门标签 班级博客
了解我们 网站地图 意见反馈
友情链接
鸿蒙开发者社区 51CTO学堂
51CTO 软考资讯