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

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定义的变量和引用的页面定义的变量不可以一致

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

---

 

原文地址：https://blog.csdn.net/2301_76882889/article/details/144368944

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！