普通JS插件改寫成Vue的插件

不少剛入坑vue的小夥伴，想用一些原來不用框架的JS插件，用在vue中，但是發現沒有效果。
這裏我先貼個例子。
下圖是一個插件的效果圖

首先插件源代碼須要的能夠去點擊下載。
找到裏面的index.html，找到裏面的20行到87行，複製出來，找到你vue的項目，新建個文件夾，新建個js文件，內容以下

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

而後把剛剛粘貼的插件代碼粘在最下面，記得把插件原先有的閉包去掉。這個改裝的思路，就是改爲Vue的自定義指令形式。
怎麼使用呢，首先要在main.js中

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

而後在你須要的元素中綁定指令，下面來個demo

<template>
  <div>
    <div class="wave" v-wave="wave"><span>60%</span></div>
    <button @click="wave = true">start</button>
    <button @click="wave = false">stop</button>
  </div>
</template>

<script>
import wave from './a'
export default {
  data(){
    return{
      wave: true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.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>

最終改造完成，但願能對剛入坑Vue的朋友有所幫助。

---

最終改造完的源碼地址
vue自定義指令官方文檔
簡書同篇地址傳送門