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

如何制作一个类似jquery插件的vue插件

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h3 id="articleHeader0">vue拿来写插件,会不会太那啥?</h3> <p>请跟我念,“不会,符合业务需求才是你的老板最想要的。”</p> <h3 id="articleHeader1">如何封装一个可以全局调用的vue插件</h3> <p>其原理其实相当简单,通过new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>(vueComponentConstructor)您可以轻松的建立一个vue实例,在该实例上您可以操作方法、操作数据、监听数据变化,使用各种钩子,对开发者而言并没有任何阻碍。</p> <h3 id="articleHeader2">我们生产了一个实例后该如何操作</h3> <p>请跟我来,写一个实现。首先,我们先写一个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="// vue组件 A.vue <template><br /> <el-dialog title=&quot;选择文件夹&quot; :visible.sync=&quot;visible&quot; @close=&quot;close&quot;></p> <div class=&quot;dirtree&quot;> <el-tree :props=&quot;dirtree&quot; :load=&quot;loadDir&quot; :render-content=&quot;refresh&quot; :expand-on-click-node=&quot;false&quot; @node-click=&quot;selectDir&quot; lazy ><br /> </el-tree> </div> <p> <el-button type=&quot;success&quot; @click=&quot;ensureSelectedDir&quot;>确定</el-button><br /> <el-button @click=&quot;cancelSelectedDir&quot;>取消</el-button><br /> </el-dialog><br /> </template></p> <p><script> import api from '@/api' export default { data () { return { dirtree: { label: function (data, node) { return data.name }, data: null, isLeaf: true }, visible: false, selectedDir: '' } }, methods: { close () { this.$nextTick(() => { // 关闭时销毁元素 <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$destroy(true) <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$el.parentNode.removeChild(<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.$el) }) }, ensureSelectedDir () { },</p> <p> cancelSelectedDir () { },</p> <p> selectDir (data) { },</p> <p> refreshDirData ($event, ctx) { },</p> <p> loadDir (<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>, resolve) { },</p> <p> refresh (h, ctx) { } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html">// vue组件 A.vue <span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-dialog</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"选择文件夹"</span> <span class="hljs-attr">:visible.sync</span>=<span class="hljs-string">"visible"</span> @<span class="hljs-attr">close</span>=<span class="hljs-string">"close"</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> <span class="hljs-attr">class</span>=<span class="hljs-string">"dirtree"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-tree</span> <span class="hljs-attr">:props</span>=<span class="hljs-string">"dirtree"</span> <span class="hljs-attr">:load</span>=<span class="hljs-string">"loadDir"</span> <span class="hljs-attr">:render-content</span>=<span class="hljs-string">"refresh"</span> <span class="hljs-attr">:expand-on-click-<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a></span>=<span class="hljs-string">"false"</span> @<span class="hljs-attr">node-click</span>=<span class="hljs-string">"selectDir"</span> <span class="hljs-attr">lazy</span> &gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-tree</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">el-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"success"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"ensureSelectedDir"</span>&gt;</span>确定<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">el-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"cancelSelectedDir"</span>&gt;</span>取消<span class="hljs-tag">&lt;/<span class="hljs-name">el-button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">el-dialog</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> api <span class="hljs-keyword">from</span> <span class="hljs-string">'@/api'</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> { data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">dirtree</span>: { <span class="hljs-attr">label</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data, node</span>) </span>{ <span class="hljs-keyword">return</span> data.name }, <span class="hljs-attr">data</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">isLeaf</span>: <span class="hljs-literal">true</span> }, <span class="hljs-attr">visible</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">selectedDir</span>: <span class="hljs-string">''</span> } }, <span class="hljs-attr">methods</span>: { close () { <span class="hljs-keyword">this</span>.$nextTick(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { <span class="hljs-comment">// 关闭时销毁元素</span> <span class="hljs-keyword">this</span>.$destroy(<span class="hljs-literal">true</span>) <span class="hljs-keyword">this</span>.$el.parentNode.removeChild(<span class="hljs-keyword">this</span>.$el) }) }, ensureSelectedDir () { }, cancelSelectedDir () { }, selectDir (data) { }, refreshDirData ($event, ctx) { }, loadDir (node, resolve) { }, refresh (h, ctx) { } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>当然,如果您的构建系统不支持vue-loader和webpack,您也可以使用以下写法</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="<a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> Dialog = {<br /> name: 'xxx',<br /> template: `</p> <div> // some template </div> <p> `,<br /> data () {<br /> return {}<br /> },<br /> methods: {}<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> Dialog = { <span class="hljs-attr">name</span>: <span class="hljs-string">'xxx'</span>, <span class="hljs-attr">template</span>: <span class="hljs-string">` &lt;div&gt; // some template &lt;/div&gt; `</span>, data () { <span class="hljs-keyword">return</span> {} }, <span class="hljs-attr">methods</span>: {} }</code></pre> <p>第二步,生产api出口</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 Vue from 'vue' import A from './A.vue' let AConstructor = Vue.extend(A) export default function (options = {}) { let instance = new AConstructor({ data: options // 混入初始化数据,也可以直接通过merge的方式把数据插入实例对象上 }) instance.vm = instance.$mount() document.body.appendChild(instance.vm.$el) instance.vm.visible = true // 一些生成后的data成员操作 return instance.vm } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// 生成调用方法</span> <span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> A <span class="hljs-keyword">from</span> <span class="hljs-string">'./A.vue'</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> AConstructor = Vue.extend(A) <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">options = {}</span>) </span>{ <span class="hljs-keyword">let</span> instance = <span class="hljs-keyword">new</span> AConstructor({ <span class="hljs-attr">data</span>: options <span class="hljs-comment">// 混入初始化数据,也可以直接通过merge的方式把数据插入实例对象上</span> }) instance.vm = instance.$mount() <span class="hljs-built_in">document</span>.body.appendChild(instance.vm.$el) instance.vm.visible = <span class="hljs-literal">true</span> <span class="hljs-comment">// 一些生成后的data成员操作</span> <span class="hljs-keyword">return</span> instance.vm } </code></pre> <p>您可以将其生成单一实例,也可以每次调用生成不同实例,在关闭时调用$destroy配合destroyed或者beforeDestroy对存在页面上的vm.$el进行销毁。</p> <h3 id="articleHeader3">一些提示</h3> <p>您可以将实例引用挂载到任何您想挂载的地方方便调用,您也可以使用<a href="http://www.js-code.com/tag/promis" title="Promis" target="_blank">Promis</a>e配合vue实例里的自定义方法或者其他方法实现promise链或者async await的灵活写法。这都取决于您。</p> <p></code></p>

总结

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

如何制作一个类似jquery插件的vue插件

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

如何制作一个类似jquery插件的vue插件

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

80%的人都看过