软件开发面试问题大全及答案大全_上海市政网网址_免费外国网站浏览器_做微商如何引流推广怎么找客源

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-dialogclass="mydialogclass":visible.sync="avueuploadVisibel"append-to-bodytop="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定义的变量和引用的页面定义的变量不可以一致

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

---