element-ui 移动端适配修改

展示 element-ui 项目中移动端适配组件及代码修改

页面布局组件

1. 通过col和row实现对页面进行24栏栅格布局，但在移动端，栅格会出现过小的现象，因此限制span和gutter以及flex等属性在pc端有效。
2. 分栏偏移会使得移动端布局超出屏幕，因此也限制了offset以及响应式布局的属性等在pc端有效。

// row.js 修改内容exportdefault{computed:{// 新增用户设备是移动端的属性userAgentMobile(){return window.innerWidth <=720;}},render(h){returnh(this.tag,{// 限制属性flex的实现只有在pc端的情况下才有效class:['el-row',{'el-row--flex':!this.userAgentMobile &&this.type ==='flex'},this.justify !=='start'&&!this.userAgentMobile ?`is-justify-${this.justify}`:'',this.align !=='top'&&!this.userAgentMobile ?`is-align-${this.align}`:''],// 限制属性gutter只在pc端有效  style:!this.userAgentMobile ?this.style :{}},this.$slots.default);}}

// col.js 修改内容exportdefault{computed:{userAgentMobile(){// 计算当前窗口否是移动端return window.innerWidth <=720;}},render(h){let classList =[];let style ={};// 限制下列属性在pc端有效if(!this.userAgentMobile){if(this.gutter){
        style.paddingLeft =this.gutter /2+'px';
        style.paddingRight = style.paddingLeft;}['span','offset','pull','push'].forEach(prop=>{if(this[prop]||this[prop]===0){
          classList.push(
            prop !=='span'?`el-col-${prop}-${this[prop]}`:`el-col-${this[prop]}`);}});['xs','sm','md','lg','xl'].forEach(size=>{if(typeofthis[size]==='number'){
          classList.push(`el-col-${size}-${this[size]}`);}elseif(typeofthis[size]==='object'){let props =this[size];
          Object.keys(props).forEach(prop=>{
            classList.push(
              prop !=='span'?`el-col-${size}-${prop}-${props[prop]}`:`el-col-${size}-${props[prop]}`);});}});}returnh(this.tag,{class:['el-col', classList],
      style
    },this.$slots.default);}}

form表单组件

1. form 表单组件默认的label和content是左右结构，如果label过长，在移动端就会导致content过小，因此将form表单在移动端（屏幕宽度小于720px）改为上下结构。由于form表单为我们提供了label与content相对位置为上下结构的样式和属性，因此只需要在移动端将label改为top模式即可。
2. form表单提供了inline行内表单样式，在移动端会由于inline-block的设置导致form表单项错乱。因此将移动端的行内样式取消。

<template><!--form.vue修改内容--><!--labelPosition改为labelPositionMobiel适配移动端--><!--el-form-inline仅在pc端生效--><formclass="el-form":class="[
    labelPositionMobile ? 'el-form--label-' + labelPositionMobile : '',
    { 'el-form--inline': !userAgentMobile && inline }
  ]"><slot></slot></form></template><script>exportdefault{data(){return{userAgentMobile:''// 新增用户设备是移动端的属性}}computed:{// 如果是移动端form表单的label位置属性为top，否则根据传来的labelPosition值设置labelPositionMobile(){returnthis.userAgentMobile ?'top':this.labelPosition
      }},created(){// 根据屏幕大小计算移动端this.userAgentMobile = window.innerWidth <=720}}</script>

// form-item.vue 修改内容<script>exportdefault{computed:{labelStyle(){const ret ={};if(this.form.labelPositionMobile ==='top')return ret;// labelPosition改为labelPositionMobileconst labelWidth =this.labelWidth ||this.form.labelWidth;if(labelWidth){
          ret.width = labelWidth;}return ret;},contentStyle(){const ret ={};const label =this.label;if(this.form.labelPositionMobile ==='top'||this.form.inline)return ret;// labelPosition改为labelPositionMobileif(!label &&!this.labelWidth &&this.isNested)return ret;const labelWidth =this.labelWidth ||this.form.labelWidth;if(labelWidth ==='auto'){if(this.labelWidth ==='auto'){
            ret.marginLeft =this.computedLabelWidth;}elseif(this.form.labelWidth ==='auto'){
            ret.marginLeft =this.elForm.autoLabelWidth;}}else{
          ret.marginLeft = labelWidth;}return ret;},}}</script>

dialog组件

1. dialog组件提供了width属性让使用者可以自定义弹框窗口的宽度，但是在移动端，该属性可能导致弹框窗口超出移动端屏幕的现象，因此将移动端弹框窗口宽度默认设置为80%。
2. 此外本次修改还提供了为移动端设置弹框窗口宽度的属性mobileEndWidth，可通过该属性自定义移动端窗口的大小。

// /dialog/src/component.vue 修改内容<script>exportdefault{props:{// 添加移动端弹框宽度属性，默认为80%mobileEndWidth:{default:'80%',type: String
      },},data(){return{userAgentMobile:'',// 新增用户设备是移动端的属性}},computed:{style(){let style ={};if(!this.fullscreen){
          style.marginTop =this.top;if(!this.userAgentMobile){// pc端时if(this.width){// 传入的width属性有值
              style.width =this.width;// 弹框宽度为width定义的宽度}}else{// 移动端
            style.width =this.mobileEndWidth // 移动端窗口宽度属性的值}}return style;}},created(){this.userAgentMobile = window.innerWidth <=720// 检测当前屏幕大小是移动端},}</script>

popover组件

1. 弹出款组件同dialog组件类似，提供了width属性让使用者可以自定义弹框窗口的宽度，将移动端弹框窗口宽度默认设置为70%。
2. 本次修改还提供了为移动端设置弹框窗口宽度的属性mobileEndWidth，可通过该属性自定义移动端窗口的大小。

<!-- /popover/src/main.vue修改内容 --><template><span><!-- :style="{ width: width + 'px' }" 修改为 :style="style" --><transition:name="transition"@after-enter="handleAfterEnter"@after-leave="handleAfterLeave"><divclass="el-popover el-popper":class="[popperClass, content && 'el-popover--plain']"ref="popper"v-show="!disabled && showPopper":style="style"role="tooltip":id="tooltipId":aria-hidden="(disabled || !showPopper) ? 'true' : 'false'"><divclass="el-popover__title"v-if="title"v-text="title"></div><slot>{{ content }}</slot></div></transition><spanclass="el-popover__reference-wrapper"ref="wrapper"><slotname="reference"></slot></span></span></template><script>exportdefault{props:{// 添加移动端弹框宽度属性，默认为70%mobileEndWidth:{default:'70%',type: String
      }},computed:{// 新增style计算属性，定义弹出框的宽度style(){let style ={};if(window.innerWidth <=720){
          style.width =this.mobileEndWidth // 移动端的弹出框宽度}else{if(this.width){
            style.width =this.width // pc端的自定义弹出框宽度}}return style;}}}</script>

message组件

1. message组件内置了最小宽度为380px，在移动端可能存在超出屏幕的情况，因此设置移动端时最小宽度大小为80%。

// message.scss修改内容
@includeb(message){
  // 添加媒体查询规则，设置当屏幕最大宽度为475时最小宽度设为80%
  @media screen and(max-width: 475px){min-width: 80%;}}

message-box组件

1. message组件内置了宽度为420px，在移动端可能存在超出屏幕的情况，因此设置移动端时宽度大小为80%。

@includeb(message-box){
   // 添加媒体查询规则，设置当屏幕最大宽度为525px时宽度设为80%
  @media screen and(max-width: 525px){width: 80%;}}

cascader组件

1. 该组件设置了每一级过滤框最小宽度为180px，在移动端可能存在超出屏幕的情况，因此设置pc端时最小宽度生效。

// cascader-panel.sccc 修改内容
@includeb(cascader-menu){
  // 修改min-width: 180px;为媒体查询规则，屏幕最小宽度为720px时方可设置该元素的最小宽度
  @media screen and(min-width: 720px){min-width: 180px;}}

notification组件

1. 该组件设置了宽度为330px，在移动端可能存在超出屏幕的情况，因此设置移动端时宽度大小为70%。

// notification.scss 修改内容
@includeb(notification){
  // // 添加媒体查询规则，设置当屏幕最大宽度为475px时宽度设为70%
  @media screen and(max-width: 475px){width: 70%;}}