php改vue,如何将JS插件改写成Vue的插件

本篇文章给大家分享的是关于如何将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

60%

start

stop

import wave from './a'

export default {

data(){

return{

wave: true

}

}

}

.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;}

最终改造完成，希望能对刚入坑Vue的朋友有所帮助。

相关推荐：