Comment réécrire le plug-in JS dans le plug-in Vue

Cet article explique avec vous comment réécrire un plug-in JS en plug-in Vue. Le contenu est très bon. Les amis dans le besoin peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

De nombreux amis qui sont nouveaux sur Vue souhaitent utiliser des plug-ins JS qui n'utilisent pas de frameworks dans Vue, mais constatent que cela n'a aucun effet.
Je posterai un exemple ici.
L'image ci-dessous est le rendu d'un plug-in

Tout d'abord, le code source du plug-in doit être téléchargé.
Trouvez le index.html à l'intérieur, trouvez les lignes 20 à 87 à l'intérieur, copiez-le, trouvez votre projet vue, créez un nouveau dossier, créez un nouveau fichier js avec le contenu suivant

import wavePng from './wave.png'
export default {
    install(Vue){
        Vue.directive('wave', {
            // 当指令绑定好之后，立即触发的方法
            inserted: function(el){
                start(el)
            },
            // 当指令的值变化后会触发update
            update: function(el, binding, vnode){
                if(binding.value){
                    start(el)
                }else{
                    stop()
                }   
            }
        })
    }
}

puis Collez le code du plug-in que vous venez de coller en bas. N'oubliez pas de supprimer la fermeture que le plug-in avait à l'origine. L'idée de cette modification est de la remplacer par le formulaire d'instructions personnalisé de Vue. Comment utiliser  ? Tout d'abord, vous devez ajouter
main.js

dans

import wave from './components/wave.js'
Vue.use(wave)

, puis lier les instructions aux éléments dont vous avez besoin. Voici une démo

<template>
  <p>
    </p>
<p><span>60%</span></p>
    <button>start</button>
    <button>stop</button>
  
</template>

<script>
import wave from &#39;./a&#39;
export default {
  data(){
    return{
      wave: true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.wave{width:200px;height:200px;overflow:hidden;border-radius:50%;background:rgba(255,203,103,.6);margin:100px auto;position:relative;text-align:center;display:table-cell;vertical-align:middle;}
.wave span{display:inline-block;color:#fff;font-size:20px;position:relative;z-index:2;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%)
}
.wave canvas{position:absolute;left:0;top:0;z-index:1;}
</style>

Le. la transformation finale est terminée, j'espère que cela pourra être utile aux amis qui découvrent Vue.

Recommandations associées :

Comment transférer des valeurs ​​​​entre les composants vue parent et enfant

$() fonction dans jQuery Comment utiliser

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!