Vue-插件开发[通俗易懂]

Vue-插件开发[通俗易懂]Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象: 注释:通过Vue.extend()方法创建了一个构造器NwdLoadingPlugin,其次我们再通过new NwdLoadingPlugin…

大家好,欢迎来到IT知识分享网。

首先感谢@劳卜 让我学习了很多知识,记录下来 作为自己的知识储备 长期翻看

插件分类

Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:

MyPlugin.install = function (Vue, options) {
    Vue.myGlobalMethod = function () {  // 1. 添加全局方法或属性,如: vue-custom-element
          // 逻辑...
    }
    Vue.directive('my-directive', {  // 2. 添加全局资源:指令/过滤器/过渡等,如 vue-touch
        bind (el, binding, vnode, oldVnode) {
            // 逻辑...
        }
        ...
    })
    Vue.mixin({
        created: function () {  // 3. 通过全局 mixin方法添加一些组件选项,如: vuex
            // 逻辑...
        }
        ...
    })
    Vue.prototype.$myMethod = function (options) {  // 4. 添加实例方法,通过把它们添加到 Vue.prototype 上实现
        // 逻辑...
    }
}

IT知识分享网

loading插件写法

目录结构:

Vue-插件开发[通俗易懂]

1.loading组件

nwd-loading.vue:

IT知识分享网<template>
    <div class="nwd-loading" v-show="show">
        <div>{{text}}</div>
    </div>
</template>

<script> export default { props: { show: Boolean, text: "正在加载中..." } } </script> 

2.封装插件

index.js

import NwdLoadingComponent from './nwd-loading'

let $vm;

export default {
	install(Vue,options) {
		if(!$vm) {
		    const NwdLoadingPlugin = Vue.extend(NwdLoadingComponent);
		    $vm = new NwdLoadingPlugin({
	                el: document.createElement('div')
	            });
		}
		$vm.show = false;
		let loading = {
                    show(text) {
                        $vm.show = true;
                        $vm.text = text;
                        document.body.appendChild($vm.$el);
                    },
                    hide() {
                        $vm.show = false;
                    }
                };
                if (!Vue.$loading) {
                    Vue.$loading = loading;
                }
                // Vue.prototype.$loading = Vue.$loading;
                Vue.mixin({
                    created() {
                        this.$loading = Vue.$loading;
                    }
                })
	}
}

注释:通过Vue.extend()方法创建了一个构造器NwdLoadingPlugin,其次我们再通过new NwdLoadingPlugin()  创建了实例$vm,并挂载到一个div元素上。最后我们需要通过document.body.appendChild($vm.$el)将其插入到DOM节点中。

当我们创建了$vm实例后,我们可以访问该实例的属性和方法,比如通过$vm.show就可以改变NwdLoadingComponent组件的show值来控制其显示隐藏。

最终我们通过Vue.mixin或者Vue.prototype.$loading来全局添加了$loading事件,其又包含了show和hide两个方法。我们可以直接在页面中使用this.$loading.show()来显示加载,使用this.$loading.hide()来关闭加载。

3.使用插件

main.js

IT知识分享网import NwdLoading from '@/components/nwd-loading/index.js'

Vue.use(NwdLoading)

4. 调用插件

….vue

export default {
        created() {
            this.$loading.show("loading内容")
        }
 }

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/9359.html

(0)
上一篇 2023-02-12 12:00
下一篇 2023-02-12 14:00

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信