【vue】插件

JavaScript018

【vue】插件,第1张

插件通常用来为 Vue 添加 全局功能 ,所谓全局即不需要像组件那样,每次使用他前都需要先引入一次。对于插件只要在 最开始引入一次,在任何组件就可以直接使用 。(类似于我们在window上添加的方法属性那样,任何地方都可以用)

下面几种常见的用途:

主要两种使用方式

一:全局引入方式

(1)使用步骤

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成

也可以传入一个可选的选项对象:

(2)在main.js中配置

比如:使用element-ui为例:

组使用件中

二:组件引入方式

比如,以使用 swiper为例

组件中使用

vue插件其实就是一个简单的 js对象而已 ,然后这个插件对象有一个公开属性 install ,他的值为一个函数,此函数接受两个参数。第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象。

一:开发插件有四种方法

二:添加实例方法

其中最常用的:【4. 添加实例方法】的写法和使用方法,下面举例说明toast 最简单插件开发过:

(1)新建一个plugin目录,编辑插件toast.js文件

(2)在 main.js 中,需要导入 toast.js 并且通过全局方法 Vue.use() 来使用插件

(3)我们在组件中来获取该插件定义的 $msg 属性,比如在根组件App.vue中

控制台输出:Hello World

三:添加全局资源

这里主要介绍过滤器

(1)在plugin目录新建插件filter.js文件

(2)在 main.js 中,需要导入 filter.js 并且通过全局方法 Vue.use() 来使用插件

(3)HelloWorld.vue页面上使用

添加全局资源也可以不放在插件里面实现,可以直接在main.js入口文件创建Vue实例前添加:

其他组件就可以通过this直接使用:

(1)核心区别

简单来说,插件就是指对Vue的功能的增强或补充。

(2)其他区别

一个Vue插件可以是一堆Vue组件的集合(插件干的事就是把内部的组件帮你倒入到vue全局下),也可以是用来扩展Vue功能的,比如 Vuex, Vue-Router。

测试完成,下面就要把的内容打包发布到npm 上去,具体步骤可以参照

https://www.cnblogs.com/adouwt/p/9211003.html

看你怎么实现了

一种是在请求数据前展示toast,比如Toast.show(),然后在获取到数据以及处理完所需要的任务之后隐藏Toast.hide(),这样的话提示框显示的时间基本就是请求数据所花的实际

还有种是在toast组件中设置属性duration(比如默认2.5秒)控制toast展示时间,这样的话toast显示的时间就根据传递的时间来,Toast.show(3) 那就是toast显示3秒后关闭