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

vue插件编写小记

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>一、为什么要自己动手写插件呢,原因有二:</p> <p>  其一:是因为最近产品了提了一个在web端接收,消息通知的需求,产品要求在若干个页面内如果有消息,就要弹出消息弹窗展示给用户,略加思索之后,第一反应就是写个消息的组件,在需要的页面引入,不过写好之后,发现这样写好麻烦,是不是可以写个插件在全局一次性引入呢?</p> <p>  其二:纯粹的想学习一下vue的插件是如何开发的</p> <p>二、既然有想法了,那就开始写呗,先去查看了vue的官方文档,官方文档介绍如下:</p> <p>插件通常用于为 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 添加全局级别的功能。然而对于插件,并没有严格限定其使用范围 - 下面是常见的几种插件类型:</p> <p>添加一些全局方法或属性。</p> <p>添加一个或多个全局资源(asset):指令(directives)/过滤器(filters)/过渡(transitions) 等。</p> <p>通过全局 mixin,添加一些组件选项。</p> <p>添加一些 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 实例方法,通过把这些方法添加到 <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.prototype 上实现。</p> <p>一个可以提供 <a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a> 的库(library),与此同时也是以上功能的组合。</p> <p>Vue.js 插件应该暴露一个 install 方法。此方法在调用时,将 Vue 构造函数作为第一个参数传入,以及将一个可选的选项作为第二个参数传入:</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="MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 一些逻辑…… } // 2. 添加一个全局资源(asset) Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { // 一些逻辑…… } ... }) // 3. 注入一些组件选项 Vue.mixin({ created: function () { // 一些逻辑…… } ... }) // 4. 添加一个实例方法 Vue.prototype.$myMethod = function (methodOptions) { // 一些逻辑…… } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs php"><code>MyPlugin.install = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(Vue, options)</span> </span>{ <span class="hljs-comment">// 1. 添加全局方法或属性</span> Vue.myGlobalMethod = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ <span class="hljs-comment">// 一些逻辑……</span> } <span class="hljs-comment">// 2. 添加一个全局资源(asset)</span> Vue.directive(<span class="hljs-string">'my-directive'</span>, { bind (el, binding, v<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>, oldVnode) { <span class="hljs-comment">// 一些逻辑……</span> } ... }) <span class="hljs-comment">// 3. 注入一些组件选项</span> Vue.mixin({ created: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ <span class="hljs-comment">// 一些逻辑……</span> } ... }) <span class="hljs-comment">// 4. 添加一个实例方法</span> Vue.prototype.$myMethod = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(methodOptions)</span> </span>{ <span class="hljs-comment">// 一些逻辑……</span> } }</code></pre> <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="通过调用全局方法 Vue.use() 使用插件: // 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin) 可以根据情况,传入一些可选的选项: Vue.use(MyPlugin, { someOption: true }) Vue.use 会自动阻止多次使用同一个插件,所以对于同一个插件的多次调用,将只安装一次。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs php"><code>通过调用全局方法 Vue.<span class="hljs-keyword">use</span>() 使用插件: <span class="hljs-comment">// 调用 `MyPlugin.install(Vue)`</span> Vue.<span class="hljs-keyword">use</span>(MyPlugin) 可以根据情况,传入一些可选的选项: Vue.<span class="hljs-keyword">use</span>(MyPlugin, { someOption: <span class="hljs-keyword">true</span> }) Vue.<span class="hljs-keyword">use</span> 会自动阻止多次使用同一个插件,所以对于同一个插件的多次调用,将只安装一次。</code></pre> <p>三、看完文档我们就开始动手写呗(以loading插件为例)</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="var Loading = {} var showLoad = false var loadNode = {} Loading.install = function (Vue, options) { Vue.prototype.$loading = function (type) { if (type === 'close') { loadNode.show = showLoad = false document.querySelector('.loadEffect').remove() } else { if (showLoad) { return } <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> LoadingTpl = Vue.extend({<br /> data: function () {<br /> return {<br /> show: showLoad<br /> }<br /> },<br /> template: `</p> <div class=&quot;loadEffect&quot;><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></p> <p class=&quot;loadings&quot;>loading....</p> </div> <p> `<br /> })<br /> let tpl = new LoadingTpl().$mount().$el<br /> document.body.appendChild(tpl)<br /> loadNode.show = showLoad = true;<br /> ['open', 'close'].forEach(function (type) {<br /> Vue.prototype.$loading[type] = function () {<br /> return Vue.prototype.$loading(type)<br /> }<br /> })<br /> }<br /> }<br /> }</p> <p>export default Loading" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><code>var Loading = {} var showLoad = <span class="hljs-literal">false</span> var loadNode = {} Loading.install = function (Vue, options) { Vue.prototype.$loading = function (type) { <span class="hljs-keyword">if</span> (type === <span class="hljs-string">'close'</span>) { loadNode.show = showLoad = <span class="hljs-literal">false</span> <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.loadEffect'</span>).remove() } <span class="hljs-keyword">else</span> { <span class="hljs-keyword">if</span> (showLoad) { <span class="hljs-keyword">return</span> } <a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a> LoadingTpl = Vue.extend({ data: function () { <span class="hljs-keyword">return</span> { show: showLoad } }, template: `<span class="javascript">&lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"loadEffect"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"loadings"</span>&gt;</span>loading....<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> </span>` }) let tpl = <span class="hljs-keyword">new</span> LoadingTpl().$mount().$el <span class="hljs-built_in">document</span>.body.appendChild(tpl) loadNode.show = showLoad = <span class="hljs-literal">true</span>; [<span class="hljs-string">'open'</span>, <span class="hljs-string">'close'</span>].forEach(function (type) { Vue.prototype.$loading[type] = function () { <span class="hljs-keyword">return</span> Vue.prototype.$loading(type) } }) } } } <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> Loading</code></pre> <p>然后在我们的组件中使用<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$loading来使用,发现没有任何问题。。。。。</p> <p>但是。。。嘿嘿,总有但是,,没错下面的场景就是万恶的但是。。。。</p> <p>因为我们发现我们编写的这个插件只能在vue组件中使用,如果我想在ax<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a>的拦截器中使用这个插件呢?显然用不了,这是为什么呢?是因为我们在ax<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a>中没有访问到vue的实例,因为我们的插件是过载在vue的实例上的</p> <p>现在怎么办,百度看了很多别人写的博客,不出意外,对就是那个不出意外,没有找到合适的解决方案!!!!!!!!!!!!!!!!!</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>怎么办呢?放弃?不可能,这辈子是不可能放弃的!!!下辈子也不可能的!!!那怎么办?嘿嘿,世面上还是有很多牛叉的UI库的比如element-ui,然后自己去试了一下,发现element-ui不仅在vue组件中可以使用,也可以在axios的拦截器这中调用</p> <p>既然发现了,那就去查看他们的源码,看看大佬们是如何实现的,不看不知道,一看吓一跳,老大的代码果然性感,下面贴出我自己删减后实现这个功能的核心代码</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="const Message = function (options) { options = options || {} options = { message: options.message, name: options.name, state: options.state } instance = new MessageConstructor({ data: options }) instance.vm = instance.$mount() document.body.appendChild(instance.vm.$el) } Vue.prototype.$message = Message" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs php"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> Message = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(options)</span> </span>{ options = options || {} options = { message: options.message, name: options.name, state: options.state } instance = <span class="hljs-keyword">new</span> MessageConstructor({ data: options }) instance.vm = instance.$mount() document.body.appendChild(instance.vm.$el) } Vue.prototype.$message = Message</code></pre> <p>下面贴出源码地址</p> <p><a href="https://github.com/songdongdong123/vue-message-Plugins" rel="nofollow noreferrer" target="_blank">https://github.com/songdongdo...</a></p> <p>如果对您有帮助请不要吝啬您的start<br />我的原文博客地址:<a href="http://www.cnblogs.com/songdongdong/p/8638895.html" rel="nofollow noreferrer" target="_blank">http://www.cnblogs.com/songdo...</a></p> <p></code></p>

总结

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

vue插件编写小记

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

vue插件编写小记

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

80%的人都看过