前端问题集锦

本文主要是记录一些工作中常遇到的问题，有些时候我们会发现，同一个问题好像在很久很久以前遇到过，但就是想不起来当初是怎么解决它的，可能百度了好久，可能请教了许多人，可能无意间，不知怎么的就把问题解决了，但是，好记性不如烂笔头，如果当时不做一些总结，不做一些记录，那下一次再遇到这样的问题，我们又会花同样多的时间，甚至更多的时间，来解决这些问题，NO！NO！NO！这不是一个程序猿该有的觉悟~

我倒是觉悟了，所以在此记录下我遇过的问题，希望这些记录也能帮助被代码操控的朋友们。

Element-UI

el-table

表头错位

解决办法：

关键性代码

    /* 解决table表头错位问题 */
    .el-table th.gutter {
        display: table-cell!important;
    }

当然，直接这样写在scoped限制的作用域中是不会生效的，对代码规范中css作用域限制比较严格的同学我们可以在前面用class样式+css穿透来提升样式权重，否则的话，直接在未被限制的style中添加样式即可，以下，二者选其一。

    <style scoped>
        /* 解决table表头错位问题 */
        .Condition >>> .el-table th.gutter {
            display: table-cell!important;
        }
    </style>

    <style>
        /* 解决table表头错位问题 */
        .el-table th.gutter {
            display: table-cell!important;
        }
    </style>

vue

事件

获取事件对象

方法：在参数中传递关键字 $event

    // template
    <button @click="Event($event)">点击我</button>

    // methods
    Event(e) {
        console.log(e);
    }

注意两点：

不使用圆括号，event被自动当作实参传入
使用圆括号，必须显式的传入event对象，如果不传入可能最终找到的是全局的window .event

SPA使用audio音频的时候报错

原因：缺少对应的loader，没有mp3格式的编译

解决办法：配置文件中增加对应的loader

    const path = require("path");
    ...
    module.exports = {
        ...
        build: {
            ...
            extend(config, ctx) {
                const vueLoader = config.module.rules.find((loader) => loader.loader === 'vue-loader');
                vueLoader.options.transformToRequire = {
                    audio: 'src'
                };
                config.module.rules.push({
                    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                    loader: 'url-loader',
                    options: {
                    limit: 10000,
                    name: process.env.NODE_ENV === 'production' ? path.posix.join('./', 'media/[name].[hash:7].[ext]') : path.posix.join('./', 'media/[name].[hash:7].[ext]')
                    }
                });
                ...
            }
        }
    }

移动端兼容

ios使用new Date获得NaN，安卓手机则是正常计算

    new Date('2019-04-28 23:59:59').getTime(); // ios获得NaN， Android正确获取时间

    new Date('2019/04/28 23:59:59').getTime(); // ios、Android正确获取时间

    // 正则表达式替换
    '2019-04-28 23:59:59'.replace(/\-/g, '/'); // 2019/04/28 23:59:59

判断用户手机是IOS还是安卓

    const userAgent = navigator.userAgent;
    isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1; // android终端
    isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端

予人玫瑰，手有余香！如果本博的某篇文章帮助了你，并且让你觉得想要放到自己的博客上，欢迎转载，转载请注明出处。

为能够给自己带来价值的东西付费，是再正常不过的事情，物质支持【右侧打赏】和精神支持【评论、转载】都是我持续总结，持续分享的最大动力！

有兴趣的朋友可以关注我的公众号：非梧不栖oy，微信可直接搜索关注或是下方扫码关注，公众号会同步本站的部分博客，您可以直接在手机上随时阅读到自己感兴趣的文章

总结和搜集一些工作中遇到的问题