本文介绍了vue使用xe-utils函数库的具体方法,分享给大家,具体如下:
安装完成后自动挂载在vue实例:this.$utils(函数库)
支持挂载函数列表:this.$browse(浏览器内核判断) this.$locat(用于读写地址栏参数)
在 vue 实例中通过 this.$utils 调用的函数 this 默认指向当前vue实例。
CDN 安装
使用 script 方式安装,VXEUtils 会定义为全局变量
生产环境请使用 vxe-utils.min.js,更小的压缩版本,可以带来更快的速度体验。
cdnjs 获取最新版本
unpkg 获取最新版本
AMD 安装
require.js 安装示例
// ./main.js 安装
define(['Vue','xe-utils','vxe-utils'],function (Vue,XEUtils,VXEUtils) {
Vue.use(VXEUtils,XEUtils)
})
define(['Vue','xe-utils','vxe-utils'],function (Vue,XEUtils,VXEUtils) {
Vue.use(VXEUtils,XEUtils)
})
ES6 Module 安装方式
通过 Vue.use() 来全局安装
Vue.use(VXEUtils,XEUtils)
// 通过vue实例的调用方式
const dateStr = this.$utils.dateToString(new Date(),'yyyy-MM-dd')
const date = this.$utils.stringToDate('11/20/2017 10:10:30','MM/dd/yyyy HH:mm:ss')
vue 实例挂载自定义属性
示例
XEUtils.mixin(customs)
Vue.use(VXEUtils,{mounts: ['locat','browse','cookie']})
Vue.use(VXEUtils,{mounts: ['locat','browse','cookie']})
this.$locat // this.$locat.origin
this.$browse // this.$browse['-webkit'] true
this.$cookie // this.$cookie('name','value')
混合函数
文件 ./customs.js
自定义函数')
}
示例 ./main.js
示例
Home.vue