1.vue自定义插件的作用
插件通常是用来为Vue添加全局功能。插件的范围没有严格的限制。——一般有下面几种:
- 添加全局方法或者 property。如:vue-custom-element
- 添加全局资源:指令/过滤器/过渡等。如 vue-touch
- 通过全局混入来添加一些组件选项。如 vue-router
- 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
- 一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router
这一段是vue官方文档上的原话
先来举例说明一下全局功能:就是不需要像其他的组件一样,每次使用前都需要先引入一次(这里指的是局部组件哈)。但是对于插件来说,只需要在最开始引入一次,在vue项目中的任意地方就可以直接使用。
2.插件原理
vue插件就是一个简单的js对象,这个插件对象有一个公开方法install,这个方法的第一个参数是Vue
构造器,第二个参数是一个可选的选项对象,而最终会导出对象以供别人使用,如下所示
- 定义插件
// 所谓vue的插件,就是一个js对象
let myplugin={
install:function(Vue,Options){
// 添加属性与方法
//这里我写的$testProp等加了$符号的,表示他为vue全局的,但实际上不加也可以的,访问时也不加就行了
Vue.prototype.$myAttribute='我是插件的属性',
Vue.prototype.$myfn=function(){
// 逻辑
console.log('我是插件的方法')
}
// 添加全局混入
Vue.mixin({
mounted() {
// 逻辑
console.log('组件创建成功')
},
})
// 添加全局指令
Vue.directive('my-directive',{
inserted:function(ele, binding, vnode, oldVnode){
ele.style.border='1px solid green'
ele.style.background='red'
}
})
}
}
export default myplugin
下面再定义一个处理时间的全局插件(方法)
1.1处理时间的方法 (dateFormat 方法)
/**
* 时间格式化函数
* 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,
* 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
*
* @param {Date||number} date Date对象或者时间戳
* @param {string} fmt 格式化字符串
* ("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
* ("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
* @returns {string} 格式化后的字符串
*/
export default (date, fmt) => {
// 如果是时间戳的话那么转换成Date类型
if (typeof date === 'number') {
date = new Date(date)
} else if (typeof date === 'string') {
date = new Date(parseInt(date))
}
let o = {
// 月份
'M+': date.getMonth() + 1,
// 日
'd+': date.getDate(),
// 小时
'h+': date.getHours(),
// 分
'm+': date.getMinutes(),
// 秒
's+': date.getSeconds(),
// 季度
'q+': Math.floor((date.getMonth() + 3) / 3),
// 毫秒
'S': date.getMilliseconds()
}
if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }
for (let k in o) {
if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
}
return fmt
}
1.2 定义插件并暴露该方法
/**
*
* 自定义插件
*
*/
import dateFormat from 'plugins/date'
import remoteFiles from 'plugins/remoteFiles'
const install = function (Vue) {
if (install.installed) return
install.installed = true
// 定义属性到Vue原型中
Object.defineProperties(Vue.prototype, {
$dateFormat: {
get () {
return dateFormat
}
},
$remoteFiles: {
get () {
return remoteFiles
}
}
})
}
export default {
install
}
1.3 在这里插入一点关于Object.defineProperties
方法:直接在一个对象上定义新的属性或修改现有属性,并返回该对象
详情用法见该链接Object.defineProperties
2.使用插件
使用插件的时候,在vue入口文件main.js中引入,再使用use()方法
例:
// 导入Vue框架
import Vue from 'vue'
// 导入主视图文件
import App from './App'
// 导入自定义插件
import Plugins from 'plugins'
// 使用自定义插件
Vue.use(Plugins)
new Vue({
el: '#app'
render: h=>h(App)
})
这样就已经全局使用了刚才定义的插件