element-ui 移动端适配修改

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

页面布局组件

通过col和row实现对页面进行24栏栅格布局，但在移动端，栅格会出现过小的现象，因此限制span和gutter以及flex等属性在pc端有效。
分栏偏移会使得移动端布局超出屏幕，因此也限制了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表单组件

form 表单组件默认的label和content是左右结构，如果label过长，在移动端就会导致content过小，因此将form表单在移动端（屏幕宽度小于720px）改为上下结构。由于form表单为我们提供了label与content相对位置为上下结构的样式和属性，因此只需要在移动端将label改为top模式即可。
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改为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;} else if (this.form.labelWidth === 'auto') {ret.marginLeft = this.elForm.autoLabelWidth;}} else {ret.marginLeft = labelWidth;}return ret;},}}
</script>

dialog组件

dialog组件提供了width属性让使用者可以自定义弹框窗口的宽度，但是在移动端，该属性可能导致弹框窗口超出移动端屏幕的现象，因此将移动端弹框窗口宽度默认设置为80%。
此外本次修改还提供了为移动端设置弹框窗口宽度的属性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组件

弹出款组件同dialog组件类似，提供了width属性让使用者可以自定义弹框窗口的宽度，将移动端弹框窗口宽度默认设置为70%。
本次修改还提供了为移动端设置弹框窗口宽度的属性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'"><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组件

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

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

message-box组件

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

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

cascader组件

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

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

notification组件

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

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

element-ui 移动端适配修改相关推荐

bind-html自动换行,vue element ui this.$alert 样式修改，长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果问题 ...
element ui 的 tips 样式修改
新年三,旧三年,学完三年又三年.程序是个永远学不完的一个坑.今天就来,以前我从事8年前端开发的姐夫对我说过,css才是最难搞的什么js,ES,ts其实都不难. 当时的我不屑一顾!你怕不是在和我开玩笑哦 ...
Element UI——滚动条组件(ElScrollBar)修改.el-scrollbar__wrap和el-scrollbar__view的CSS属性
基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
Vue UI 组件库（移动端常用 UI 组件库，PC 端常用 UI 组件库，Element UI基本使用，Element UI按需引入）
文章目录 Vue UI 组件库 7.1 移动端常用 UI 组件库 7.2 PC 端常用 UI 组件库 7.3 Element UI基本使用 7.4 Element UI按需引入 Vue UI 组件库 ...
Vue3:基础项目UI框架PC端（Element ui，view-ui-plus，Ant Design Vue）
1.Element ui 文档已经更新至Vue3,可以放心使用,在使用Element ui的时候注意在使用弹性布局的时候,Element ui中的Table 表格会出现缩放无法自适应问题. 安装 $ ...
vue-cli3.0结合lib-flexible、px2rem实现移动端适配，完美解决第三方ui库样式变小问题
vue-cli3.0结合lib-flexible.px2rem实现移动端适配,完美解决第三方ui库样式变小问题参考文章: (1)vue-cli3.0结合lib-flexible.px2rem实现移动 ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
修改element ui tree 搜索功能，实现分级搜索，关键字高亮
element ui 里面的tree 自带的搜索功能是默认搜索的全部数据,有关键字的显示,没有的不显示需求: 在element UI tree 原有功能不变的情况下新加 1)搜索 tree 时,如果 ...

element-ui 移动端适配修改

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

页面布局组件

form表单组件

dialog组件

popover组件

message组件

message-box组件

cascader组件

notification组件

element-ui 移动端适配修改相关推荐

最新文章

热门文章