前不久刚发布了Yaf-element,平时开发多数使用谷歌内核的浏览器;

而刚好element在谷歌内核浏览器运行完美;

今天在使用Yaf-element做完一个项目交给客户之后;

他平时不怎么用电脑,浏览器也没升级;

因此使用万恶的IE浏览器下发现了很多问题;

例如:打开页面一篇空白

table 搜索问题

函数识别问题等

今天刚好有空来解决一波:

问题主要是 ElementUI + vue 中使用了一些ES6的语法,

而IE对ES6的支持程度很低,

因此我们要兼容IE就必须把ES6语法替换成ES5;

刚好browser.js 可以解决这个问题;首先百度搜索一下browser.js并下载

引入到项目中将js段加上type="text/babel"

var vm = new Vue({

el: '#app',

data:{

},

methods: {

},

mounted: function () {

},

})

就这样即可解决Element ui 在IE11下的问题;

这里暂时解决了大部分问题,还有一些隐藏极深的问题;

0b14a7ceff9b07f408def70428955e20.png

比如:在表格使用 搜索table.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))

在IE11下会出现Error compiling template,我查了很多资料都没有解决方法,很多朋友可能也没有再IE浏览器的下的兼容性;

因此并有复现出来;

大概思考了一下:

我们使用browser.js并且在javascript 上加上 type="text/babel来兼容ES6语法

使部分问题得到了解决;

然而以下搜索语法是在页面上加载的,而不是在

该代码块中;因此以下代码并不在browser.js 的范围内,因此在IE中依然不兼容;

:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"

style="width: 100%">

label="Date"

prop="date">

label="Name"

prop="name">

align="right">

v-model="search"

size="mini"

placeholder="输入关键字搜索"/>

size="mini"

@click="handleEdit(scope.$index, scope.row)">Edit

size="mini"

type="danger"

@click="handleDelete(scope.$index, scope.row)">Delete

我想了一下,既然兼容不了,我们只能将以上这一段代码写成Es5语法了,

毕竟Es6语法是兼容es5语法的,因此我们替换以上的语法为:table.filter(function(data){return !search || data.'.$value.'.toLowerCase().indexOf(search.toLowerCase()) > -1

总结:箭头函数以及includes函数都是ES6中的语法,我们将箭头函数以及includes函数替换即可兼容IE9以上的浏览器;

Logo

前往低代码交流专区

更多推荐