[英]Vue project: object does not support this property or method “hasOwnProperty” IE11
我当时正在使用vue高级Webpack模板开发vue应用程序,但是我对IE浏览器的关注并不多,但是今天我尝试了一下,但遇到了非常奇怪的错误。
我在组件的安装函数中有一些用Highcharts渲染的迷你图,我认为出现此错误的地方是:
options = Highcharts.merge(defaultOptions, options);
我使用babel- polyfill,我的.babelrc配置是这样的:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": [
"Chrome >= 52",
"FireFox >= 44",
"Safari >= 7",
"Explorer 11",
"last 4 Edge versions"
]
},
"useBuiltIns": true,
"debug": true
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs",
"dynamic-import-node"]
}
}
}
在webpack.base.config.js中,我配置了这个加载器:
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('i18n'), resolve('test'),
resolve('node_modules/webpack-dev-server/client')]
},
任何帮助将不胜感激,谢谢!
List.vue的相关来源:
import createSmallCharts from './smallChart';
function refreshCharts(elements) {
createSmallCharts(elements);
}
...
mounted() {
const elements = this.$refs['currency-table-
body'].querySelectorAll('.table__price-graph');
refreshCharts(elements);
},
以及createSmallCharts的来源
import * as Highcharts from 'highcharts/highcharts';
// Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
// can take some seconds, so we split the input into chunks and apply them in timeouts
// in order avoid locking up the browser process and allow interaction.
function createSmallCharts(elements) {
const time = +new Date();
let stringdata;
let data;
let n = 0;
for (let i = 0; i < elements.length; i += 1) {
const element = elements[i];
stringdata = element.getAttribute('data-sparkline');
data = stringdata.split(', ').map(dataEl => parseFloat(dataEl));
Highcharts.SparkLine(element, {
series: [{
data,
pointStart: 1,
pointInterval: 24 * 3600 * 1000,
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
},
},
}],
plotOptions: {
series: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 3,
},
},
},
},
},
tooltip: {
formatter: () => false,
},
});
// If the process takes too much time, run a timeout to allow interaction with the browser
if (new Date() - time > 500) {
elements.splice(0, i + 1);
setTimeout(createSmallCharts, 0);
break;
}
}
}
export { createSmallCharts as default };
最后,SparkLine的定义为:
import Highcharts from 'highcharts/highcharts';
Highcharts.SparkLine = function SparkLine(...params) {
const hasRenderToArg = typeof a === 'string' || params[0].nodeName;
let options = params[hasRenderToArg ? 1 : 0];
const defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || this,
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
width: 120,
height: 20,
style: {
overflow: 'visible',
},
// small optimalization, saves 1-2 ms each sparkline
skipClone: true,
},
title: {
text: '',
},
credits: {
enabled: false,
},
xAxis: {
labels: {
enabled: false,
},
title: {
text: null,
},
startOnTick: false,
endOnTick: false,
tickPositions: [],
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false,
},
title: {
text: null,
},
tickPositions: [0],
},
legend: {
enabled: false,
},
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
hideDelay: 0,
shared: true,
padding: 0,
positioner(w, h, point) {
return {
x: point.plotX - (w / 2),
y: point.plotY - h,
};
},
},
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1,
},
},
marker: {
radius: 1,
states: {
hover: {
radius: 2,
},
},
},
fillOpacity: 0.25,
},
column: {
negativeColor: '#910000',
borderColor: 'silver',
},
},
};
options = Highcharts.merge(defaultOptions, options); // I think ERROR is here
return hasRenderToArg ?
new Highcharts.Chart(params[0], options, params[2]) :
new Highcharts.Chart(options, params[1]);
};
尝试将其导入到main.js
文件顶部,如下所示:
import 'babel-polyfill'
至少这为我解决了这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.