【Vue2+Element-ui】el-dialog宽度适配

news2025/4/20 20:31:24

1、不适配问题

分辨率100%-页面

分辨率150%-页面

在项目中,我开发分辨率一直是100%,但是客户使用的分辨率不相同,所以宽度要适配

2、解决-封装mixins.js

1)、封装的mixins

我将宽度设置成动态的,因为我的项目中需求不同。

export const dialogWidthMixin = {
  // 动态修改默认宽度
  data() {
    return {
      dialogWidth: 0,
      defWidth: 600,
    };
  },
  mounted() {
    window.onresize = this.setDialogWidth;
  },
  methods: {
    setDialogWidth() {
      const val = document.body.clientWidth;
      if (val < this.defWidth) {
        this.dialogWidth = "100%";
      } else {
        this.dialogWidth = `${this.defWidth}px`;
      }
    },
  },
  beforeDestroy() {
    window.onresize = null; // 清理事件
  },
};

 2)、vue页面中引用

// template中引用    
<el-dialog
      class="mydialogclass"
      :visible.sync="avueuploadVisibel"
      append-to-body
      top="10%"
      :width="dialogWidth"  // 动态赋值宽度
      title="学习记录附件"
    >
      <avueupload
        :label="'附件'"
        :prop="'learningRecord'"
        :proId="proId"
        :carnumber="carnumber"
        @submitBlack="submitBlack"
        ref="avueuploadref"
      ></avueupload>
</el-dialog>


// script中
import { dialogWidthMixin } from '@/mixins/dialogWidthMixin'

mixins: [dialogWidthMixin],
created() {
    // 弹框宽度动态修改
    this.defWidth = 600  
    this.setDialogWidth() //调用适配方法
},

灵感来源于:实现ElementUI Dialog宽度响应式变化-CSDN博客

我是在进行了封装 。

3、拓展-mixins

1)、简介

mixins(混入),是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins 是一个 js 对象,它可以包含我们组件中 script 项中的任意功能选项,如:data、components、methods、created、computed 等等。我们只要将公用的功能以对象的方式传入 mixins 选项中,当组件使用 mixins 对象时所有 mixins 对象的选项都将被混入该组件本身的选项中来,这样就可以提高代码的重用性,并易于后期的代码维护。

注意:mixins定义的变量和引用的页面定义的变量不可以一致

先写到这儿~~~~下次编辑,下班~~~


 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2258036.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

css矩形样式,两边圆形

废话不多说&#xff0c;代码如下&#xff0c;直接拷贝即可使用&#xff1a; index.vue文件 <template><view class"wrap"><view class"tabs"><view class"tab active"><view class"name">标签</view…

【OpenCV】图像阈值

简单阈值法 此方法是直截了当的。如果像素值大于阈值&#xff0c;则会被赋为一个值&#xff08;可能为白色&#xff09;&#xff0c;否则会赋为另一个值&#xff08;可能为黑色&#xff09;。使用的函数是 cv.threshold。第一个参数是源图像&#xff0c;它应该是灰度图像。第二…

使用微信小程序调用飞桨PaddleX平台自行训练的模型——微信小程序用训练的牡丹花模型Demo测试

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大二学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门专栏&#xff1a;&#x1f387;【MySQL&#xff0…

Wordpress设置固定链接形式后出现404错误

比如固定连接设置为 /archives/%post_id%.html 这种形式&#xff0c;看起来比较舒服。对搜索引擎也友好。 出现404需要设置伪静态

JavaWeb学习--cookie和session,实现登录的记住我和验证码功能

目录 &#xff08;一&#xff09;Cookie概述 1.什么叫Cookie 2.Cookie规范 3.Cookie的覆盖 4.cookie的最大存活时间 ​​​​​​&#xff08;Cookie的生命&#xff09; &#xff08;二&#xff09; Cookie的API 1.创建Cookie&#xff1a;new 构造方法 2.保存到客户端浏…

Linux网络测试指令

Ping Ping命令是一个网络工具&#xff0c;用于测试主机之间的可达性。它通过发送ICMP&#xff08;Internet Control Message Protocol&#xff09;回声请求消息到目标主机&#xff0c;并等待接收ICMP回声应答消息来判断目标是否可达以及测量往返时间。Ping命令对于诊断网络连接…

【伪代码】数据结构-期末复习 线性表

目录 例1 矩阵相乘 线性表 2.1 线性表的类型定义 例2-1 求并集 LALA∪LB 例2-2 有序表归并 2. 2 线性表的顺序表示和实现 1&#xff0e;构造空表 2&#xff0e;插入 3&#xff0e;删除 4&#xff0e;定位 顺序表的优点&#xff1a; 顺序表的缺点&#xff1a; 例…

<C++11> 智能指针

目录 前言 C11和boost中智能指针的关系 一、智能指针的使用及原理 1. 智能指针介绍 2. 智能指针的使用 3. 智能指针的原理 二、C中的智能指针 1. auto_ptr 2. unique_ptr 3. shared_ptr std::shared_ptr的基本设计 shared_ptr的线程安全问题 定制删除器 4. weak_ptr shared_pt…

书生实战营第四期-进阶岛第六关-MindSearch 快速部署

一、开发环境配置 1、打开codespace主页&#xff0c;选择Blank模板进行创建 Codespaces 2、创建conda环境隔离并安装依赖 conda create -n mindsearch python3.10 -y conda init 因为是新建的codespace&#xff0c;在第一次创建conda环境时&#xff0c;需要conda init 然后再…

ViT学习笔记(二) Patch+Position Embedding阶段的详细推演与理解

我认为讲得最好的一个文章&#xff1a;Vision Transformer详解-CSDN博客 有很多文章&#xff0c;自己并没有完全正确理解。 我的笔记&#xff0c;以ViT的标准应用为例&#xff1a; • 输入图像&#xff1a;输入图像的尺寸是224x224&#xff0c;且是RGB图像&#xff0c;因此输…

JS听到了强运的回响

正则表达式 介绍 正则表达式是用于匹配字符串中字符组合的模式&#xff0c;在JS中&#xff0c;正则表达式也是对象 通常用来查找&#xff0c;替换那些符合正则表达式的文本 就是筛选出符合条件的一类人 比如说 有人喜欢玩艾斯爱慕&#xff0c;那他喜欢的就是这一类人&…

工业4.0下的IT网络与OT网络

https://zhuanlan.zhihu.com/p/498984722 随着“中国制造2025”的深入推进&#xff0c;制药行业以手工为主的传统生产方式正在被以“工业4.0 ”为核心的自动化生产方式逐步替代。 为了实现生产自动化&#xff0c;很多制药企业都引入了由PLC&#xff08;可编程逻辑控制器 &am…

C# MVVM 牛牛的实现依赖注入和MVVM绑定(DependencyInjection+CommunityToolkit)

这段时间在网上发现搜索MVVM数据绑定时&#xff0c;发现很多都是最基本的数据绑定&#xff0c;完全没有考虑依赖注入的问题&#xff0c;这里实现一下我们的方法&#xff0c;让我们的数据绑定和依赖注入都变得简单起来。 安装资源包 首先我们要下载一下资源包DependencyInject…

gitee常见命令

目录 1.本地分支重命名 2.更新远程仓库分支 3.为当前分支设置远程跟踪分支 4.撤销已经push远程的代码 5.idea->gitee的‘还原提交’ 需要和本地当前的代码解决冲突 解决冲突 本地工作区的差异代码显示 本地commit和push远程 6.idea->gitee的‘将当前分支重置到此…

【JAVA高级篇教学】第二篇:使用 Redisson 实现高效限流机制

在高并发系统中&#xff0c;限流是一项非常重要的技术手段&#xff0c;用于保护后端服务&#xff0c;防止因流量过大导致系统崩溃。本文将详细介绍如何使用 Redisson 提供的 RRateLimiter 实现分布式限流&#xff0c;以及其原理、使用场景和完整代码示例。 目录 一、什么是限流…

Python画泰勒图

1. 安装画泰勒图的库 pip install SkillMetricsSkillMetrics库在图的设置细节&#xff08;模型标记符号、colorbar&#xff09;有很多不足&#xff0c;比如无法按颜色区分每个散点。 注意&#xff01;&#xff01;&#xff01; 提前算好数据的标准差、相关系数和中心化均方根…

可视化建模以及UML期末复习篇----UML图

这是一篇相对较长的文章&#xff0c;如你们所见&#xff0c;比较详细&#xff0c;全长两万字。我不建议你们一次性看完&#xff0c;直接跳目录找你需要的知识点即可。 --------欢迎各位来到我UML国&#xff01; 一、UML图 总共有如下几种&#xff1a; 用例图&#xff08;Use Ca…

【MySQL】——​​用一文领悟表的增删查改

目录 前言 &#x1f343;1.表的增加 &#x1f359;1.1增——insert &#x1f359;1.2插入否则更新 &#x1f364;1.2.1影响行说明 &#x1f342;2.表的查询 &#x1f358;2.1查询——select &#x1f358;2.2特殊表查询 &#x1f365;2.2.1添加表达式 &#x1f365;…

福昕PDF低代码平台

福昕PDF低代码平台简介 福昕PDF 低代码平台是一款创新的工具&#xff0c;旨在简化PDF处理和管理的流程。通过这个平台&#xff0c;用户可以通过简单的拖拽界面上的按钮&#xff0c;轻松完成对Cloud API的调用工作流&#xff0c;而无需编写复杂的代码。这使得即使没有编程经验的…

【数据结构实战】二叉树——从根节点到叶节点

&#x1f3dd;️专栏&#xff1a; 【数据结构实战篇】 &#x1f305;主页&#xff1a; f狐o狸x 目录 一、堆的应用 1.1 堆排序 1.2 topk问题 二、二叉树 2.1 二叉树链式结构的实现 2.2 二叉树的遍历 2.2.1 前序、中序以及后序遍历 2.2.2 层序遍历 2.3 节点个数以及高度等 2.3.…