vue入坑指南

兼容IE绝对是个坑,低版本IE很多根本跑不起来

坑一:IE请求不到数据

造成这种原因的是,vue-cli在IE下运行,会在钩子函数出现 ReferenceError: “Promise”未定义

解决办法

  • step1:安装最新的web-pack-server 命令行:npm install –save-dev webpack-server

  • step2:安装Babel Polyfill

    • (1)npm install –save babel-polyfill
    • (2)在webpack.base.conf.js这个文件加入代码 require(“babel-polyfill”)
    • (3)在main.js里面添加代码 import “babel-polyfill”;
  • step3:重启项目npm run dev

有时候npm下载不下来,这时候可以试试淘宝镜像cnpm,当然cnpm先要用npm下载。由于淘宝镜像cnpm下载速度快于npm,所以很多小伙伴就无论下载什么都用cnpm,不是不可以,但是有些资源用cnpm会造成包数据丢失,所以有一些包还是要用npm下载的。无论什么下载,都只是一个下载工具,千万不要局限于下载工具本身。

坑二:解决浏览器中点击【Backspace】回退问题

readonly的input框上,点击【Backspace】按键,出现浏览器页面回退的问题(ie,火狐,360都有这个问题)。

解决办法:通过js监听backspace按键的按下事件:

  1. 如果标签不是input或者textarea则阻止Backspace
  2. input标签除了(TEXT、TEXTAREA、PASSWORD、NUMBER)这些类型,全部阻止Backspace
  3. input或者textarea输入框如果不可编辑则阻止Backspace
  4. 附代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

function banBackSpace(e) {
var ev = e || window.event;
//各种浏览器下获取事件对象
var obj = ev.relatedTarget || ev.srcElement || ev.target || ev.currentTarget;
//按下Backspace键
if (ev.keyCode == 8) {
var tagName = obj.nodeName //标签名称
//如果标签不是input或者textarea则阻止Backspace
if (tagName != 'INPUT' && tagName != 'TEXTAREA') {
return stopIt(ev);
}
var tagType = obj.type.toUpperCase();//标签类型
//input标签除了下面几种类型,全部阻止Backspace
if (tagName == 'INPUT' && (tagType != 'TEXT' && tagType != 'TEXTAREA' && tagType != 'PASSWORD' && tagType != 'NUMBER')) {
return stopIt(ev);
}
//input或者textarea输入框如果不可编辑则阻止Backspace
if ((tagName == 'INPUT' || tagName == 'TEXTAREA') && (obj.readOnly == true || obj.disabled == true)) {
return stopIt(ev);
}
}
}
function stopIt(ev) {
if (ev.preventDefault) {
//preventDefault()方法阻止元素发生默认的行为
ev.preventDefault();
}
if (ev.returnValue) {
//IE浏览器下用window.event.returnValue = false;实现阻止元素发生默认的行为
ev.returnValue = false;
}
return false;
}

$(function() {
//实现对字符码的截获,keypress中屏蔽了这些功能按键
document.onkeypress = banBackSpace;
//对功能按键的获取
document.onkeydown = banBackSpace;
})
|