vue页面同时适配手机端和PC端

最新推荐文章于 2024-05-27 10:34:58 发布

MW0309

最新推荐文章于 2024-05-27 10:34:58 发布

阅读量3.7k

点赞数 5

分类专栏： Vue 文章标签： vue.js javascript elementui 适配器模式

本文链接：https://blog.csdn.net/qq_42222342/article/details/126426673

版权

Vue 专栏收录该内容

64 篇文章 4 订阅

订阅专栏

用到的技术点

1.判断是否是PC端

2.@media 屏幕适配常用尺寸

3.vue watch 监听

4.document.body.clientWidth 获取屏幕尺寸

<template>
    <div class="body">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" :width="isPC ? '500' : '110'">
            </el-table-column>
            <el-table-column prop="name" label="姓名" :width="isPC ? '200' : '110'">
            </el-table-column>
            <el-table-column prop="address" label="地址" ::width="isPC ? '300' : '110'">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            screenWidth: 0,
            isPC: this.isPCNot(),
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
    watch: {
        screenWidth: {
            handler: function (val, oldVal) {
                if (val < 750) {
                    this.isPC = false
                } else {
                    this.isPC = true
                }
                console.log(this.isPC);
            },
        },

    },
    mounted() {
        this.screenWidth = document.body.clientWidth
        window.onresize = () => {
            return (() => {
                this.screenWidth = document.body.clientWidth
            })()
        }
    },
    methods: {
        isPCNot() {
            var userAgentInfo = navigator.userAgent;
            var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
            var flag = true;
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false;
                    break;
                }
            }
            return flag;
        }
    }
};
</script>

<style scoped>
@media screen and (max-width: 750px) {
    .body {
        width: 90%;
        margin: 0 auto;
        background-color: #f1f1f1;
    }
}

@media screen and (min-width: 750px) {
    .body {
        margin: 0 auto;
        width: 50%;
        background-color: #f1f1f1;
    }
}
</style>