vue入坑指南

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. 附代码：

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;
})

vue权限设置（按钮级别）

简单理下思路，共三种实现方式：

1、 store写入全权限，按钮传入具体权限
2、 自定义指令，路由meta写入具体权限，按钮直接v-has
3、 定义权限类型，按钮对号入座

只有第一种方法比较完善，其余两种限制比较多。都比较麻烦，没想到更好的办法。