element-ui 移动端适配修改

这篇具有很好参考价值的文章主要介绍了element-ui 移动端适配修改。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

页面布局组件

  1. 通过col和row实现对页面进行24栏栅格布局,但在移动端,栅格会出现过小的现象,因此限制span和gutter以及flex等属性在pc端有效。
  2. 分栏偏移会使得移动端布局超出屏幕,因此也限制了offset以及响应式布局的属性等在pc端有效。
// row.js 修改内容
export default {
  computed: {
    // 新增用户设备是移动端的属性
    userAgentMobile() {
      return window.innerWidth <= 720;
    }
  },
  render(h) {
    return h(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 修改内容
export default {
  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 (typeof this[size] === 'number') {
          classList.push(`el-col-${size}-${this[size]}`);
        } else if (typeof this[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]}`
            );
          });
        }
      });
    }

    return h(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端生效-->
  <form class="el-form" :class="[
    labelPositionMobile ? 'el-form--label-' + labelPositionMobile : '',
    { 'el-form--inline': !userAgentMobile && inline }
  ]">
    <slot></slot>
  </form>
</template>
<script>
  export default {
    data() {
      return {
        userAgentMobile: '' // 新增用户设备是移动端的属性
      }
    }
    computed: {
      // 如果是移动端form表单的label位置属性为top,否则根据传来的labelPosition值设置
      labelPositionMobile() {
        return this.userAgentMobile ? 'top' : this.labelPosition
      }
    },
    created() {
      // 根据屏幕大小计算移动端
      this.userAgentMobile = window.innerWidth <= 720
    }
  }
</script>
// form-item.vue 修改内容
<script>
  export default {
    computed: {
      labelStyle() {
        const ret = {};
        if (this.form.labelPositionMobile === 'top') return ret; // labelPosition改为labelPositionMobile
        const 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改为labelPositionMobile
        if (!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;
          } else if (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>
  export default {
    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">
      <div
        class="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'"
      >
        <div class="el-popover__title" v-if="title" v-text="title"></div>
        <slot>{{ content }}</slot>
      </div>
    </transition>
    <span class="el-popover__reference-wrapper" ref="wrapper" >
      <slot name="reference"></slot>
    </span>
  </span>
</template>
<script>
  export default {
    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修改内容
@include b(message) {
  // 添加媒体查询规则,设置当屏幕最大宽度为475时最小宽度设为80%
  @media screen and (max-width: 475px) {
    min-width: 80%;
  }
}

message-box组件

  1. message组件内置了宽度为420px,在移动端可能存在超出屏幕的情况,因此设置移动端时宽度大小为80%。
@include b(message-box) {
   // 添加媒体查询规则,设置当屏幕最大宽度为525px时宽度设为80%
  @media screen and (max-width: 525px) {
    width: 80%;
  }
}

cascader组件

  1. 该组件设置了每一级过滤框最小宽度为180px,在移动端可能存在超出屏幕的情况,因此设置pc端时最小宽度生效。
// cascader-panel.sccc 修改内容
@include b(cascader-menu) {
  // 修改min-width: 180px;为媒体查询规则,屏幕最小宽度为720px时方可设置该元素的最小宽度
  @media screen and (min-width: 720px){
    min-width: 180px;
  }
}

notification组件

  1. 该组件设置了宽度为330px,在移动端可能存在超出屏幕的情况,因此设置移动端时宽度大小为70%。
// notification.scss 修改内容
@include b(notification) {
  // // 添加媒体查询规则,设置当屏幕最大宽度为475px时宽度设为70%
  @media screen and (max-width: 475px) {
    width: 70%;
  }
}

文章来源地址https://www.toymoban.com/news/detail-415894.html

到了这里,关于element-ui 移动端适配修改的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 修改element-ui源码

    element-ui修改源码 1.首先,从git上拉取element的源码 2.安装依赖 npm install 3.修改 packages 中的源码,然后进行打包 npm run dist 4.找到你的项目中的 node_modules 包下的 element-ui 文件夹下的 lib 包,用你修改好后打包生成的 lib 包进行替换即可生效 下载链接在官网底部

    2024年02月11日
    浏览(31)
  • 修改element-ui主题颜色

    方法1:创建一个公共的更改的CSS文件,在CSS文件里写入 $–color-primary:加颜色,最后在main.js中引入 方法2:借助在线主题生成工具,设置自己想要的颜色,下载主题,解压之后,在main.js 中引入 方法3:安装主题工具 1、安装主题工具 2、从 npm 安装theme 3、初始化变量文件 4、根

    2024年02月11日
    浏览(52)
  • element-ui折叠面板怎么修改样式

    修改前 因为组件封装,要使用样式穿透来修改… 注意需要把需要样式穿透的类单独拿出来,不能包裹在scss格式的类里了 修改后 展开… 最后这个缝隙可以用边框来填补,至于伪类加横杠最好不要用,因为展开和折叠的时候会出现一瞬间白线

    2024年02月12日
    浏览(42)
  • element-ui 修改时间选择器样式

    因为elementUI的时间选择器el-date-picker是将元素直接挂载到页面的 body 中,而非自身元素下,所以使用 /deep/ 穿透也是无法定位到元素的。 解决方案: 利用时间选择器的 popper-class 属性,给其设置样式。 然后再在src/assets下创建style.scss,在该文件里面进行样式的编写 最后再引入

    2024年02月11日
    浏览(41)
  • vue + element-ui 穿梭框+上下移动、置顶置底功能

    预览效果:  代码 :

    2024年02月11日
    浏览(39)
  • vue如何让element-ui的table列表中展示多张图片(可放大)的效果?

      效果图基本就是这样,如果需要此效果的小伙伴可以往下看 ; 1、先简单的复述一下原理           因为一个table表格里面要存放一张或多张图片,所以前端接受到图片相关的数据肯定是个数组类型的,所以此时就要用到 v-for=\\\"(item,index) in xxx\\\" :key=\\\"index\\\" 的方法来实现,说

    2024年02月11日
    浏览(37)
  • 自定义日历.element-ui 修改时间选择器样式

    目录 一、自定义日历 二、时间选择样式自定义 先上效果图 已经封装成vue组件,可选择切换年月:  因 element-UI的时间选择器 el-date-picker 是将元素直接挂载到页面的 body 中,而非自身元素下,所以使用  /deep/、 、  ::v-deep  等穿透无法定位到元素。 解决方案: 利用时间选择

    2024年02月12日
    浏览(35)
  • 关于element-ui表格 鼠标悬停背景颜色修改问题

    element-ui鼠标悬停时行背景色默认为白色,当表格字体为白色时容易看不到文字,因此需要修改鼠标悬停时的背景色。 html使用el-table后,在css样式中添加以下代码即可修改鼠标悬停后的背景色。(未使用scss和less) 同时补充鼠标点击后行高亮颜色修改,需要在el-table标签内添加

    2024年02月11日
    浏览(39)
  • 【element-ui】form表单动态修改rules校验项

    在项目开发过程中,该页面有暂存和提交两个按钮,其中暂存和提交必填项校验不一样,此时需要动态增减必填项校验 ,解决方法如下: 增加rules校验项 删除rules校验项

    2024年02月04日
    浏览(43)
  • VUE element-ui实现表格动态展示、动态删减列、动态排序、动态搜索条件配置、表单组件化。

        1、本组件支持列表的表头自定义配置,checkbox实现 2、本组件支持列表列排序,vuedraggable是拖拽插件,上图中字段管理里的拖拽效果 ,需要的话请自行npm install 3、本组件支持查询条件动态配置,穿梭框实现 https://download.csdn.net/download/askuld/88216937

    2024年01月16日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包