How to rewrite JS plug-in into Vue plug-in

This article shares with you how to rewrite a JS plug-in into a Vue plug-in. The content is very good. Friends in need can refer to it. I hope it can help everyone.

Many friends who are new to vue want to use some JS plug-ins that do not use frameworks in vue, but find that it has no effect.
Here I will post an example first.
The picture below is the rendering of a plug-in

First of all, the plug-in source code needs to be downloaded.
Find index.html inside, find lines 20 to 87, copy them, find your vue project, create a new folder, and create a new js file with the following content

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()
                }   
            }
        })
    }
}

Then stick the plug-in code you just pasted at the bottom. Remember to remove the closure that the plug-in originally had. The idea of ​​​​this modification is to change it to Vue's custom instruction form. How to use it? First, you need to set it in
main.js

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

and then bind the instructions to the elements you need. Here is a demo

<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>

Finally The transformation is complete, I hope it will be helpful to friends who are new to Vue.

Related recommendations:

How to pass values ​​between vue parent and child components

$() function in jQuery How to use

The above is the detailed content of How to rewrite JS plug-in into Vue plug-in. For more information, please follow other related articles on the PHP Chinese website!