脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>很多刚入坑vue的小伙伴,想用一些原来不用框架的JS插件,用在vue中,可是发现没有效果。<br />这里我先贴个例子。<br />下图是一个插件的效果图<br /><span class="img-wrap"><img data-src="/img/bVbd4fl?w=347&amp;h=317" src="/img/bVbd4fl?w=347&amp;h=317" alt="图片描述" title="图片描述" style="cursor: pointer; display: inline;"></span></p> <p>首先插件<a href="https://pan.baidu.com/s/1ha0BBEFf-Sf7TsyRq6Q_Ng" rel="nofollow noreferrer" target="_blank">源代码</a>需要的可以去点击下载。<br />找到里面的<code>index.html</code>,找到里面的20行到87行,复制出来,找到你vue的项目,新建个文件夹,新建个js文件,内容如下</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="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() } } }) } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code class="javascropt"><span class="hljs-keyword">import</span> wavePng <span class="hljs-keyword">from</span> <span class="hljs-string">'./wave.png'</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { install(<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>){ Vue.directive(<span class="hljs-string">'wave'</span>, { <span class="hljs-comment">// 当指令绑定好之后,立即触发的方法</span> inserted: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">el</span>)</span>{ start(el) }, <span class="hljs-comment">// 当指令的值变化后会触发update</span> update: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">el, binding, v<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a></span>)</span>{ <span class="hljs-keyword">if</span>(binding.value){ start(el) }<span class="hljs-keyword">else</span>{ stop() } } }) } }</code></pre> <p>然后把刚刚粘贴的插件代码粘在最下面,记得把插件原先有的<strong>闭包去掉</strong>。这个改装的思路,就是改成<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>的自定义指令形式。<br />怎么使用呢,首先要在<code>main.js</code>中</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import wave from './components/wave.js' Vue.use(wave)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> wave <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/wave.js'</span> Vue.use(wave)</code></pre> <p>然后在你需要的元素中绑定指令,下面来个demo</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div> <div class=&quot;wave&quot; v-wave=&quot;wave&quot;><span>60%</span></div> <p> <button @click=&quot;wave = true&quot;>start</button><br /> <button @click=&quot;wave = false&quot;>stop</button> </div> <p></template></p> <p><script> import wave from './a' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data(){ return{ wave: true } } } </script></p> <p><!-- Add &quot;scoped&quot; attribute to limit CSS to this component only --></p> <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> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"wave"</span> <span class="hljs-attr">v-wave</span>=<span class="hljs-string">"wave"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>60%<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"wave = true"</span>&gt;</span>start<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"wave = false"</span>&gt;</span>stop<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> wave <span class="hljs-keyword">from</span> <span class="hljs-string">'./a'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { data(){ <span class="hljs-keyword">return</span>{ <span class="hljs-attr">wave</span>: <span class="hljs-literal">true</span> } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- Add "scoped" attribute to limit <a href="http://www.js-code.com/tag/css" title="浏览关于“CSS”的文章" target="_blank" class="tag_link">CSS</a> to <a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a> component only --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="css"> <span class="hljs-selector-class">.wave</span>{<span class="hljs-attribute">width</span>:<span class="hljs-number">200px</span>;<span class="hljs-attribute">height</span>:<span class="hljs-number">200px</span>;<span class="hljs-attribute">overflow</span>:hidden;<span class="hljs-attribute">border-radius</span>:<span class="hljs-number">50%</span>;<span class="hljs-attribute">background</span>:<span class="hljs-built_in">rgba</span>(255,203,103,.6);<span class="hljs-attribute">margin</span>:<span class="hljs-number">100px</span> auto;<span class="hljs-attribute">position</span>:relative;<span class="hljs-attribute">text-align</span>:center;<span class="hljs-attribute">display</span>:table-cell;<span class="hljs-attribute">vertical-align</span>:middle;} <span class="hljs-selector-class">.wave</span> <span class="hljs-selector-tag">span</span>{<span class="hljs-attribute">display</span>:inline-block;<span class="hljs-attribute">color</span>:<span class="hljs-number">#fff</span>;<span class="hljs-attribute">font-size</span>:<span class="hljs-number">20px</span>;<span class="hljs-attribute">position</span>:relative;<span class="hljs-attribute">z-index</span>:<span class="hljs-number">2</span>; <span class="hljs-attribute">position</span>: absolute; <span class="hljs-attribute">top</span>: <span class="hljs-number">50%</span>; <span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span>; <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translate</span>(-50%) } <span class="hljs-selector-class">.wave</span> <span class="hljs-selector-tag">canvas</span>{<span class="hljs-attribute">position</span>:absolute;<span class="hljs-attribute">left</span>:<span class="hljs-number">0</span>;<span class="hljs-attribute">top</span>:<span class="hljs-number">0</span>;<span class="hljs-attribute">z-index</span>:<span class="hljs-number">1</span>;} </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <p>最终改造完成,希望能对刚入坑<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>的朋友有所帮助。</p> <hr> <p><a href="https://pan.baidu.com/s/1z9-3_IXhx9rgn_AHLqSYpQ" rel="nofollow noreferrer" target="_blank">最终改造完的源码地址</a><br /><a href="https://cn.vuejs.org/v2/guide/custom-directive.html#ad" rel="nofollow noreferrer" target="_blank">vue自定义指令官方文档</a><br /><a href="https://www.jianshu.com/p/4923ba698c52" rel="nofollow noreferrer" target="_blank">简书同篇地址传送门</a></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过