5
votes

Vuetify.js - IE11 n'affiche pas les tables de données avec babel-polyfill

J'ai installé babel-polyfill en utilisant package.json (npm) dans un environnement laravel. J'utilise vuetify pour générer des tables. Cependant, lors de l'ouverture de la page rendant le tableau dans IE11, le tableau apparaît mais toutes les colonnes ont disparu (toutes les colonnes sont fusionnées en une seule colonne) et je ne peux pas interagir avec la table de données (j'ai des événements de clic sur la ligne qui fonctionnent bien dans Chrome, Firefox et Edge). Ai-je besoin de packages polyfill supplémentaires?

Package.json:

import babelPolyfill from 'babel-polyfill';
import Vuetify from 'vuetify'


window.Vue = require('vue');    
Vue.use(vueResource);
Vue.use(Vuetify);

app.js:

    "devDependencies": {
     ...
    "babel-polyfill": "^6.26.0",
     ...
   }

Merci pour toute aide!

EDIT: Il s'avère que c'était un bogue. Il semble avoir été corrigé dans la version 1.5.5.

laravel vue.js vuetify.js

1 commentaires

Ce n'est probablement pas un problème polyfill / JS, cela peut être confirmé par un manque d'erreurs dans le journal. Il s'agit probablement de problèmes de support CSS. Voyez ce qu'ils utilisent pour créer la grille et vérifiez le support dans IE11.

3 Réponses :

4
votes

Comme l'a déclaré Zach, il n'y a pratiquement pas de support pour E11. Le support Polyfill existe mais le support CSS fait défaut.

Si vous regardez les statistiques du navigateur, seul un petit nombre de personnes l'utilise encore. Vous devriez abandonner l'assistance si vous le pouvez.

L'utilisation d'une nouvelle technologie avec un programme très ancien a tendance à poser des problèmes.

0 commentaires

0
votes

Pour les nouveaux projets (utilisez Vue CLI v3)

npm install @ vue / cli -g

vue create my -app

vue add vuetify

Pour l'application existante:

npm install vuetify --save

Mettez à jour le main.js comme suit:

// vue.config.js

module.exports = {
  transpileDependencies:[/node_modules[/\\\\]vuetify[/\\\\]/]
}

Vous pouvez veulent également ajouter les styles par défaut:

// .babelrc
{
  "presets": ["@babel/preset-env"]
}

npm install @babel/preset-env --save-dev

Prise en charge d'IE 11 et de Safari 9:

// my-project/src/index.js
import 'babel-polyfill'
...
new Vue()

Vous devez ensuite mettre à jour le main.js comme suit:

npm install babel-polyfill --save

Si votre projet n'inclut pas déjà le preset-env Babel, vous devez l'ajouter comme suit:

// main.styl
@import '~vuetify/src/stylus/main' // Ensure you are using stylus-loader

et mettre à jour .babelrc p >

// index.js or main.js
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader

Étape importante:

Vue Cli v3 n'introduit pas automatiquement les supports IE11, vous devrez donc le configurer manuellement pour ce faire en ajoutant manuellement le paramètre transpileDependencies dans vue.config.js

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

C'est tout, ça devrait marcher. Profitez :)

Résultat:

1 commentaires

Si vous l'essayez en 11.0.9600 comme je dois le tester, cela ne fonctionne pas pour moi. Pouvez-vous confirmer cela?

0
votes

Vous avez probablement défini customProperties sur true dans les options du thème Vuetify. Il utilise des css-vars qui ne sont pas implémentés dans IE 11. Par conséquent, aucune couleur n'est affichée. La définition de customProperties sur false a résolu un problème similaire pour moi.

0 commentaires