How to rewrite JS plug-in into Vue plug-in-JS Tutorial-php.cn

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

不言

Release： 2018-07-21 11:12:58

Original

2745 people have browsed it

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
How to rewrite JS plug-in into Vue 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()
                }   
            }
        })
    }
}

Copy after login

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)

Copy after login

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>

Copy after login

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!