对element ui MessageBox弹框优化兼容移动端

最新推荐文章于 2024-05-01 23:04:35 发布
最新推荐文章于 2024-05-01 23:04:35 发布
阅读量3.3k 收藏 10
点赞数 7
分类专栏： vue element ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42852004/article/details/106071287
版权

MessageBox弹框兼容移动端的问题

在这里插入图片描述

问题原因

在这里插入图片描述
在上图中可以看到.el-message-box这个样式被定死为420px,因此会发生弹框位置不准确在移动端

解决方案

可以利用媒体查询@media实现在宽度小于750px一下，宽度可以使用百分比布局

@media screen and (max-width: 750px) {
  .el-message-box {
    width: 60% !important;
  }
}

呈现效果

在这里插入图片描述

Element-UI DatePicker日期范围选择器、弹窗框 兼容移动端
Lydia
01-09 2580
日期范围选择器、弹窗框 兼容移动端
【区分vue2和vue3下的element UI MessageBox 弹框组件，分别详细介绍属性，事件，方法如何使用，并举例】
最新发布
xiejunlan的博客
06-26 842
在 Vue 2 中，Element UI 提供了MessageBox弹框组件，用于显示消息提示、确认消息和获取用户输入等。而在 Vue 3 的 Element Plus 中，虽然组件和 API 可能有所变化，但基本概念和用法是相似的。下面我将分别介绍 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中MessageBox的使用方式。
ElementUI MessageBox 适配移动端，修改宽度
絮落锦乡的博客
08-06 5855
1、Element ui 默认的宽度是420px 在移动端长度太长，需要审批2、解决方案 customClass: 'msgbox' 给弹出框加一个额外的class 名称 3、效果
Elementui中MessageBox弹框优化兼容移动端
06-09 1128
移动端时，MessageBox始终显示在顶部，很难看，我们现在想要居中显示解决办法如下：添加以下红框内容即可
elementUI 组件兼容移动端(媒体查询)
Jul的博客
03-08 3677
@media screen and (max-width: 500px) { .el-message { min-width: 300px !important; } } @media screen and (max-width: 500px) { .el-message-box { width: 300px !important; } } @media screen and (max-width: 500px) { .el-dialog__wrapper .el-d
2021-03-16-vue项目整合网页端框架element-ui，整合手机端框架vant操作步骤
qq_41270550的博客
02-26 1221
前言 vue是现在流行的前端框架，对应的也诞生了许多vue对应的皮肤组件库，手机端和网页端都出现很多可以供vue使用的组件库 下面抽两个组件库讲一下和vue的整合步骤 element-ui element-ui官方文档 安装 npm i element-ui -S main.js加入下面代码 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
Element MessageBox弹框的具体使用
10-15
Element MessageBox是Element UI中的一个弹框组件，用于展示重要信息、询问用户或者接收用户输入等。 在标题“Element MessageBox弹框的具体使用”中，主要的知识点包括了Element MessageBox的多种使用场景和对应的...
element-ui MessageBox 弹框自定义内容，点击取消时控制台报错
versious的博客
12-27 4193
解决：加上.catch(()=>{ }) this.$msgbox({ title: '消息', message: h('p', null, '是否同意张三的500元提现申请？'), showCancelButton: true, confirmButtonTex...
Element-Ui中MessageBox弹框提交内容与确认消息的使用方法
小柠檬爱编程
12-16 7703
js: mod(row) { this.$prompt("请输入公司名称", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", inputValue: row.company_name, inputPattern: /\S/, inputErrorMessage: "公司名称不能为空" }) .then(({ value..
element组件MessageBox 弹框使用和upload上传文件踩坑记录
幼儿园园长
01-10 1784
1、MessageBox 弹框 在做项目的过程中遇到了这样一种情况 文字需要换行处理。 但是删除一般都用这个，非常的方便且契合，但是对于提示的内容，我试了在字符串里添加 \n 和 \r\n 都没有换行的效果，本来想换一个方法实现，但是不知道为啥，忽然那股觉得一定有解决方法的劲儿又上来了，果然，被我找到了解决方法，感谢这篇博客呀~ 【element-ui】messageBox弹窗提示消息换行问题...
Element 设置 MessageBox的大小
m0_72295598的博客
05-01 3433
有一个注意的点，宽度必须要设置为 max-width 或 min-width 才有效，直接设置 width 是不生效的，而高度直接设置 height 就行。Element官网提供了 MessageBox 的 style 样式配置项，我们按要求配置就行。
Element UI的Message Box组件宽度调整适配移动端
qq_40507015的博客
02-20 2677
Element UI的Message Box组件宽度调整，自适应，适配移动端，Element UI的组件的默认宽度为420px，远超过屏幕宽度。
【Vue ElementUI】 如何修改消息提示框样式---messageBox
sumimg的博客
02-01 8557
一、前言 在窄屏模式下（移动端），提示框的宽度太宽，希望降低宽度。 应当如何修改 ElementUI 的样式呢？ 二、情景还原 // 弹出注销提示框 this.$confirm('确认注销吗?', '提示', { }).then(() => { this.$message({ message: '已成功注销', type: 'success' }) }).catch(() => { /* 用户取消注销 */ }) ... <style scoped> ..
Vue ElementUI 修改消息提示框样式—messageBox 的大小
蓝胖子的博客
02-26 5283
Vue ElementUI 修改消息提示框样式—messageBox 的大小
element ui 对话框设置固定宽度
seimeii的博客
05-19 1962
element ui 对话框设置固定宽度
el-message-box样式
yujiabao702的博客
04-04 676
需求：我们使用this.$message.success(message)时，如果message内容过多，会导致 $message弹框很长超出屏幕，所以此时需要给$message一个宽高样式。思路：利用消息框的自定义类名 customClass属性，然后另外写一个 ,不要加 scoped,将样式写在这里面,也不要加 /deep/
【Vue】elementUI-MessageBox组件相关
SZnAl的博客
03-21 1645
elementUI-messageBox相关问题
vue + emelent弹窗按钮样式修改
qq_41241504的博客
11-26 2004
vue + emelent弹窗按钮样式修改
VUE3修改MessageBox弹框的按钮样式
qq_44915190的博客
09-06 6032
VUE3修改MessageBox弹框的按钮样式
element ui的MessageBox弹框的遮罩加点击事件
06-10
在Element UI中，MessageBox弹框的遮罩同样可以添加点击事件。可以使用以下代码给遮罩添加点击事件： ```javascript this.$msgbox({ title: '提示', message: '这是一条提示信息', showCancelButton: true, beforeClose: (action, instance, done) => { if (action === 'confirm') { // 点击了确定按钮 } else if (action === 'cancel') { // 点击了取消按钮 } else { // 点击了遮罩层 } done(); // 关闭MessageBox } }); ``` 在beforeClose回调函数中，第三个参数done是一个回调函数，调用它可以关闭MessageBox。当用户点击遮罩层时，action参数的值为''，可以在这里处理遮罩层的点击事件。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值