学习vue2-elm项目笔记

发表于 更新于 分类于

项目地址

bailicangdu/vue2-elm

orientationchange事件

描述：事件在设备的纵横方向改变时触发。

这个事件只能在移动设备或者移动模拟器上触发。

和resize配合使用，一个电脑端，一个移动端。

用来确定根字体大小。

代码位置为：src/config/rem.js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 立即执行函数 IIFE
(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            // 设置根字体大小
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
    if (!doc.addEventListener) return;
    // 绑定窗口变化事件。
    win.addEventListener(resizeEvt, recalc, false);
    // 文档加载完成设置一次根字体大小，即初始化。
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

Swiper移动端轮播图插件

官网地址：Swiperv6.8.1 - Most Modern Mobile Touch Slider

中文网地址：Swiper中文网

根据代码判断操作系统

代码位置：src/page/download/download.vue。

在created钩子中有如下代码：

let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// ...其余代码

navigator 在 MDN 文档中的描述为：

Navigator接口表示用户代理的状态和标识。 它允许脚本查询它和注册自己进行一些活动。

除了 userAgent 之外，还有一些常用的属性：

  • clipboard：剪切板对象，可以获取剪切板的内容。
  • onLine：网络的在线状态。
  • language：浏览器语言，中文为 zh-CN。

该对象上的属性被废弃和实验性质的都不少，兼容性不是特别好。

…