Heim >Web-Frontend >js-Tutorial >So schreiben Sie ein JS-Plugin in ein Vue-Plugin um
In diesem Artikel erfahren Sie, wie Sie ein JS-Plugin in ein Vue-Plugin umschreiben. Der Inhalt ist sehr gut. Ich hoffe, er kann allen helfen.
Viele Freunde, die neu bei Vue sind, möchten einige JS-Plug-Ins verwenden, die keine Frameworks in Vue verwenden, stellen jedoch fest, dass dies keine Wirkung hat.
Ich werde hier ein Beispiel posten.
Das Bild unten zeigt das Rendering eines Plug-Ins
Zunächst muss der Plug-In-Quellcode heruntergeladen werden.
Suchen Sie das index.html
darin, suchen Sie darin die Zeilen 20 bis 87, kopieren Sie es, suchen Sie Ihr Vue-Projekt, erstellen Sie einen neuen Ordner, erstellen Sie eine neue JS-Datei mit dem folgenden Inhalt
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() } } }) } }
und fügen Sie dann einfach hinzu Der eingefügte Plug-in-Code befindet sich unten. Denken Sie daran, den -Verschluss zu entfernen, den das Plug-in ursprünglich hatte. Die Idee dieser Änderung besteht darin, sie in das benutzerdefinierte Anweisungsformular von Vue zu ändern. Wie verwende ich ? Fügen Sie zuerst
import wave from './components/wave.js' Vue.use(wave)
main.js
hinzu und binden Sie dann Anweisungen an die Elemente, die Sie benötigen.<template> <p> </p> <p><span>60%</span></p> <button>start</button> <button>stop</button> </template> <script> import wave from './a' 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>
Die endgültige Transformation ist hoffentlich abgeschlossen Es kann nützlich sein. Freunde, die neu bei Vue sind, können helfen.
Verwandte Empfehlungen:
So übertragen Sie Werte zwischen übergeordneten und untergeordneten Vue-Komponenten$() Funktion in jQuery So verwenden SieDas obige ist der detaillierte Inhalt vonSo schreiben Sie ein JS-Plugin in ein Vue-Plugin um. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!