Comment ajouter des scripts JS externes aux composants VueJS
j'ai utiliser deux scripts externes pour les passerelles de paiement. Maintenant les deux sont mis à l'index.html fichier. Cependant, je ne veux pas charger ces fichiers au début. La passerelle de paiement est nécessaire seulement lorsque l'utilisateur ouvre un composant spécifique (à l'aide d'un routeur). Est-il de toute façon pour y parvenir?
5 réponses
un moyen simple et efficace de résoudre cela, c'est en ajoutant votre script externe dans la vue mounted() de votre composant. Je vais vous illustrer avec l' Google Recaptcha script:
<template>
.... your HTML
</template>
<script>
export default {
data: () => ({
......data of your component
}),
mounted() {
let recaptchaScript = document.createElement('script')
recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
document.head.appendChild(recaptchaScript)
},
methods: {
......methods of your component
}
}
</script>
en utilisant webpack et vue loader vous pouvez faire quelque chose comme ça
il attend que le script externe se charge avant de créer le component, donc les vars globar etc sont disponibles dans le component
components: {
SomeComponent: () => {
return new Promise((resolve, reject) => {
let script = document.createElement(‘script’)
script.onload = () => {
resolve(import(someComponent’))
}
script.async = true
script.src = ‘https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=places’
document.head.appendChild(script)
})
}
},
utilisez-vous L'un des modèles de démarrage Webpack pour vue (https://github.com/vuejs-templates/webpack)? Il est déjà équipé d'un chargeur de vue (https://github.com/vuejs/vue-loader). Si vous n'utilisez pas de modèle de démarrage, vous devez configurer webpack et vue-loader.
vous pouvez alors import vos scripts vers les composants pertinents (un seul fichier). Avant cela, vous devez vousexport à partir de vos scripts de ce que vous voulez import pour vos composants.
ES6 d'importation:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
- http://exploringjs.com/es6/ch_modules.html
~Edit~
Vous pouvez importer à partir de ces emballages:
- https://github.com/matfish2/vue-stripe
- https://github.com/khoanguyen96/vue-paypal-checkout
Vous pouvez utiliser chargeur de vues et coder vos composants dans leurs propres fichiers (composants de fichiers uniques). Cela vous permettra d'inclure des scripts et des css sur une base de composants.
export default {
data () {
return { is_script_loading: false }
},
created () {
// If another component is already loading the script
this.$root.$on('loading_script', e => { this.is_script_loading = true })
},
methods: {
load_script () {
let self = this
return new Promise((resolve, reject) => {
// if script is already loading via another component
if ( self.is_script_loading ){
// Resolve when the other component has loaded the script
this.$root.$on('script_loaded', resolve)
return
}
let script = document.createElement('script')
script.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
script.async = true
this.$root.$emit('loading_script')
script.onload = () => {
/* emit to global event bus to inform other components
* we are already loading the script */
this.$root.$emit('script_loaded')
resolve()
}
document.head.appendChild(script)
})
},
async use_script () {
try {
await this.load_script()
// .. do what you want after script has loaded
} catch (err) { console.log(err) }
}
}
}
Veuillez noter que this.$root est un peu hacky et vous devez utiliser un vuex ou eventHub solution pour les événements mondiaux à la place.
vous transformez ce qui précède en un composant et l'utilisez là où c'est nécessaire, il ne chargera le script que s'il est utilisé.